@procaaso/alphinity-ui-components 1.11.0 → 1.12.0

package/dist/index.cjs

@@ -50,6 +50,8 @@ __export(index_exports, {
   FooterPanel: () => FooterPanel,
   FullscreenContainer: () => FullscreenContainer,
   FullscreenWorkspace: () => FullscreenWorkspace,
+  ISA_UNKNOWN: () => ISA_UNKNOWN,
+  ISA_UNKNOWN_DARK: () => ISA_UNKNOWN_DARK,
   LeftPanel: () => LeftPanel,
   LeftToggleButton: () => LeftToggleButton,
   LegacyValueEntry: () => LegacyValueEntry,
@@ -72,8 +74,9 @@ __export(index_exports, {
   ThemeProvider: () => ThemeProvider,
   ThemeToggle: () => ThemeToggle,
   TrendLine: () => TrendLine,
-  UNKNOWN_MARK_COLOR: () => UNKNOWN_MARK_COLOR,
-  UNKNOWN_MARK_COLOR_DARK: () => UNKNOWN_MARK_COLOR_DARK,
+  UNKNOWN_GLYPH_RING_DASH: () => UNKNOWN_GLYPH_RING_DASH,
+  UNKNOWN_STATUS_GLYPH_COLOR_VAR: () => UNKNOWN_STATUS_GLYPH_COLOR_VAR,
+  UnknownStatusGlyph: () => UnknownStatusGlyph,
   ValueEntry: () => ValueEntry,
   ZoomButton: () => ZoomButton,
   ZoomControls: () => ZoomControls,
@@ -91,6 +94,7 @@ __export(index_exports, {
   importDiagram: () => importDiagram,
   mockSymbolLibrary: () => mockSymbolLibrary,
   nodeHasPort: () => nodeHasPort,
+  normalizeDeviceStatus: () => normalizeDeviceStatus,
   overlayStyles: () => overlayStyles,
   readAppearanceValue: () => readAppearanceValue,
   registerSymbol: () => registerSymbol,
@@ -382,6 +386,16 @@ var ValueEntry = ({
 var import_react3 = require("react");
 
 // src/theme/statusColors.ts
+var ISA_UNKNOWN = {
+  fg: "#4f4f8a",
+  bg: "#ebebf5",
+  border: "#8f8fc2"
+};
+var ISA_UNKNOWN_DARK = {
+  fg: "#b9bbdb",
+  bg: "#23263a",
+  border: "#6f74a3"
+};
 var DEFAULT_STATUS_COLORS = {
   normal: { fill: "#888888", stroke: "#6b6b6b", bg: "#888888", text: "#ffffff", border: "#6b6b6b" },
   warning: { fill: "#f59e0b", stroke: "#d97706", bg: "#FFD700", text: "#000000", border: "#d97706" },
@@ -389,7 +403,8 @@ var DEFAULT_STATUS_COLORS = {
   fault: { fill: "#dc2626", stroke: "#b91c1c", bg: "#FF0000", text: "#ffffff", border: "#b91c1c" },
   off: { fill: "#edeeef", stroke: "#000000", bg: "#666666", text: "#ffffff", border: "#4b5563" },
   starting: { fill: "#90EE90", stroke: "#22c55e", bg: "#90EE90", text: "#000000", border: "#22c55e" },
-  stopping: { fill: "#FFD700", stroke: "#d97706", bg: "#FFD700", text: "#000000", border: "#d97706" }
+  stopping: { fill: "#FFD700", stroke: "#d97706", bg: "#FFD700", text: "#000000", border: "#d97706" },
+  unknown: { fill: ISA_UNKNOWN.bg, stroke: ISA_UNKNOWN.border, bg: ISA_UNKNOWN.bg, text: ISA_UNKNOWN.fg, border: ISA_UNKNOWN.border }
 };
 var FORCED_MARK_COLOR = {
   fill: "#ede9fe",
@@ -398,27 +413,16 @@ var FORCED_MARK_COLOR = {
   text: "#5b21b6",
   border: "#7c3aed"
 };
-var UNKNOWN_MARK_COLOR = {
-  fill: "#ebebf5",
-  stroke: "#8f8fc2",
-  bg: "#ebebf5",
-  text: "#4f4f8a",
-  border: "#8f8fc2"
-};
-var UNKNOWN_MARK_COLOR_DARK = {
-  fill: "#23263a",
-  stroke: "#6f74a3",
-  bg: "#23263a",
-  text: "#b9bbdb",
-  border: "#6f74a3"
-};
 var STATUS_ALIASES = {
   running: "normal",
   stopped: "off"
 };
-function resolveStatusColor(status, customMap) {
+function normalizeDeviceStatus(status) {
   const raw = (status || "off").toLowerCase();
-  const key = STATUS_ALIASES[raw] ?? raw;
+  return STATUS_ALIASES[raw] ?? raw;
+}
+function resolveStatusColor(status, customMap) {
+  const key = normalizeDeviceStatus(status);
   const defaults = DEFAULT_STATUS_COLORS[key] ?? DEFAULT_STATUS_COLORS.off;
   const overrides = customMap?.[key];
   if (!overrides) return defaults;
@@ -858,7 +862,79 @@ var ControlPanel = ({
 };
 
 // src/components/StatusIndicator/StatusIndicator.tsx
+var import_react5 = __toESM(require("react"), 1);
+
+// src/theme/unknownStatusGlyph.tsx
 var import_jsx_runtime6 = require("react/jsx-runtime");
+var UNKNOWN_STATUS_GLYPH_COLOR_VAR = "--ui-status-indicator-unknown-glyph-color";
+var UNKNOWN_GLYPH_STROKE_WEIGHTS = {
+  small: { ring: 4.5, ringDash: "7 6", mark: 5, dot: 2.9 },
+  medium: { ring: 4, ringDash: "6.5 5.5", mark: 4.5, dot: 2.7 },
+  large: { ring: 3.5, ringDash: "6.5 5.5", mark: 4, dot: 2.5 }
+};
+var UNKNOWN_GLYPH_RING_DASH = UNKNOWN_GLYPH_STROKE_WEIGHTS.medium.ringDash;
+var UNKNOWN_GLYPH_FILL_STYLE = {
+  position: "absolute",
+  inset: 0,
+  width: "100%",
+  height: "100%"
+};
+function unknownGlyphHostStyle(isUnknown, style) {
+  return isUnknown ? { position: "relative", ...style } : style;
+}
+function UnknownStatusGlyph({
+  size = "medium",
+  counterRotate = false,
+  style,
+  ...rest
+}) {
+  const weights = UNKNOWN_GLYPH_STROKE_WEIGHTS[size];
+  return /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(
+    "svg",
+    {
+      viewBox: "0 0 48 48",
+      "aria-hidden": "true",
+      focusable: "false",
+      style: {
+        display: "block",
+        color: `var(${UNKNOWN_STATUS_GLYPH_COLOR_VAR}, currentColor)`,
+        transform: counterRotate ? "rotate(-45deg)" : void 0,
+        ...style
+      },
+      ...rest,
+      children: [
+        /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+          "circle",
+          {
+            cx: 24,
+            cy: 24,
+            r: 20,
+            fill: "none",
+            stroke: "currentColor",
+            strokeDasharray: weights.ringDash,
+            strokeLinecap: "round",
+            strokeWidth: weights.ring
+          }
+        ),
+        /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+          "path",
+          {
+            d: "M18.4 18.6a5.8 5.8 0 1 1 6.4 8.1v3.1",
+            fill: "none",
+            stroke: "currentColor",
+            strokeLinecap: "round",
+            strokeLinejoin: "round",
+            strokeWidth: weights.mark
+          }
+        ),
+        /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("circle", { cx: 24.6, cy: 35.4, r: weights.dot, fill: "currentColor" })
+      ]
+    }
+  );
+}
+
+// src/components/StatusIndicator/StatusIndicator.tsx
+var import_jsx_runtime7 = require("react/jsx-runtime");
 var getStatusDescription = (status) => {
   switch (status) {
     case "alarm":
@@ -873,10 +949,23 @@ var getStatusDescription = (status) => {
       return "Operating normally";
     case "off":
       return "Equipment is off";
+    case "unknown":
+      return "Device state cannot be confirmed. Check the link or the wiring.";
     default:
       return "";
   }
 };
+var visuallyHiddenStyle = {
+  position: "absolute",
+  width: "1px",
+  height: "1px",
+  padding: 0,
+  margin: "-1px",
+  overflow: "hidden",
+  clip: "rect(0, 0, 0, 0)",
+  whiteSpace: "nowrap",
+  border: 0
+};
 var StatusIndicator = ({
   status,
   size = "medium",
@@ -889,17 +978,25 @@ var StatusIndicator = ({
   forced = false,
   realValue,
   className = "",
+  style,
+  "aria-describedby": consumerDescribedBy,
+  children,
   ...props
 }) => {
+  const generatedDescriptionId = `${import_react5.default.useId()}-status-description`;
   if (!visible) {
     return null;
   }
+  const describedBy = consumerDescribedBy ? `${consumerDescribedBy} ${generatedDescriptionId}` : generatedDescriptionId;
+  const description = getStatusDescription(status);
   const baseClass = "ui-status-indicator";
   const statusClass = status ? `ui-status-indicator--${status}` : "";
   const sizeClass = size ? `ui-status-indicator--${size}` : "";
   const shapeClass = shape ? `ui-status-indicator--${shape}` : "";
   const animationClass = animation ? `ui-status-indicator--${animation}` : "";
   const ledClass = led ? "ui-status-indicator--led" : "";
+  const isUnknown = status === "unknown";
+  const indicatorStyle = unknownGlyphHostStyle(isUnknown, style);
   const getContainerLayout = () => {
     switch (labelPosition) {
       case "left":
@@ -916,19 +1013,20 @@ var StatusIndicator = ({
   };
   const forcedClass = forced ? "ui-status-indicator--forced" : "";
   const hasRealValue = forced && realValue !== void 0;
-  return /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("span", { className: getContainerLayout(), children: [
-    label && (labelPosition === "left" || labelPosition === "top") && /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("span", { className: "ui-status-indicator-label", children: label }),
-    hasRealValue && (labelPosition === "left" || labelPosition === "top") && /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("span", { className: "ui-status-indicator-real-value", children: [
+  return /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("span", { className: getContainerLayout(), children: [
+    label && (labelPosition === "left" || labelPosition === "top") && /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("span", { className: "ui-status-indicator-label", children: label }),
+    hasRealValue && (labelPosition === "left" || labelPosition === "top") && /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("span", { className: "ui-status-indicator-real-value", children: [
       "REAL ",
       realValue
     ] }),
-    /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("span", { style: { position: "relative", display: "inline-flex" }, children: [
-      /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+    /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("span", { style: { position: "relative", display: "inline-flex" }, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(
         "span",
         {
           role: "status",
           "aria-label": label || `Status: ${status}`,
-          "aria-description": getStatusDescription(status),
+          "aria-description": description,
+          "aria-describedby": describedBy,
           "data-status": status,
           "data-forced": forced,
           className: `
@@ -941,13 +1039,26 @@ var StatusIndicator = ({
             ${forcedClass}
             ${className}
           `.replace(/\s+/g, " ").trim(),
-          ...props
+          style: indicatorStyle,
+          ...props,
+          children: [
+            isUnknown && /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+              UnknownStatusGlyph,
+              {
+                size,
+                counterRotate: shape === "diamond",
+                style: UNKNOWN_GLYPH_FILL_STYLE
+              }
+            ),
+            children,
+            /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("span", { id: generatedDescriptionId, style: visuallyHiddenStyle, children: description })
+          ]
         }
       ),
-      forced && /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("span", { className: "ui-status-indicator-forced-badge", "aria-label": "Forced", children: "F" })
+      forced && /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("span", { className: "ui-status-indicator-forced-badge", "aria-label": "Forced", children: "F" })
     ] }),
-    label && (labelPosition === "right" || labelPosition === "bottom") && /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("span", { className: "ui-status-indicator-label", children: label }),
-    hasRealValue && (labelPosition === "right" || labelPosition === "bottom") && /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("span", { className: "ui-status-indicator-real-value", children: [
+    label && (labelPosition === "right" || labelPosition === "bottom") && /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("span", { className: "ui-status-indicator-label", children: label }),
+    hasRealValue && (labelPosition === "right" || labelPosition === "bottom") && /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("span", { className: "ui-status-indicator-real-value", children: [
       "REAL ",
       realValue
     ] })
@@ -955,7 +1066,7 @@ var StatusIndicator = ({
 };
 
 // src/components/NodeControlsPanel/NodeControlsPanel.tsx
-var import_jsx_runtime7 = require("react/jsx-runtime");
+var import_jsx_runtime8 = require("react/jsx-runtime");
 var NodeControlsPanel = ({
   config,
   onClose,
@@ -1028,8 +1139,8 @@ var NodeControlsPanel = ({
     overflowY: "auto",
     flex: 1
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(import_jsx_runtime7.Fragment, { children: [
-    /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(import_jsx_runtime8.Fragment, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
       "div",
       {
         style: {
@@ -1042,16 +1153,16 @@ var NodeControlsPanel = ({
         onClick: onClose
       }
     ),
-    /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(
+    /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(
       "div",
       {
         className: `node-controls-panel ${touchClass} ${className}`.trim(),
         style: containerStyle,
         ...props,
         children: [
-          /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("div", { style: headerStyle, children: [
-            /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("h2", { style: titleStyle, children: config.title }),
-            /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+          /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("div", { style: headerStyle, children: [
+            /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("h2", { style: titleStyle, children: config.title }),
+            /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
               "button",
               {
                 style: closeButtonStyle,
@@ -1069,7 +1180,7 @@ var NodeControlsPanel = ({
               }
             )
           ] }),
-          /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("div", { style: contentStyle, children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+          /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("div", { style: contentStyle, children: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
             ControlPanel,
             {
               title: config.nodeId,
@@ -1098,7 +1209,7 @@ var NodeControlsPanel = ({
         ]
       }
     ),
-    /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("style", { children: `
+    /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("style", { children: `
         @keyframes slideUp {
           from {
             transform: translateY(100%);
@@ -1144,8 +1255,8 @@ var NodeControlsPanel = ({
 };
 
 // src/components/DeviceControlPanel/DeviceControlPanel.tsx
-var import_react5 = __toESM(require("react"), 1);
-var import_jsx_runtime8 = require("react/jsx-runtime");
+var import_react6 = __toESM(require("react"), 1);
+var import_jsx_runtime9 = require("react/jsx-runtime");
 function DeviceControlPanelImpl({
   binding,
   onClose,
@@ -1173,11 +1284,11 @@ function DeviceControlPanelImpl({
   showBuiltInToast = true,
   embedded = false
 }) {
-  const [localParameterValues, setLocalParameterValues] = (0, import_react5.useState)({});
-  const [showModeModal, setShowModeModal] = (0, import_react5.useState)(false);
-  const [pendingMode, setPendingMode] = (0, import_react5.useState)(null);
-  const [showToast, setShowToast] = (0, import_react5.useState)(true);
-  (0, import_react5.useEffect)(() => {
+  const [localParameterValues, setLocalParameterValues] = (0, import_react6.useState)({});
+  const [showModeModal, setShowModeModal] = (0, import_react6.useState)(false);
+  const [pendingMode, setPendingMode] = (0, import_react6.useState)(null);
+  const [showToast, setShowToast] = (0, import_react6.useState)(true);
+  (0, import_react6.useEffect)(() => {
     if (binding) {
       const currentParams2 = binding.parameters[binding.state.currentMode] || [];
       const values = {};
@@ -1187,7 +1298,7 @@ function DeviceControlPanelImpl({
       setLocalParameterValues(values);
     }
   }, [binding, binding?.state.currentMode]);
-  (0, import_react5.useEffect)(() => {
+  (0, import_react6.useEffect)(() => {
     if (binding?.state.lastCommandResult) {
       setShowToast(true);
       const timer = setTimeout(() => {
@@ -1225,6 +1336,7 @@ function DeviceControlPanelImpl({
   const selectedColor = "#b4d0fe";
   const statusEntry = resolveStatusColor(binding.state.status, binding.theme?.statusColors);
   const statusColor = statusEntry.bg;
+  const isUnknownStatus = normalizeDeviceStatus(binding.state.status) === "unknown";
   const handleModeChange = (mode) => {
     onModeChange?.(mode);
   };
@@ -1279,9 +1391,9 @@ function DeviceControlPanelImpl({
     ...binding.display?.style
   };
   const titleText = binding.display?.title || binding.deviceName || binding.tag || binding.nodeId;
-  return /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(import_jsx_runtime8.Fragment, { children: [
-    /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("div", { style: panelStyle, className: binding.display?.className, children: [
-      /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(import_jsx_runtime9.Fragment, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("div", { style: panelStyle, className: binding.display?.className, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(
         "div",
         {
           style: {
@@ -1293,8 +1405,8 @@ function DeviceControlPanelImpl({
             borderBottom: `2px solid ${borderColor}`
           },
           children: [
-            /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("div", { children: [
-              /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+            /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("div", { children: [
+              /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
                 "h3",
                 {
                   style: {
@@ -1314,7 +1426,7 @@ function DeviceControlPanelImpl({
                   children: titleText.length > 25 ? titleText.slice(0, 25) + "..." : titleText
                 }
               ),
-              binding.deviceType && /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+              binding.deviceType && /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
                 "div",
                 {
                   style: {
@@ -1327,8 +1439,8 @@ function DeviceControlPanelImpl({
                 }
               )
             ] }),
-            /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("div", { style: { display: "flex", gap: "8px" }, children: [
-              showConfigButton && onOpenConfig && /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+            /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("div", { style: { display: "flex", gap: "8px" }, children: [
+              showConfigButton && onOpenConfig && /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
                 "button",
                 {
                   onClick: onOpenConfig,
@@ -1349,7 +1461,7 @@ function DeviceControlPanelImpl({
                   children: "\u2699"
                 }
               ),
-              onUndock && /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+              onUndock && /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
                 "button",
                 {
                   onClick: onUndock,
@@ -1370,7 +1482,7 @@ function DeviceControlPanelImpl({
                   children: undockIcon
                 }
               ),
-              /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+              /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
                 "button",
                 {
                   onClick: onClose,
@@ -1393,7 +1505,7 @@ function DeviceControlPanelImpl({
           ]
         }
       ),
-      binding.state.status && /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(
+      binding.state.status && /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(
         "div",
         {
           style: {
@@ -1407,7 +1519,7 @@ function DeviceControlPanelImpl({
             marginBottom: spacing.marginBottom
           },
           children: [
-            /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+            /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
               "div",
               {
                 style: {
@@ -1415,12 +1527,17 @@ function DeviceControlPanelImpl({
                   height: "10px",
                   borderRadius: "50%",
                   backgroundColor: statusColor,
-                  border: "1px solid #333"
-                }
+                  border: "1px solid #333",
+                  // The shared helper positions this dot only while it shows
+                  // the unknown marker. The glyph then fills the dot with an
+                  // absolute inset, the same pattern StatusIndicator uses.
+                  ...unknownGlyphHostStyle(isUnknownStatus)
+                },
+                children: isUnknownStatus && /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(UnknownStatusGlyph, { size: "small", style: UNKNOWN_GLYPH_FILL_STYLE })
               }
             ),
-            /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("div", { style: { flex: 1 }, children: [
-              /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+            /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("div", { style: { flex: 1 }, children: [
+              /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
                 "div",
                 {
                   style: {
@@ -1434,7 +1551,7 @@ function DeviceControlPanelImpl({
                   children: binding.state.status
                 }
               ),
-              binding.state.statusMessage && /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+              binding.state.statusMessage && /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
                 "div",
                 {
                   style: {
@@ -1447,28 +1564,36 @@ function DeviceControlPanelImpl({
                 }
               )
             ] }),
-            binding.state.isRunning !== void 0 && /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+            binding.state.isRunning !== void 0 && /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(
               "div",
               {
                 style: {
                   padding: "4px 10px",
-                  backgroundColor: binding.state.isRunning ? selectedColor : surfaceColor,
-                  border: `1px solid ${borderColor}`,
+                  // This badge shows the last published isRunning value. It
+                  // never re-derives that value here. When status is
+                  // unknown, the value may be stale. Muted colors carry that
+                  // warning alongside the word, so color is not the only
+                  // channel and the wording is not the only channel either.
+                  backgroundColor: isUnknownStatus ? statusEntry.bg : binding.state.isRunning ? selectedColor : surfaceColor,
+                  border: `1px solid ${isUnknownStatus ? statusEntry.border : borderColor}`,
                   borderRadius: "2px",
                   fontSize: "10px",
                   fontWeight: 600,
                   fontFamily: "Arial, sans-serif",
                   letterSpacing: "0.5px",
-                  color: textColor
+                  color: isUnknownStatus ? statusEntry.text : textColor
                 },
-                children: binding.state.isRunning ? "RUNNING" : "STOPPED"
+                children: [
+                  binding.state.isRunning ? "RUNNING" : "STOPPED",
+                  isUnknownStatus && " (unconfirmed)"
+                ]
               }
             )
           ]
         }
       ),
-      binding.display?.showModeSelector !== false && binding.modes.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("div", { style: { marginBottom: "16px" }, children: [
-        /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+      binding.display?.showModeSelector !== false && binding.modes.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("div", { style: { marginBottom: "16px" }, children: [
+        /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
           "label",
           {
             style: {
@@ -1484,7 +1609,7 @@ function DeviceControlPanelImpl({
             children: "Mode"
           }
         ),
-        modeSelectionStyle === "dropdown" ? /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+        modeSelectionStyle === "dropdown" ? /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
           "select",
           {
             value: currentMode,
@@ -1505,10 +1630,10 @@ function DeviceControlPanelImpl({
               paddingRight: "12px",
               cursor: "pointer"
             },
-            children: binding.modes.map((mode) => /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("option", { value: mode.value, disabled: mode.enabled === false, children: mode.label }, mode.value))
+            children: binding.modes.map((mode) => /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("option", { value: mode.value, disabled: mode.enabled === false, children: mode.label }, mode.value))
           }
-        ) : modeSelectionStyle === "modal" ? /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(import_jsx_runtime8.Fragment, { children: [
-          /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(
+        ) : modeSelectionStyle === "modal" ? /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(import_jsx_runtime9.Fragment, { children: [
+          /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(
             "div",
             {
               onClick: () => {
@@ -1531,12 +1656,12 @@ function DeviceControlPanelImpl({
                 alignItems: "center"
               },
               children: [
-                /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("span", { children: binding.modes.find((m) => m.value === currentMode)?.label || currentMode }),
-                /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("span", { style: { fontSize: "20px", marginLeft: "8px" }, children: "\u25BC" })
+                /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("span", { children: binding.modes.find((m) => m.value === currentMode)?.label || currentMode }),
+                /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("span", { style: { fontSize: "20px", marginLeft: "8px" }, children: "\u25BC" })
               ]
             }
           ),
-          showModeModal && /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+          showModeModal && /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
             "div",
             {
               style: {
@@ -1555,7 +1680,7 @@ function DeviceControlPanelImpl({
                 setShowModeModal(false);
                 setPendingMode(null);
               },
-              children: /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(
+              children: /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(
                 "div",
                 {
                   onClick: (e) => e.stopPropagation(),
@@ -1568,7 +1693,7 @@ function DeviceControlPanelImpl({
                     border: `2px solid ${borderColor}`
                   },
                   children: [
-                    /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+                    /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
                       "h3",
                       {
                         style: {
@@ -1581,7 +1706,7 @@ function DeviceControlPanelImpl({
                         children: "Select Mode"
                       }
                     ),
-                    /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+                    /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
                       "div",
                       {
                         style: {
@@ -1595,7 +1720,7 @@ function DeviceControlPanelImpl({
                         children: binding.display?.title || binding.deviceName || binding.tag || binding.nodeId
                       }
                     ),
-                    /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+                    /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
                       "select",
                       {
                         value: pendingMode || currentMode,
@@ -1617,7 +1742,7 @@ function DeviceControlPanelImpl({
                           paddingRight: "12px",
                           cursor: "pointer"
                         },
-                        children: binding.modes.map((mode) => /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+                        children: binding.modes.map((mode) => /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
                           "option",
                           {
                             value: mode.value,
@@ -1632,7 +1757,7 @@ function DeviceControlPanelImpl({
                       const selectedMode = binding.modes.find(
                         (m) => m.value === (pendingMode || currentMode)
                       );
-                      return selectedMode?.description ? /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+                      return selectedMode?.description ? /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
                         "div",
                         {
                           style: {
@@ -1650,8 +1775,8 @@ function DeviceControlPanelImpl({
                         }
                       ) : null;
                     })(),
-                    /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("div", { style: { display: "flex", gap: "12px" }, children: [
-                      /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+                    /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("div", { style: { display: "flex", gap: "12px" }, children: [
+                      /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
                         "button",
                         {
                           onClick: () => {
@@ -1679,7 +1804,7 @@ function DeviceControlPanelImpl({
                           children: "Confirm"
                         }
                       ),
-                      /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+                      /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
                         "button",
                         {
                           onClick: () => {
@@ -1709,7 +1834,7 @@ function DeviceControlPanelImpl({
               )
             }
           )
-        ] }) : /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+        ] }) : /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
           "div",
           {
             style: {
@@ -1725,7 +1850,7 @@ function DeviceControlPanelImpl({
             children: binding.modes.map((mode) => {
               const isSelected = mode.value === currentMode;
               const isEnabled = mode.enabled !== false;
-              return /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+              return /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
                 "button",
                 {
                   onClick: () => isEnabled && handleModeChange(mode.value),
@@ -1755,8 +1880,8 @@ function DeviceControlPanelImpl({
           }
         )
       ] }),
-      currentParams.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("div", { style: { marginBottom: spacing.marginBottom }, children: [
-        /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+      currentParams.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("div", { style: { marginBottom: spacing.marginBottom }, children: [
+        /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
           "label",
           {
             style: {
@@ -1772,7 +1897,7 @@ function DeviceControlPanelImpl({
             children: "Parameters"
           }
         ),
-        currentParams.map((param) => /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(
+        currentParams.map((param) => /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(
           "div",
           {
             style: {
@@ -1783,7 +1908,7 @@ function DeviceControlPanelImpl({
               borderRadius: "6px"
             },
             children: [
-              /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(
+              /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(
                 "div",
                 {
                   style: {
@@ -1792,7 +1917,7 @@ function DeviceControlPanelImpl({
                     marginBottom: spacing.gap
                   },
                   children: [
-                    /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(
+                    /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(
                       "span",
                       {
                         style: {
@@ -1808,7 +1933,7 @@ function DeviceControlPanelImpl({
                         },
                         children: [
                           param.label,
-                          param.forced?.active && /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+                          param.forced?.active && /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
                             "span",
                             {
                               "aria-label": "Forced",
@@ -1831,7 +1956,7 @@ function DeviceControlPanelImpl({
                         ]
                       }
                     ),
-                    /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(
+                    /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(
                       "span",
                       {
                         style: {
@@ -1843,14 +1968,14 @@ function DeviceControlPanelImpl({
                         children: [
                           localParameterValues[param.id] ?? param.value,
                           " ",
-                          param.unit && /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("span", { style: { color: mutedTextColor, fontSize: "10px", fontWeight: 600 }, children: param.unit })
+                          param.unit && /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("span", { style: { color: mutedTextColor, fontSize: "10px", fontWeight: 600 }, children: param.unit })
                         ]
                       }
                     )
                   ]
                 }
               ),
-              param.forced?.active && param.forced.realValue !== void 0 && /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(
+              param.forced?.active && param.forced.realValue !== void 0 && /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(
                 "div",
                 {
                   style: {
@@ -1871,7 +1996,7 @@ function DeviceControlPanelImpl({
                   ]
                 }
               ),
-              param.type === "boolean" ? /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+              param.type === "boolean" ? /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
                 "button",
                 {
                   onClick: () => {
@@ -1896,7 +2021,7 @@ function DeviceControlPanelImpl({
                   },
                   children: localParameterValues[param.id] ? "ON" : "OFF"
                 }
-              ) : param.type === "select" ? /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+              ) : param.type === "select" ? /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
                 "select",
                 {
                   value: localParameterValues[param.id] || param.value,
@@ -1917,12 +2042,12 @@ function DeviceControlPanelImpl({
                     fontFamily: "monospace",
                     cursor: "pointer"
                   },
-                  children: param.options?.map((opt) => /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("option", { value: opt.value, children: opt.label }, opt.value))
+                  children: param.options?.map((opt) => /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("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__ */ (0, import_jsx_runtime8.jsxs)(
+                /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(
                   "button",
                   {
                     type: "button",
@@ -1949,7 +2074,7 @@ function DeviceControlPanelImpl({
                     ]
                   }
                 )
-              ) : /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+              ) : /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
                 "input",
                 {
                   type: param.type === "number" ? "number" : "text",
@@ -1982,8 +2107,8 @@ function DeviceControlPanelImpl({
           param.id
         ))
       ] }),
-      binding.display?.showStartStop !== false && (activeCapabilities?.canStart || activeCapabilities?.canStop) && /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("div", { style: { display: "flex", gap: spacing.gap, marginBottom: spacing.marginBottom }, children: [
-        activeCapabilities?.canStart && /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+      binding.display?.showStartStop !== false && (activeCapabilities?.canStart || activeCapabilities?.canStop) && /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("div", { style: { display: "flex", gap: spacing.gap, marginBottom: spacing.marginBottom }, children: [
+        activeCapabilities?.canStart && /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
           "button",
           {
             onClick: onStart,
@@ -2004,7 +2129,7 @@ function DeviceControlPanelImpl({
             children: startPending ? "STARTING\u2026" : "START"
           }
         ),
-        activeCapabilities?.canStop && /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+        activeCapabilities?.canStop && /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
           "button",
           {
             onClick: onStop,
@@ -2026,9 +2151,9 @@ function DeviceControlPanelImpl({
           }
         )
       ] }),
-      activeCapabilities?.customActions && activeCapabilities.customActions.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("div", { style: { display: "flex", flexWrap: "wrap", gap: "8px" }, children: activeCapabilities.customActions.map((action) => {
+      activeCapabilities?.customActions && activeCapabilities.customActions.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("div", { style: { display: "flex", flexWrap: "wrap", gap: "8px" }, children: activeCapabilities.customActions.map((action) => {
         const actionDisabled = action.disabled === true;
-        return /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(
+        return /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(
           "button",
           {
             onClick: () => {
@@ -2054,7 +2179,7 @@ function DeviceControlPanelImpl({
               transition: "all 0.15s"
             },
             children: [
-              action.icon && /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("span", { style: { marginRight: "6px" }, children: action.icon }),
+              action.icon && /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("span", { style: { marginRight: "6px" }, children: action.icon }),
               action.label
             ]
           },
@@ -2062,7 +2187,7 @@ function DeviceControlPanelImpl({
         );
       }) })
     ] }),
-    binding.state.lastCommandResult && showToast && showBuiltInToast && /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+    binding.state.lastCommandResult && showToast && showBuiltInToast && /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
       "div",
       {
         style: {
@@ -2086,7 +2211,7 @@ function DeviceControlPanelImpl({
         children: binding.state.lastCommandResult.message
       }
     ),
-    /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("style", { children: `
+    /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("style", { children: `
         @keyframes slideInToast {
           from { 
             opacity: 0;
@@ -2118,11 +2243,11 @@ function DeviceControlPanelImpl({
       ` })
   ] });
 }
-var DeviceControlPanel = import_react5.default.memo(DeviceControlPanelImpl);
+var DeviceControlPanel = import_react6.default.memo(DeviceControlPanelImpl);
 
 // src/components/NumpadDialog/NumpadDialog.tsx
-var import_react6 = require("react");
-var import_jsx_runtime9 = require("react/jsx-runtime");
+var import_react7 = require("react");
+var import_jsx_runtime10 = require("react/jsx-runtime");
 var NumpadDialog = ({
   isOpen,
   onClose,
@@ -2136,24 +2261,24 @@ var NumpadDialog = ({
   currentValue = 0,
   touchOptimized = true
 }) => {
-  const [inputValue, setInputValue] = (0, import_react6.useState)("");
-  const [pristine, setPristine] = (0, import_react6.useState)(true);
-  const dialogRef = (0, import_react6.useRef)(null);
-  const titleId = (0, import_react6.useId)();
+  const [inputValue, setInputValue] = (0, import_react7.useState)("");
+  const [pristine, setPristine] = (0, import_react7.useState)(true);
+  const dialogRef = (0, import_react7.useRef)(null);
+  const titleId = (0, import_react7.useId)();
   const decimals = precision ?? 1;
-  (0, import_react6.useEffect)(() => {
+  (0, import_react7.useEffect)(() => {
     if (isOpen) {
       setInputValue(Number(currentValue).toFixed(decimals));
       setPristine(true);
     }
   }, [isOpen, currentValue, decimals]);
-  (0, import_react6.useEffect)(() => {
+  (0, import_react7.useEffect)(() => {
     if (!isOpen) return;
     const previouslyFocused = document.activeElement;
     dialogRef.current?.focus();
     return () => previouslyFocused?.focus?.();
   }, [isOpen]);
-  (0, import_react6.useEffect)(() => {
+  (0, import_react7.useEffect)(() => {
     if (!isOpen) return;
     const prevOverflow = document.body.style.overflow;
     document.body.style.overflow = "hidden";
@@ -2161,13 +2286,13 @@ var NumpadDialog = ({
       document.body.style.overflow = prevOverflow;
     };
   }, [isOpen]);
-  const handleApply = (0, import_react6.useCallback)(() => {
+  const handleApply = (0, import_react7.useCallback)(() => {
     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 = (0, import_react6.useCallback)(
+  const appendDigit = (0, import_react7.useCallback)(
     (digit) => {
       setInputValue((prev) => {
         const base = pristine ? "" : prev;
@@ -2187,15 +2312,15 @@ var NumpadDialog = ({
     },
     [pristine, decimals]
   );
-  const handleBackspace = (0, import_react6.useCallback)(() => {
+  const handleBackspace = (0, import_react7.useCallback)(() => {
     setPristine(false);
     setInputValue((prev) => prev.slice(0, -1));
   }, []);
-  const handleClear = (0, import_react6.useCallback)(() => {
+  const handleClear = (0, import_react7.useCallback)(() => {
     setPristine(false);
     setInputValue("");
   }, []);
-  const handleToggleSign = (0, import_react6.useCallback)(() => {
+  const handleToggleSign = (0, import_react7.useCallback)(() => {
     if (min >= 0) return;
     setPristine(false);
     setInputValue((prev) => {
@@ -2204,8 +2329,8 @@ var NumpadDialog = ({
       return "-" + prev;
     });
   }, [min]);
-  const bsTimer = (0, import_react6.useRef)(null);
-  const bsLongFired = (0, import_react6.useRef)(false);
+  const bsTimer = (0, import_react7.useRef)(null);
+  const bsLongFired = (0, import_react7.useRef)(false);
   const clearBsTimer = () => {
     if (bsTimer.current !== null) {
       clearTimeout(bsTimer.current);
@@ -2227,8 +2352,8 @@ var NumpadDialog = ({
     }
     handleBackspace();
   };
-  (0, import_react6.useEffect)(() => () => clearBsTimer(), []);
-  (0, import_react6.useEffect)(() => {
+  (0, import_react7.useEffect)(() => () => clearBsTimer(), []);
+  (0, import_react7.useEffect)(() => {
     if (!isOpen) return;
     const handler = (e) => {
       if (e.key === "Tab") {
@@ -2326,7 +2451,7 @@ var NumpadDialog = ({
   };
   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__ */ (0, import_jsx_runtime9.jsx)(
+  const BackspaceButton = ({ style, label }) => /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
     "button",
     {
       type: "button",
@@ -2343,7 +2468,7 @@ var NumpadDialog = ({
   );
   return (
     // Backdrop
-    /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(
+    /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(
       "div",
       {
         style: {
@@ -2360,14 +2485,14 @@ var NumpadDialog = ({
         },
         onClick: onClose,
         children: [
-          /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("style", { children: `
+          /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("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__ */ (0, import_jsx_runtime9.jsxs)(
+          /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(
             "div",
             {
               ref: dialogRef,
@@ -2388,9 +2513,9 @@ var NumpadDialog = ({
               },
               onClick: (e) => e.stopPropagation(),
               children: [
-                /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("div", { style: { padding: "14px 16px 0 16px" }, children: /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("h3", { id: titleId, style: { margin: 0, fontSize: 15, fontWeight: 700, color: "#0f172a" }, children: deviceName ? `${deviceName} - ${parameterLabel}` : parameterLabel }) }),
-                /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("div", { style: { padding: 16, display: "flex", flexDirection: "column", gap: 10 }, children: [
-                  /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(
+                /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("div", { style: { padding: "14px 16px 0 16px" }, children: /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("h3", { id: titleId, style: { margin: 0, fontSize: 15, fontWeight: 700, color: "#0f172a" }, children: deviceName ? `${deviceName} - ${parameterLabel}` : parameterLabel }) }),
+                /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("div", { style: { padding: 16, display: "flex", flexDirection: "column", gap: 10 }, children: [
+                  /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(
                     "div",
                     {
                       style: {
@@ -2400,24 +2525,24 @@ var NumpadDialog = ({
                         color: "#64748b"
                       },
                       children: [
-                        /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("span", { children: [
+                        /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("span", { children: [
                           "Current: ",
                           currentValue,
                           " ",
                           unit
                         ] }),
-                        /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("span", { children: [
+                        /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("span", { children: [
                           "Range: ",
-                          /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("span", { style: limitStyle(belowMin), children: min }),
+                          /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("span", { style: limitStyle(belowMin), children: min }),
                           "-",
-                          /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("span", { style: limitStyle(aboveMax), children: max }),
+                          /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("span", { style: limitStyle(aboveMax), children: max }),
                           " ",
                           unit
                         ] })
                       ]
                     }
                   ),
-                  /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(
+                  /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(
                     "div",
                     {
                       "aria-live": "polite",
@@ -2439,13 +2564,13 @@ var NumpadDialog = ({
                         border: outOfRange ? "1.5px solid #fca5a5" : "1.5px solid #e2e8f0"
                       },
                       children: [
-                        /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("span", { children: inputValue || "0" }),
-                        /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("span", { className: "np-caret", "aria-hidden": "true" }),
-                        /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("span", { style: { fontSize: 14, color: "#94a3b8", fontWeight: 500 }, children: unit })
+                        /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("span", { children: inputValue || "0" }),
+                        /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("span", { className: "np-caret", "aria-hidden": "true" }),
+                        /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("span", { style: { fontSize: 14, color: "#94a3b8", fontWeight: 500 }, children: unit })
                       ]
                     }
                   ),
-                  /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
+                  /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
                     "div",
                     {
                       role: "status",
@@ -2460,8 +2585,8 @@ var NumpadDialog = ({
                       children: reason
                     }
                   ),
-                  /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("div", { style: { display: "grid", gridTemplateColumns: "repeat(3, 1fr)", gap: 5 }, children: [
-                    ["7", "8", "9", "4", "5", "6", "1", "2", "3"].map((digit) => /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
+                  /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("div", { style: { display: "grid", gridTemplateColumns: "repeat(3, 1fr)", gap: 5 }, children: [
+                    ["7", "8", "9", "4", "5", "6", "1", "2", "3"].map((digit) => /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
                       "button",
                       {
                         type: "button",
@@ -2473,7 +2598,7 @@ var NumpadDialog = ({
                       },
                       digit
                     )),
-                    min < 0 ? /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
+                    min < 0 ? /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
                       "button",
                       {
                         type: "button",
@@ -2484,9 +2609,9 @@ var NumpadDialog = ({
                         onClick: handleToggleSign,
                         children: "+/\u2212"
                       }
-                    ) : /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(BackspaceButton, { style: { ...keyStyle, fontSize: 20, background: "#f8fafc", color: "#64748b" }, label: "\u232B" }),
-                    /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("button", { type: "button", className: "np-key", tabIndex: -1, style: keyStyle, onClick: () => appendDigit("0"), children: "0" }),
-                    /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
+                    ) : /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(BackspaceButton, { style: { ...keyStyle, fontSize: 20, background: "#f8fafc", color: "#64748b" }, label: "\u232B" }),
+                    /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("button", { type: "button", className: "np-key", tabIndex: -1, style: keyStyle, onClick: () => appendDigit("0"), children: "0" }),
+                    /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
                       "button",
                       {
                         type: "button",
@@ -2504,12 +2629,12 @@ var NumpadDialog = ({
                       }
                     )
                   ] }),
-                  /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("div", { style: { display: "flex", gap: 5 }, children: [
-                    /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("button", { type: "button", className: "np-key", tabIndex: -1, style: utilKeyStyle, onClick: handleClear, children: "Clear" }),
-                    !backspaceInGrid && /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(BackspaceButton, { style: utilKeyStyle, label: "Backspace" })
+                  /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("div", { style: { display: "flex", gap: 5 }, children: [
+                    /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("button", { type: "button", className: "np-key", tabIndex: -1, style: utilKeyStyle, onClick: handleClear, children: "Clear" }),
+                    !backspaceInGrid && /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(BackspaceButton, { style: utilKeyStyle, label: "Backspace" })
                   ] }),
-                  /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("div", { style: { display: "flex", gap: 8, marginTop: 2 }, children: [
-                    /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
+                  /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("div", { style: { display: "flex", gap: 8, marginTop: 2 }, children: [
+                    /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
                       "button",
                       {
                         type: "button",
@@ -2529,7 +2654,7 @@ var NumpadDialog = ({
                         children: "Cancel"
                       }
                     ),
-                    /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
+                    /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
                       "button",
                       {
                         type: "button",
@@ -2564,13 +2689,13 @@ var NumpadDialog = ({
 };
 
 // src/components/layout/FullscreenWorkspace/FullscreenWorkspace.tsx
-var import_react8 = __toESM(require("react"), 1);
+var import_react9 = __toESM(require("react"), 1);
 var import_material3 = require("@mui/material");
 
 // src/components/layout/FullscreenWorkspace/FullscreenWorkspace.styles.tsx
 var import_material = require("@mui/material");
 var import_styled = __toESM(require("@emotion/styled"), 1);
-var import_jsx_runtime10 = require("react/jsx-runtime");
+var import_jsx_runtime11 = require("react/jsx-runtime");
 var FullscreenContainer = (0, import_styled.default)(import_material.Box)(
   ({ leftCollapsed, rightCollapsed }) => {
     const getGridTemplateAreas = () => {
@@ -2695,7 +2820,7 @@ var DisplayModeToggle = (0, import_styled.default)(import_material.IconButton)((
     transform: "translateX(-50%) scale(1.05)"
   }
 }));
-var ChevronLeft = () => /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
+var ChevronLeft = () => /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
   "div",
   {
     style: {
@@ -2707,7 +2832,7 @@ var ChevronLeft = () => /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
     }
   }
 );
-var ChevronRight = () => /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
+var ChevronRight = () => /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
   "div",
   {
     style: {
@@ -2818,10 +2943,10 @@ var ScrollableSVGWrapper = (0, import_styled.default)("div")({
 });
 
 // src/components/layout/FullscreenWorkspace/FullscreenWorkspace.overlays.tsx
-var import_react7 = require("react");
+var import_react8 = require("react");
 var import_material2 = require("@mui/material");
 var import_styled2 = __toESM(require("@emotion/styled"), 1);
-var import_jsx_runtime11 = require("react/jsx-runtime");
+var import_jsx_runtime12 = require("react/jsx-runtime");
 var baseOverlayStyles = {
   tank: {
     background: "linear-gradient(135deg, rgba(69, 90, 120, 0.95) 0%, rgba(52, 73, 94, 0.95) 100%)",
@@ -2883,8 +3008,8 @@ var SVGLockedOverlay = ({
   onClick,
   containerSelector = ".tff-svg-container"
 }) => {
-  const [svgOffset, setSvgOffset] = (0, import_react7.useState)({ x: 0, y: 0 });
-  (0, import_react7.useEffect)(() => {
+  const [svgOffset, setSvgOffset] = (0, import_react8.useState)({ x: 0, y: 0 });
+  (0, import_react8.useEffect)(() => {
     const updateSvgOffset = () => {
       const containerElement = document.querySelector(containerSelector);
       const svgElement = containerElement?.querySelector("svg");
@@ -2904,7 +3029,7 @@ var SVGLockedOverlay = ({
   const pixelX = svgX + svgOffset.x;
   const pixelY = svgY + svgOffset.y;
   const appliedStyle = theme ? { ...overlayStyles[theme], ...style } : style;
-  return /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
     import_material2.Box,
     {
       className: `svg-locked-overlay ${className}`.trim(),
@@ -2968,7 +3093,7 @@ var CardUnit = (0, import_styled2.default)("div")({
 });
 
 // src/components/layout/FullscreenWorkspace/FullscreenWorkspace.visuals.tsx
-var import_jsx_runtime12 = require("react/jsx-runtime");
+var import_jsx_runtime13 = require("react/jsx-runtime");
 var forcedTagStyle = {
   position: "absolute",
   top: "-6px",
@@ -2996,7 +3121,7 @@ var TrendLine = ({
   forced = false
 }) => {
   if (!values || values.length < 2) {
-    return /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)(
+    return /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)(
       "div",
       {
         style: {
@@ -3010,8 +3135,8 @@ var TrendLine = ({
           justifyContent: "center"
         },
         children: [
-          /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("span", { style: { fontSize: "8px", color: "#ccc" }, children: "No data" }),
-          forced && /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("span", { style: forcedTagStyle, "aria-label": "Forced", children: "F" })
+          /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("span", { style: { fontSize: "8px", color: "#ccc" }, children: "No data" }),
+          forced && /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("span", { style: forcedTagStyle, "aria-label": "Forced", children: "F" })
         ]
       }
     );
@@ -3024,7 +3149,7 @@ var TrendLine = ({
     const x = 4 + i / (values.length - 1) * (width - 8);
     return i === 0 ? `M ${x} ${y}` : `L ${x} ${y}`;
   }).join(" ");
-  return /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)(
     "div",
     {
       style: {
@@ -3036,14 +3161,14 @@ var TrendLine = ({
         overflow: "visible"
       },
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)(
+        /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)(
           "svg",
           {
             width,
             height,
             style: { position: "absolute", top: 0, left: 0, overflow: "hidden", borderRadius: "2px" },
             children: [
-              /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
+              /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
                 "path",
                 {
                   d: pathData,
@@ -3054,7 +3179,7 @@ var TrendLine = ({
                   strokeLinejoin: "round"
                 }
               ),
-              /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
+              /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
                 "circle",
                 {
                   cx: 4 + (width - 8),
@@ -3066,7 +3191,7 @@ var TrendLine = ({
             ]
           }
         ),
-        forced && /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("span", { style: forcedTagStyle, "aria-label": "Forced", children: "F" })
+        forced && /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("span", { style: forcedTagStyle, "aria-label": "Forced", children: "F" })
       ]
     }
   );
@@ -3098,7 +3223,7 @@ var CircularGauge = ({
   const borderColor = isHex ? hexToRgba(color, 0.9) : color;
   const backgroundColor = isHex ? hexToRgba(color, 0.15) : color;
   const borderStrokeColor = isHex ? hexToRgba(color, 0.4) : color;
-  return /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)(
     "div",
     {
       style: {
@@ -3107,7 +3232,7 @@ var CircularGauge = ({
         alignItems: "center"
       },
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)(
+        /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)(
           "div",
           {
             style: {
@@ -3119,8 +3244,8 @@ var CircularGauge = ({
               border: forced ? `2px solid ${FORCED_MARK_COLOR.border}` : `1px solid ${borderStrokeColor}`
             },
             children: [
-              /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)("svg", { width: size, height: size, style: { transform: "rotate(-90deg)" }, children: [
-                /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
+              /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)("svg", { width: size, height: size, style: { transform: "rotate(-90deg)" }, children: [
+                /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
                   "circle",
                   {
                     cx: size / 2,
@@ -3131,7 +3256,7 @@ var CircularGauge = ({
                     strokeWidth: 1
                   }
                 ),
-                /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
+                /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
                   "circle",
                   {
                     cx: size / 2,
@@ -3142,7 +3267,7 @@ var CircularGauge = ({
                     fill: "transparent"
                   }
                 ),
-                /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
+                /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
                   "circle",
                   {
                     cx: size / 2,
@@ -3158,7 +3283,7 @@ var CircularGauge = ({
                   }
                 )
               ] }),
-              /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)(
+              /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)(
                 "div",
                 {
                   style: {
@@ -3174,14 +3299,14 @@ var CircularGauge = ({
                   },
                   children: [
                     value.toFixed(1),
-                    /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("div", { style: { fontSize: "8px", opacity: 0.9, color: "white" }, children: unit })
+                    /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("div", { style: { fontSize: "8px", opacity: 0.9, color: "white" }, children: unit })
                   ]
                 }
               )
             ]
           }
         ),
-        /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
           "div",
           {
             style: {
@@ -3193,7 +3318,7 @@ var CircularGauge = ({
             children: label
           }
         ),
-        forced && /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
+        forced && /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
           "span",
           {
             "aria-label": "Forced",
@@ -3214,7 +3339,7 @@ var CircularGauge = ({
             children: "F"
           }
         ),
-        forced && realValue !== void 0 && /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)("div", { style: { fontSize: "8px", opacity: 0.8, color: "white", marginTop: "1px" }, children: [
+        forced && realValue !== void 0 && /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)("div", { style: { fontSize: "8px", opacity: 0.8, color: "white", marginTop: "1px" }, children: [
           "REAL ",
           realValue.toFixed(1),
           " ",
@@ -3239,7 +3364,7 @@ var Sparkline = ({ data, width, height, color, forced = false }) => {
     const y = height - 8 - (value - min) / range * (height - 8);
     return `${x + 4},${y + 4}`;
   }).join(" ");
-  return /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)(
     "div",
     {
       style: {
@@ -3255,13 +3380,13 @@ var Sparkline = ({ data, width, height, color, forced = false }) => {
         boxShadow: "0 1px 3px rgba(0, 0, 0, 0.2)"
       },
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("svg", { width, height, children: /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("polyline", { points, fill: "none", stroke: color, strokeWidth: "1.5", opacity: "0.9" }) }),
-        forced && /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("span", { style: forcedTagStyle, "aria-label": "Forced", children: "F" })
+        /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("svg", { width, height, children: /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("polyline", { points, fill: "none", stroke: color, strokeWidth: "1.5", opacity: "0.9" }) }),
+        forced && /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("span", { style: forcedTagStyle, "aria-label": "Forced", children: "F" })
       ]
     }
   );
 };
-var EquipmentForcedBadge = () => /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
+var EquipmentForcedBadge = () => /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
   "span",
   {
     "aria-label": "Forced",
@@ -3296,9 +3421,9 @@ var EquipmentIndicatorWithSparkline = ({
   forced = false
 }) => {
   const hasSparkline = sparklineData && sparklineData.length > 1 && Math.max(...sparklineData) !== Math.min(...sparklineData);
-  return /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)(import_jsx_runtime12.Fragment, { children: [
-    /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(SVGLockedOverlay, { svgX, svgY, style: { transform: "translate(-50%, -50%)" }, children: /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)("div", { style: { position: "relative", width: size, height: size }, children: [
-      /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)(import_jsx_runtime13.Fragment, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(SVGLockedOverlay, { svgX, svgY, style: { transform: "translate(-50%, -50%)" }, children: /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)("div", { style: { position: "relative", width: size, height: size }, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
         "div",
         {
           style: {
@@ -3319,9 +3444,9 @@ var EquipmentIndicatorWithSparkline = ({
           children: label
         }
       ),
-      forced && /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(EquipmentForcedBadge, {})
+      forced && /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(EquipmentForcedBadge, {})
     ] }) }),
-    hasSparkline && /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(SVGLockedOverlay, { svgX: svgX + sparklineOffset.x, svgY: svgY + sparklineOffset.y, children: /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(Sparkline, { data: sparklineData, width: 60, height: 20, color, forced }) })
+    hasSparkline && /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(SVGLockedOverlay, { svgX: svgX + sparklineOffset.x, svgY: svgY + sparklineOffset.y, children: /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(Sparkline, { data: sparklineData, width: 60, height: 20, color, forced }) })
   ] });
 };
 var EquipmentIndicator = ({
@@ -3335,8 +3460,8 @@ var EquipmentIndicator = ({
   forced = false
 }) => {
   const overlayStyle = style !== void 0 ? { transform: "translate(-50%, -50%)", ...style } : { transform: "translate(-50%, -50%)" };
-  return /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(SVGLockedOverlay, { svgX, svgY, style: overlayStyle, className, children: /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)("div", { style: { position: "relative", width: size, height: size }, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(SVGLockedOverlay, { svgX, svgY, style: overlayStyle, className, children: /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)("div", { style: { position: "relative", width: size, height: size }, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
       "div",
       {
         style: {
@@ -3357,12 +3482,12 @@ var EquipmentIndicator = ({
         children: label
       }
     ),
-    forced && /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(EquipmentForcedBadge, {})
+    forced && /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(EquipmentForcedBadge, {})
   ] }) });
 };
 
 // src/components/layout/FullscreenWorkspace/FullscreenWorkspace.tsx
-var import_jsx_runtime13 = require("react/jsx-runtime");
+var import_jsx_runtime14 = require("react/jsx-runtime");
 function FullscreenWorkspace({
   svgContent,
   overlays,
@@ -3390,10 +3515,10 @@ function FullscreenWorkspace({
   className = "",
   ...rest
 }) {
-  const [leftCollapsedState, setLeftCollapsedState] = import_react8.default.useState(defaultLeftCollapsed);
-  const [rightCollapsedState, setRightCollapsedState] = import_react8.default.useState(defaultRightCollapsed);
-  const [internalDisplayMode, setInternalDisplayMode] = import_react8.default.useState(displayMode ?? defaultDisplayMode);
-  const [internalTab, setInternalTab] = import_react8.default.useState(
+  const [leftCollapsedState, setLeftCollapsedState] = import_react9.default.useState(defaultLeftCollapsed);
+  const [rightCollapsedState, setRightCollapsedState] = import_react9.default.useState(defaultRightCollapsed);
+  const [internalDisplayMode, setInternalDisplayMode] = import_react9.default.useState(displayMode ?? defaultDisplayMode);
+  const [internalTab, setInternalTab] = import_react9.default.useState(
     tabs && tabs.length > 0 ? tabs[0].value : ""
   );
   const leftCollapsed = leftCollapsedProp ?? leftCollapsedState;
@@ -3401,10 +3526,10 @@ function FullscreenWorkspace({
   const isDisplayModeControlled = displayMode !== void 0;
   const currentDisplayMode = isDisplayModeControlled ? displayMode : internalDisplayMode;
   const isTabControlled = activeTab !== void 0 && activeTab !== null;
-  const resolvedTabs = import_react8.default.useMemo(() => tabs ?? [], [tabs]);
+  const resolvedTabs = import_react9.default.useMemo(() => tabs ?? [], [tabs]);
   const defaultTabValue = resolvedTabs.length > 0 ? resolvedTabs[0].value : "";
   const currentTab = isTabControlled ? activeTab : internalTab || defaultTabValue;
-  import_react8.default.useEffect(() => {
+  import_react9.default.useEffect(() => {
     if (resolvedTabs.length > 0) {
       const values = resolvedTabs.map((tab) => tab.value);
       if (!values.includes(currentTab)) {
@@ -3413,7 +3538,7 @@ function FullscreenWorkspace({
       }
     }
   }, [resolvedTabs, activeTab, currentTab, defaultTabValue]);
-  import_react8.default.useEffect(() => {
+  import_react9.default.useEffect(() => {
     if (displayMode !== void 0) {
       setInternalDisplayMode(displayMode);
     }
@@ -3448,7 +3573,7 @@ function FullscreenWorkspace({
   const currentTabContent = resolvedTabs.find((tab) => tab.value === currentTab)?.content ?? null;
   const showLeftToggle = Boolean(leftPanel);
   const showRightToggle = Boolean(rightPanel);
-  return /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)(
     FullscreenContainer,
     {
       leftCollapsed,
@@ -3456,25 +3581,25 @@ function FullscreenWorkspace({
       className: `tff-svg-container ${className}`.trim(),
       ...rest,
       children: [
-        showLeftToggle && /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
+        showLeftToggle && /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
           LeftToggleButton,
           {
             collapsed: leftCollapsed,
             onClick: handleLeftToggle,
             "aria-label": leftCollapsed ? "Expand left panel" : "Collapse left panel",
-            children: leftCollapsed ? /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(ChevronRight, {}) : /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(ChevronLeft, {})
+            children: leftCollapsed ? /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(ChevronRight, {}) : /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(ChevronLeft, {})
           }
         ),
-        showRightToggle && /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
+        showRightToggle && /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
           RightToggleButton,
           {
             collapsed: rightCollapsed,
             onClick: handleRightToggle,
             "aria-label": rightCollapsed ? "Expand right panel" : "Collapse right panel",
-            children: rightCollapsed ? /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(ChevronLeft, {}) : /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(ChevronRight, {})
+            children: rightCollapsed ? /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(ChevronLeft, {}) : /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(ChevronRight, {})
           }
         ),
-        showDisplayModeToggle && /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
+        showDisplayModeToggle && /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
           DisplayModeToggle,
           {
             mode: currentDisplayMode,
@@ -3483,9 +3608,9 @@ function FullscreenWorkspace({
             children: currentDisplayMode === "dashboard" ? "Dashboard Mode" : "Standard Mode"
           }
         ),
-        /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)(SVGArea, { children: [
-          showZoomControls && /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)(ZoomControls, { children: [
-            /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)(SVGArea, { children: [
+          showZoomControls && /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)(ZoomControls, { children: [
+            /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
               ZoomButton,
               {
                 onClick: onZoomIn,
@@ -3495,7 +3620,7 @@ function FullscreenWorkspace({
                 children: "+"
               }
             ),
-            /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
+            /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
               ZoomButton,
               {
                 onClick: onZoomOut,
@@ -3505,7 +3630,7 @@ function FullscreenWorkspace({
                 children: "-"
               }
             ),
-            onResetZoom && /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
+            onResetZoom && /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
               ZoomButton,
               {
                 onClick: onResetZoom,
@@ -3516,44 +3641,44 @@ function FullscreenWorkspace({
               }
             )
           ] }),
-          /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(ScrollableSVGWrapper, { className: "svg-scroll-wrapper", children: /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)(FixedSVGContainer, { className: "svg-container", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(ScrollableSVGWrapper, { className: "svg-scroll-wrapper", children: /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)(FixedSVGContainer, { className: "svg-container", children: [
             svgContent,
             overlays
           ] }) })
         ] }),
-        /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(LeftPanel, { collapsed: leftCollapsed, children: resolvedTabs.length > 0 ? /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)(import_jsx_runtime13.Fragment, { children: [
-          /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(LeftPanel, { collapsed: leftCollapsed, children: resolvedTabs.length > 0 ? /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)(import_jsx_runtime14.Fragment, { children: [
+          /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
             PanelTabs,
             {
               value: currentTab,
               onChange: handleTabChangeInternal,
               "aria-label": "Left panel tabs",
-              children: resolvedTabs.map((tab) => /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(import_material3.Tab, { label: tab.label, value: tab.value }, tab.value))
+              children: resolvedTabs.map((tab) => /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(import_material3.Tab, { label: tab.label, value: tab.value }, tab.value))
             }
           ),
-          /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(PanelContent, { children: currentTabContent })
+          /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(PanelContent, { children: currentTabContent })
         ] }) : leftPanel }),
-        /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(RightPanel, { collapsed: rightCollapsed, children: rightPanel }),
-        /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(FooterPanel, { children: footer })
+        /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(RightPanel, { collapsed: rightCollapsed, children: rightPanel }),
+        /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(FooterPanel, { children: footer })
       ]
     }
   );
 }
 
 // src/theme/ThemeContext.tsx
-var import_react9 = require("react");
-var import_jsx_runtime14 = require("react/jsx-runtime");
-var ThemeContext = (0, import_react9.createContext)(void 0);
+var import_react10 = require("react");
+var import_jsx_runtime15 = require("react/jsx-runtime");
+var ThemeContext = (0, import_react10.createContext)(void 0);
 var useTheme = () => {
-  const context = (0, import_react9.useContext)(ThemeContext);
+  const context = (0, import_react10.useContext)(ThemeContext);
   if (!context) {
     throw new Error("useTheme must be used within a ThemeProvider");
   }
   return context;
 };
 var ThemeProvider = ({ children }) => {
-  const [theme, setThemeState] = (0, import_react9.useState)("modern");
-  (0, import_react9.useEffect)(() => {
+  const [theme, setThemeState] = (0, import_react10.useState)("modern");
+  (0, import_react10.useEffect)(() => {
     document.body.className = "";
     document.body.classList.add(`theme-${theme}`);
     document.documentElement.className = "";
@@ -3565,11 +3690,11 @@ var ThemeProvider = ({ children }) => {
   const setTheme = (newTheme) => {
     setThemeState(newTheme);
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(ThemeContext.Provider, { value: { theme, toggleTheme, setTheme }, children });
+  return /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(ThemeContext.Provider, { value: { theme, toggleTheme, setTheme }, children });
 };
 
 // src/theme/ThemeToggle.tsx
-var import_jsx_runtime15 = require("react/jsx-runtime");
+var import_jsx_runtime16 = require("react/jsx-runtime");
 var ThemeToggle = ({
   size = "medium",
   position = "top-right",
@@ -3640,18 +3765,18 @@ var ThemeToggle = ({
     transition: "all 0.2s ease",
     boxShadow: "0 2px 4px rgba(0, 0, 0, 0.2)"
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)("div", { style: currentStyle, onClick: toggleTheme, className, ...props, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("span", { children: theme === "modern" ? "\u{1F3A8} Modern" : "\u{1F3ED} HMI" }),
-    /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("div", { style: toggleStyle, children: /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("div", { style: thumbStyle }) }),
-    /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("span", { style: { fontSize: "0.75rem", opacity: 0.8 }, children: theme === "modern" ? "Industrial Design" : "High Performance" })
+  return /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)("div", { style: currentStyle, onClick: toggleTheme, className, ...props, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("span", { children: theme === "modern" ? "\u{1F3A8} Modern" : "\u{1F3ED} HMI" }),
+    /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("div", { style: toggleStyle, children: /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("div", { style: thumbStyle }) }),
+    /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("span", { style: { fontSize: "0.75rem", opacity: 0.8 }, children: theme === "modern" ? "Industrial Design" : "High Performance" })
   ] });
 };
 
 // src/components/PIDCanvas/PIDCanvas.tsx
-var import_react21 = __toESM(require("react"), 1);
+var import_react22 = __toESM(require("react"), 1);
 
 // src/components/PIDCanvas/NodeRenderer.tsx
-var import_react10 = __toESM(require("react"), 1);
+var import_react11 = __toESM(require("react"), 1);
 
 // src/diagram/symbols/mockSymbolLibrary.ts
 var mockSymbolLibrary = {
@@ -5026,8 +5151,14 @@ function writeAppearanceValue(node, field, value) {
 }
 
 // src/components/PIDCanvas/NodeRenderer.tsx
-var import_jsx_runtime16 = require("react/jsx-runtime");
-var HATCH_SIZE = 6;
+var import_jsx_runtime17 = require("react/jsx-runtime");
+var HATCH_TILE_SIZE = 7;
+var HATCH_STRIPE_WIDTH = 2;
+var HATCH_STRIPE_ANGLE = 135;
+var HATCH_STRIPE_OPACITY = 85 / 255;
+function isUnknownNode(node) {
+  return node.positionUnknown === true || normalizeDeviceStatus(node.status) === "unknown";
+}
 function NodeRendererImpl({
   nodes: nodes2,
   selectedNodeIds,
@@ -5039,41 +5170,42 @@ function NodeRendererImpl({
   enableDrag = false,
   statusColorMap
 }) {
-  const hatchId = `pid-unknown-hatch-${import_react10.default.useId().replace(/[^A-Za-z0-9_-]/g, "")}`;
-  const hasUnknown = nodes2.some((n) => n.positionUnknown === true && n.visible !== false);
-  return /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)("g", { id: "layer-nodes", children: [
-    hasUnknown && /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("defs", { children: /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)(
+  const hatchPatternId = `node-unknown-hatch-${import_react11.default.useId().replace(/[^a-zA-Z0-9_-]/g, "")}`;
+  const visibleNodes = nodes2.filter((node) => node.visible !== false);
+  const hasUnknownNode = visibleNodes.some(isUnknownNode);
+  const unknownEntry = resolveStatusColor("unknown", statusColorMap);
+  return /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)("g", { id: "layer-nodes", children: [
+    hasUnknownNode && /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("defs", { children: /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)(
       "pattern",
       {
-        id: hatchId,
-        "data-testid": "position-unknown-pattern",
+        id: hatchPatternId,
+        "data-testid": "unknown-hatch-pattern",
         patternUnits: "userSpaceOnUse",
-        width: HATCH_SIZE,
-        height: HATCH_SIZE,
-        patternTransform: "rotate(45)",
+        width: HATCH_TILE_SIZE,
+        height: HATCH_TILE_SIZE,
+        patternTransform: `rotate(${HATCH_STRIPE_ANGLE})`,
         children: [
-          /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("rect", { width: HATCH_SIZE, height: HATCH_SIZE, fill: UNKNOWN_MARK_COLOR.fill }),
-          /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
-            "line",
+          /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("rect", { width: HATCH_TILE_SIZE, height: HATCH_TILE_SIZE, fill: unknownEntry.fill }),
+          /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
+            "rect",
             {
-              x1: "0",
-              y1: "0",
-              x2: "0",
-              y2: HATCH_SIZE,
-              stroke: UNKNOWN_MARK_COLOR.text,
-              strokeWidth: "2"
+              x: HATCH_TILE_SIZE - HATCH_STRIPE_WIDTH,
+              width: HATCH_STRIPE_WIDTH,
+              height: HATCH_TILE_SIZE,
+              fill: unknownEntry.stroke,
+              fillOpacity: HATCH_STRIPE_OPACITY
             }
           )
         ]
       }
     ) }),
-    nodes2.filter((node) => node.visible !== false).map((node) => {
+    visibleNodes.map((node) => {
       const symbol = getSymbolDefinition(node.symbolId);
       const isSelected = selectedNodeIds?.has(node.id) ?? false;
       const isDragging = draggingNodeId === node.id;
       if (!symbol) {
-        return /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)("g", { children: [
-          /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
+        return /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)("g", { children: [
+          /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
             "circle",
             {
               cx: node.transform.x,
@@ -5085,7 +5217,7 @@ function NodeRendererImpl({
               strokeWidth: "2"
             }
           ),
-          /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
+          /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
             "text",
             {
               x: node.transform.x,
@@ -5125,9 +5257,9 @@ function NodeRendererImpl({
         );
       }
       const statusEntry = resolveStatusColor(node.status, statusColorMap);
-      const isUnknown = node.positionUnknown === true;
-      const fillColor = isUnknown ? `url(#${hatchId})` : node.customColors?.fill ?? statusEntry.fill;
-      const strokeColor = isUnknown ? UNKNOWN_MARK_COLOR.stroke : node.customColors?.stroke ?? statusEntry.stroke;
+      const isUnknown = isUnknownNode(node);
+      const fillColor = isUnknown ? `url(#${hatchPatternId})` : node.customColors?.fill ?? statusEntry.fill;
+      const strokeColor = isUnknown ? unknownEntry.stroke : node.customColors?.stroke ?? statusEntry.stroke;
       const appearance = { ...getAppearanceDefaults(node.symbolId), ...node.metadata ?? {} };
       const ledStyle = {};
       if (appearance.shape !== void 0) {
@@ -5138,7 +5270,8 @@ function NodeRendererImpl({
         ledStyle["--led-bezel"] = appearance.led ? "2" : "0";
       }
       if (appearance.glow) {
-        ledStyle.filter = `drop-shadow(0 0 4px ${fillColor})`;
+        const glowColor = isUnknown ? unknownEntry.stroke : fillColor;
+        ledStyle.filter = `drop-shadow(0 0 4px ${glowColor})`;
       }
       const ledAnimation = typeof appearance.animation === "string" && appearance.animation !== "none" ? appearance.animation : void 0;
       const vb = symbol.viewBox;
@@ -5161,7 +5294,7 @@ function NodeRendererImpl({
         labelY = vb.height / 2 + oy;
         labelAnchor = "start";
       }
-      return /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)(
+      return /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)(
         "g",
         {
           "data-node-id": node.id,
@@ -5169,7 +5302,7 @@ function NodeRendererImpl({
           "data-selected": isSelected,
           "data-dragging": isDragging,
           "data-led-animation": ledAnimation,
-          "data-position-unknown": isUnknown ? "true" : void 0,
+          "data-position-unknown": node.positionUnknown === true ? "true" : void 0,
           transform: transforms.join(" "),
           style: {
             "--symbol-fill": fillColor,
@@ -5197,7 +5330,7 @@ function NodeRendererImpl({
             }
           },
           children: [
-            isSelected && /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
+            isSelected && /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
               "rect",
               {
                 x: "-5",
@@ -5212,7 +5345,7 @@ function NodeRendererImpl({
                 pointerEvents: "none"
               }
             ),
-            /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
+            /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
               "g",
               {
                 dangerouslySetInnerHTML: { __html: symbol.svgContent },
@@ -5220,7 +5353,7 @@ function NodeRendererImpl({
                 style: { pointerEvents: "auto" }
               }
             ),
-            /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
+            /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
               "text",
               {
                 x: labelX,
@@ -5240,11 +5373,11 @@ function NodeRendererImpl({
     })
   ] });
 }
-var NodeRenderer = import_react10.default.memo(NodeRendererImpl);
+var NodeRenderer = import_react11.default.memo(NodeRendererImpl);
 
 // src/components/PIDCanvas/PipeRenderer.tsx
-var import_react11 = __toESM(require("react"), 1);
-var import_jsx_runtime17 = require("react/jsx-runtime");
+var import_react12 = __toESM(require("react"), 1);
+var import_jsx_runtime18 = require("react/jsx-runtime");
 function PipeRendererImpl({
   pipes,
   selectedPipeIds,
@@ -5259,7 +5392,7 @@ function PipeRendererImpl({
   waypointDragOffset,
   onPipeSegmentClick
 }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("g", { id: "layer-pipes", children: pipes.filter((pipe) => pipe.visible !== false).map((pipe) => {
+  return /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("g", { id: "layer-pipes", children: pipes.filter((pipe) => pipe.visible !== false).map((pipe) => {
     const isSelected = selectedPipeIds?.has(pipe.id) ?? false;
     const isEditing = enableWaypointEditing && editingPipeId === pipe.id;
     const showEditingControls = enableWaypointEditing && isSelected;
@@ -5278,7 +5411,7 @@ function PipeRendererImpl({
     const strokeWidth = isSelected ? (pipeStyle.strokeWidth || 3) + 2 : pipeStyle.strokeWidth || 3;
     const strokeDasharray = pipeStyle.strokeDasharray;
     const opacity = pipeStyle.opacity !== void 0 ? pipeStyle.opacity : 1;
-    return /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)(
+    return /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)(
       "g",
       {
         "data-pipe-id": pipe.id,
@@ -5291,8 +5424,8 @@ function PipeRendererImpl({
           cursor: onPipeClick ? "pointer" : "default"
         },
         children: [
-          !enableWaypointEditing && /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)(import_jsx_runtime17.Fragment, { children: [
-            onPipeClick && /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
+          !enableWaypointEditing && /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)(import_jsx_runtime18.Fragment, { children: [
+            onPipeClick && /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
               "polyline",
               {
                 points: pointsString,
@@ -5304,7 +5437,7 @@ function PipeRendererImpl({
                 pointerEvents: "stroke"
               }
             ),
-            /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
+            /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
               "polyline",
               {
                 points: pointsString,
@@ -5328,7 +5461,7 @@ function PipeRendererImpl({
             const waypointSize = isSelectedWaypoint ? 8 : isDragging ? 8 : showEditingControls ? 6 : isSelected ? 3 : 2;
             const waypointOpacity = isSelectedWaypoint ? 1 : isDragging ? 1 : showEditingControls ? 0.9 : isSelected ? 0.8 : 0.5;
             const waypointColor = isSelectedWaypoint ? "#3b82f6" : isEndpoint && showEditingControls ? "#f59e0b" : isDragging ? "#10b981" : stroke;
-            return /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
+            return /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
               "circle",
               {
                 cx: point.x,
@@ -5365,12 +5498,12 @@ function PipeRendererImpl({
               `${pipe.id}-point-${idx}`
             );
           }),
-          showEditingControls && onPipeSegmentClick && displayPoints.length >= 2 && /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(import_jsx_runtime17.Fragment, { children: displayPoints.slice(0, -1).map((point, idx) => {
+          showEditingControls && onPipeSegmentClick && displayPoints.length >= 2 && /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(import_jsx_runtime18.Fragment, { children: displayPoints.slice(0, -1).map((point, idx) => {
             const nextPoint = displayPoints[idx + 1];
             const midX = (point.x + nextPoint.x) / 2;
             const midY = (point.y + nextPoint.y) / 2;
-            return /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)("g", { children: [
-              /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
+            return /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)("g", { children: [
+              /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
                 "circle",
                 {
                   cx: midX,
@@ -5386,7 +5519,7 @@ function PipeRendererImpl({
                   }
                 }
               ),
-              /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
+              /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
                 "circle",
                 {
                   cx: midX,
@@ -5402,7 +5535,7 @@ function PipeRendererImpl({
               )
             ] }, `${pipe.id}-segment-${idx}`);
           }) }),
-          pipe.showLabel !== false && pipe.label && pipe.routePoints.length >= 2 && /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
+          pipe.showLabel !== false && pipe.label && pipe.routePoints.length >= 2 && /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
             "text",
             {
               x: pipe.routePoints[Math.floor(pipe.routePoints.length / 2)].x + (pipe.labelOffset?.x ?? 0),
@@ -5422,11 +5555,11 @@ function PipeRendererImpl({
     );
   }) });
 }
-var PipeRenderer = import_react11.default.memo(PipeRendererImpl);
+var PipeRenderer = import_react12.default.memo(PipeRendererImpl);
 
 // src/components/PIDCanvas/DataOverlay.tsx
-var import_react12 = __toESM(require("react"), 1);
-var import_jsx_runtime18 = require("react/jsx-runtime");
+var import_react13 = __toESM(require("react"), 1);
+var import_jsx_runtime19 = require("react/jsx-runtime");
 var PULSE_KEYFRAME_ID = "pid-data-overlay-pulse-keyframes";
 var PULSE_ANIMATION = "pid-data-overlay-pulse 1.5s ease-in-out infinite";
 function ensurePulseKeyframes() {
@@ -5437,9 +5570,10 @@ function ensurePulseKeyframes() {
   style.textContent = "@keyframes pid-data-overlay-pulse{0%{opacity:.9}50%{opacity:.3}100%{opacity:.9}}";
   document.head.appendChild(style);
 }
-function renderStatusDot(cx, cy, scale, fill) {
-  ensurePulseKeyframes();
-  return /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
+function renderStatusDot(cx, cy, scale, fill, status) {
+  const isUnknown = normalizeDeviceStatus(status) === "unknown";
+  if (!isUnknown) ensurePulseKeyframes();
+  return /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
     "circle",
     {
       className: "pid-data-overlay-status-dot",
@@ -5447,7 +5581,7 @@ function renderStatusDot(cx, cy, scale, fill) {
       cy: cy - 18 * scale,
       r: 3 * scale,
       fill,
-      style: { animation: PULSE_ANIMATION }
+      style: isUnknown ? void 0 : { animation: PULSE_ANIMATION }
     }
   );
 }
@@ -5473,7 +5607,7 @@ function DataOverlayImpl({
   const backgroundColor = display?.backgroundColor;
   const offsetX = display?.offsetX ?? 0;
   const offsetY = display?.offsetY ?? 0;
-  const sparklinePath = import_react12.default.useMemo(() => {
+  const sparklinePath = import_react13.default.useMemo(() => {
     if (!showSparkline || !history || history.length < 2) return "";
     const width = 70 * scale;
     const height = 20 * scale;
@@ -5492,7 +5626,7 @@ function DataOverlayImpl({
     return `M ${points.join(" L ")}`;
   }, [showSparkline, history, scaling, scale]);
   if (!showValue) {
-    return /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(import_jsx_runtime18.Fragment, {});
+    return /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(import_jsx_runtime19.Fragment, {});
   }
   const formatValue = (val) => {
     if (typeof val === "number") {
@@ -5517,10 +5651,11 @@ function DataOverlayImpl({
   const extraMarkRows = realDisplayText ? 1 : 0;
   const overlayHeight = (label ? hasSparkline ? 55 : 30 : hasSparkline ? 47 : 22) * scale + extraMarkRows * 9 * scale;
   const overlayWidth = 80 * scale;
+  const isUnknownValue = normalizeDeviceStatus(value.status) === "unknown";
   const displayX = x + offsetX;
   const displayY = y + offsetY;
-  return /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)("g", { "data-overlay-node": nodeId, "data-status": value.status, "data-forced": isForced, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)("g", { "data-overlay-node": nodeId, "data-status": value.status, "data-forced": isForced, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
       "rect",
       {
         x: displayX - overlayWidth / 2,
@@ -5535,7 +5670,7 @@ function DataOverlayImpl({
         filter: "drop-shadow(0 2px 4px rgba(0,0,0,0.2))"
       }
     ),
-    label && /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
+    label && /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
       "text",
       {
         x: displayX,
@@ -5548,7 +5683,7 @@ function DataOverlayImpl({
         children: label
       }
     ),
-    /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
+    /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
       "text",
       {
         x: displayX,
@@ -5561,8 +5696,17 @@ function DataOverlayImpl({
         children: displayText
       }
     ),
-    showStatus && value.status !== "normal" && renderStatusDot(displayX, displayY, scale, finalTextColor),
-    value.quality !== void 0 && value.quality < 100 && /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)(
+    showStatus && value.status !== "normal" && renderStatusDot(displayX, displayY, scale, finalTextColor, value.status),
+    showStatus && isUnknownValue && /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
+      UnknownStatusGlyph,
+      {
+        x: displayX - overlayWidth / 2 + 2 * scale,
+        y: displayY - 25 * scale - 6 * scale,
+        width: 12 * scale,
+        height: 12 * scale
+      }
+    ),
+    value.quality !== void 0 && value.quality < 100 && /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)(
       "text",
       {
         x: displayX,
@@ -5579,13 +5723,13 @@ function DataOverlayImpl({
         ]
       }
     ),
-    isForced && /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)(
+    isForced && /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)(
       "g",
       {
         transform: `translate(${displayX + overlayWidth / 2}, ${displayY - 25 * scale})`,
         "aria-label": "Forced",
         children: [
-          /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
+          /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
             "circle",
             {
               r: 7 * scale,
@@ -5594,7 +5738,7 @@ function DataOverlayImpl({
               strokeWidth: 1.5 * scale
             }
           ),
-          /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
+          /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
             "text",
             {
               textAnchor: "middle",
@@ -5608,7 +5752,7 @@ function DataOverlayImpl({
         ]
       }
     ),
-    realDisplayText && /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
+    realDisplayText && /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
       "text",
       {
         x: displayX,
@@ -5621,7 +5765,7 @@ function DataOverlayImpl({
         children: realDisplayText
       }
     ),
-    hasSparkline && /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("g", { transform: `translate(${displayX - 35 * scale}, ${displayY + (label ? 5 : 0) * scale})`, children: /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
+    hasSparkline && /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("g", { transform: `translate(${displayX - 35 * scale}, ${displayY + (label ? 5 : 0) * scale})`, children: /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
       "path",
       {
         d: sparklinePath,
@@ -5635,11 +5779,11 @@ function DataOverlayImpl({
     ) })
   ] });
 }
-var DataOverlay = import_react12.default.memo(DataOverlayImpl);
+var DataOverlay = import_react13.default.memo(DataOverlayImpl);
 
 // src/components/PIDCanvas/PositionPanel.tsx
-var import_react13 = require("react");
-var import_jsx_runtime19 = require("react/jsx-runtime");
+var import_react14 = require("react");
+var import_jsx_runtime20 = require("react/jsx-runtime");
 function PositionPanel({
   selectedNode,
   selectedWaypoint,
@@ -5647,9 +5791,9 @@ function PositionPanel({
   onWaypointPositionChange,
   position = "top-right"
 }) {
-  const [x, setX] = (0, import_react13.useState)("");
-  const [y, setY] = (0, import_react13.useState)("");
-  (0, import_react13.useEffect)(() => {
+  const [x, setX] = (0, import_react14.useState)("");
+  const [y, setY] = (0, import_react14.useState)("");
+  (0, import_react14.useEffect)(() => {
     if (selectedNode) {
       setX(selectedNode.transform.x.toFixed(2));
       setY(selectedNode.transform.y.toFixed(2));
@@ -5708,7 +5852,7 @@ function PositionPanel({
     "bottom-left": { bottom: 10, left: 10 },
     "bottom-right": { bottom: 10, right: 10 }
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)(
     "div",
     {
       style: {
@@ -5725,11 +5869,11 @@ function PositionPanel({
         fontSize: "13px"
       },
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("div", { style: { marginBottom: "8px", fontWeight: 600, color: "#333" }, children: "Position" }),
-        /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)("div", { style: { display: "flex", flexDirection: "column", gap: "8px" }, children: [
-          /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)("div", { style: { display: "flex", alignItems: "center", gap: "8px" }, children: [
-            /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("label", { style: { width: "16px", color: "#666" }, children: "X:" }),
-            /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("div", { style: { marginBottom: "8px", fontWeight: 600, color: "#333" }, children: "Position" }),
+        /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)("div", { style: { display: "flex", flexDirection: "column", gap: "8px" }, children: [
+          /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)("div", { style: { display: "flex", alignItems: "center", gap: "8px" }, children: [
+            /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("label", { style: { width: "16px", color: "#666" }, children: "X:" }),
+            /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
               "input",
               {
                 type: "number",
@@ -5747,9 +5891,9 @@ function PositionPanel({
               }
             )
           ] }),
-          /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)("div", { style: { display: "flex", alignItems: "center", gap: "8px" }, children: [
-            /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("label", { style: { width: "16px", color: "#666" }, children: "Y:" }),
-            /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
+          /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)("div", { style: { display: "flex", alignItems: "center", gap: "8px" }, children: [
+            /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("label", { style: { width: "16px", color: "#666" }, children: "Y:" }),
+            /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
               "input",
               {
                 type: "number",
@@ -5768,14 +5912,14 @@ function PositionPanel({
             )
           ] })
         ] }),
-        /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("div", { style: { marginTop: "8px", fontSize: "11px", color: "#888" }, children: "Use arrow keys to nudge (\xB11px)" })
+        /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("div", { style: { marginTop: "8px", fontSize: "11px", color: "#888" }, children: "Use arrow keys to nudge (\xB11px)" })
       ]
     }
   );
 }
 
 // src/diagram/hooks/useViewBox.ts
-var import_react14 = require("react");
+var import_react15 = require("react");
 function useViewBox(options) {
   const {
     initialViewBox,
@@ -5786,16 +5930,16 @@ function useViewBox(options) {
     zoomSensitivity = 1e-3,
     allowLeftClickPan = true
   } = options;
-  const [viewBox, setViewBox] = (0, import_react14.useState)(initialViewBox);
-  const svgRef = (0, import_react14.useRef)(null);
-  const isPanningRef = (0, import_react14.useRef)(false);
-  const lastMousePosRef = (0, import_react14.useRef)({ x: 0, y: 0 });
-  const spaceKeyDownRef = (0, import_react14.useRef)(false);
-  const lastTouchDistanceRef = (0, import_react14.useRef)(null);
-  const resetViewBox = (0, import_react14.useCallback)(() => {
+  const [viewBox, setViewBox] = (0, import_react15.useState)(initialViewBox);
+  const svgRef = (0, import_react15.useRef)(null);
+  const isPanningRef = (0, import_react15.useRef)(false);
+  const lastMousePosRef = (0, import_react15.useRef)({ x: 0, y: 0 });
+  const spaceKeyDownRef = (0, import_react15.useRef)(false);
+  const lastTouchDistanceRef = (0, import_react15.useRef)(null);
+  const resetViewBox = (0, import_react15.useCallback)(() => {
     setViewBox(initialViewBox);
   }, [initialViewBox]);
-  const zoomIn = (0, import_react14.useCallback)(() => {
+  const zoomIn = (0, import_react15.useCallback)(() => {
     setViewBox((prev) => {
       const currentZoom = initialViewBox.width / prev.width;
       const newZoom = Math.min(1 / minZoom, currentZoom * 1.25);
@@ -5812,7 +5956,7 @@ function useViewBox(options) {
       };
     });
   }, [initialViewBox, minZoom]);
-  const zoomOut = (0, import_react14.useCallback)(() => {
+  const zoomOut = (0, import_react15.useCallback)(() => {
     setViewBox((prev) => {
       const currentZoom = initialViewBox.width / prev.width;
       const newZoom = Math.max(1 / maxZoom, currentZoom * 0.8);
@@ -5829,7 +5973,7 @@ function useViewBox(options) {
       };
     });
   }, [initialViewBox, maxZoom]);
-  const fitToContent = (0, import_react14.useCallback)((bounds, padding = 50) => {
+  const fitToContent = (0, import_react15.useCallback)((bounds, padding = 50) => {
     const contentWidth = bounds.maxX - bounds.minX;
     const contentHeight = bounds.maxY - bounds.minY;
     if (contentWidth === 0 || contentHeight === 0) {
@@ -5857,7 +6001,7 @@ function useViewBox(options) {
       height: newHeight
     });
   }, [initialViewBox]);
-  (0, import_react14.useEffect)(() => {
+  (0, import_react15.useEffect)(() => {
     if (!enableZoom || !svgRef.current) return;
     const svg = svgRef.current;
     const handleWheel = (e) => {
@@ -5890,7 +6034,7 @@ function useViewBox(options) {
     svg.addEventListener("wheel", handleWheel, { passive: false });
     return () => svg.removeEventListener("wheel", handleWheel);
   }, [enableZoom, zoomSensitivity, minZoom, initialViewBox]);
-  (0, import_react14.useEffect)(() => {
+  (0, import_react15.useEffect)(() => {
     if (!enablePan || !svgRef.current) return;
     const svg = svgRef.current;
     const handleMouseDown = (e) => {
@@ -5966,7 +6110,7 @@ function useViewBox(options) {
       window.removeEventListener("keyup", handleKeyUp);
     };
   }, [enablePan, allowLeftClickPan]);
-  (0, import_react14.useEffect)(() => {
+  (0, import_react15.useEffect)(() => {
     if (!svgRef.current) return;
     if (!enablePan && !enableZoom) return;
     const svg = svgRef.current;
@@ -6057,7 +6201,7 @@ function useViewBox(options) {
       svg.removeEventListener("touchend", handleTouchEnd);
     };
   }, [enablePan, enableZoom, minZoom, initialViewBox]);
-  const screenToWorld = (0, import_react14.useCallback)(
+  const screenToWorld = (0, import_react15.useCallback)(
     (screenX, screenY) => {
       const svg = svgRef.current;
       if (!svg) return { x: screenX, y: screenY };
@@ -6096,15 +6240,15 @@ function useViewBox(options) {
 }
 
 // src/diagram/hooks/useSelection.ts
-var import_react15 = require("react");
+var import_react16 = require("react");
 function useSelection(options = {}) {
   const {
     multiSelect = true,
     initialSelection = { selectedNodeIds: /* @__PURE__ */ new Set(), selectedPipeIds: /* @__PURE__ */ new Set() },
     onSelectionChange
   } = options;
-  const [selection, setSelection] = (0, import_react15.useState)(initialSelection);
-  const notifyChange = (0, import_react15.useCallback)(
+  const [selection, setSelection] = (0, import_react16.useState)(initialSelection);
+  const notifyChange = (0, import_react16.useCallback)(
     (newSelection) => {
       if (onSelectionChange) {
         onSelectionChange(newSelection);
@@ -6112,15 +6256,15 @@ function useSelection(options = {}) {
     },
     [onSelectionChange]
   );
-  const isNodeSelected = (0, import_react15.useCallback)(
+  const isNodeSelected = (0, import_react16.useCallback)(
     (nodeId) => selection.selectedNodeIds.has(nodeId),
     [selection.selectedNodeIds]
   );
-  const isPipeSelected = (0, import_react15.useCallback)(
+  const isPipeSelected = (0, import_react16.useCallback)(
     (pipeId) => selection.selectedPipeIds.has(pipeId),
     [selection.selectedPipeIds]
   );
-  const selectNode = (0, import_react15.useCallback)(
+  const selectNode = (0, import_react16.useCallback)(
     (nodeId, isMultiSelect = false) => {
       setSelection((prev) => {
         const newNodeIds = new Set(isMultiSelect && multiSelect ? prev.selectedNodeIds : []);
@@ -6139,7 +6283,7 @@ function useSelection(options = {}) {
     },
     [multiSelect, notifyChange]
   );
-  const selectPipe = (0, import_react15.useCallback)(
+  const selectPipe = (0, import_react16.useCallback)(
     (pipeId, isMultiSelect = false) => {
       setSelection((prev) => {
         const newPipeIds = new Set(isMultiSelect && multiSelect ? prev.selectedPipeIds : []);
@@ -6158,7 +6302,7 @@ function useSelection(options = {}) {
     },
     [multiSelect, notifyChange]
   );
-  const clearSelection = (0, import_react15.useCallback)(() => {
+  const clearSelection = (0, import_react16.useCallback)(() => {
     const newSelection = {
       selectedNodeIds: /* @__PURE__ */ new Set(),
       selectedPipeIds: /* @__PURE__ */ new Set()
@@ -6166,7 +6310,7 @@ function useSelection(options = {}) {
     setSelection(newSelection);
     notifyChange(newSelection);
   }, [notifyChange]);
-  const selectNodes = (0, import_react15.useCallback)(
+  const selectNodes = (0, import_react16.useCallback)(
     (nodeIds) => {
       const newSelection = {
         selectedNodeIds: new Set(nodeIds),
@@ -6177,7 +6321,7 @@ function useSelection(options = {}) {
     },
     [notifyChange]
   );
-  const selectPipes = (0, import_react15.useCallback)(
+  const selectPipes = (0, import_react16.useCallback)(
     (pipeIds) => {
       const newSelection = {
         selectedNodeIds: /* @__PURE__ */ new Set(),
@@ -6201,23 +6345,23 @@ function useSelection(options = {}) {
 }
 
 // src/diagram/hooks/useTelemetry.ts
-var import_react16 = require("react");
+var import_react17 = require("react");
 function useTelemetry(options = {}) {
   const {
     initialBindings = [],
     onTelemetryChange,
     refreshInterval = 0
   } = options;
-  const [telemetry, setTelemetry] = (0, import_react16.useState)(() => {
+  const [telemetry, setTelemetry] = (0, import_react17.useState)(() => {
     const map = /* @__PURE__ */ new Map();
     initialBindings.forEach((binding) => {
       map.set(binding.nodeId, binding);
     });
     return map;
   });
-  const telemetryRef = (0, import_react16.useRef)(telemetry);
+  const telemetryRef = (0, import_react17.useRef)(telemetry);
   telemetryRef.current = telemetry;
-  const notifyChange = (0, import_react16.useCallback)(
+  const notifyChange = (0, import_react17.useCallback)(
     (newTelemetry) => {
       if (onTelemetryChange) {
         onTelemetryChange(newTelemetry);
@@ -6225,7 +6369,7 @@ function useTelemetry(options = {}) {
     },
     [onTelemetryChange]
   );
-  const updateTelemetry = (0, import_react16.useCallback)(
+  const updateTelemetry = (0, import_react17.useCallback)(
     (nodeId, value) => {
       setTelemetry((prev) => {
         const newMap = new Map(prev);
@@ -6255,7 +6399,7 @@ function useTelemetry(options = {}) {
     },
     [notifyChange]
   );
-  const updateTelemetryBatch = (0, import_react16.useCallback)(
+  const updateTelemetryBatch = (0, import_react17.useCallback)(
     (updates) => {
       setTelemetry((prev) => {
         const newMap = new Map(prev);
@@ -6309,16 +6453,16 @@ function useTelemetry(options = {}) {
     },
     [notifyChange]
   );
-  const getTelemetry = (0, import_react16.useCallback)(
+  const getTelemetry = (0, import_react17.useCallback)(
     (nodeId) => telemetryRef.current.get(nodeId),
     []
   );
-  const clearTelemetry = (0, import_react16.useCallback)(() => {
+  const clearTelemetry = (0, import_react17.useCallback)(() => {
     const newMap = /* @__PURE__ */ new Map();
     setTelemetry(newMap);
     notifyChange(newMap);
   }, [notifyChange]);
-  const setBindings = (0, import_react16.useCallback)(
+  const setBindings = (0, import_react17.useCallback)(
     (bindings) => {
       const newMap = /* @__PURE__ */ new Map();
       bindings.forEach((binding) => {
@@ -6329,7 +6473,7 @@ function useTelemetry(options = {}) {
     },
     [notifyChange]
   );
-  (0, import_react16.useEffect)(() => {
+  (0, import_react17.useEffect)(() => {
     if (refreshInterval <= 0) return;
     const intervalId = setInterval(() => {
       notifyChange(telemetryRef.current);
@@ -6347,10 +6491,10 @@ function useTelemetry(options = {}) {
 }
 
 // src/diagram/hooks/useTelemetryStatus.ts
-var import_react17 = require("react");
+var import_react18 = require("react");
 function useTelemetryStatus(telemetry, diagram, setDiagram, options = {}) {
   const { enabled = true, mapStatus } = options;
-  (0, import_react17.useEffect)(() => {
+  (0, import_react18.useEffect)(() => {
     if (!enabled) return;
     const defaultMapStatus = (telemetryStatus) => {
       switch (telemetryStatus) {
@@ -6363,8 +6507,13 @@ function useTelemetryStatus(telemetry, diagram, setDiagram, options = {}) {
           return "alarm";
         case "off":
           return "stopped";
-        default:
+        case "unknown":
+          return "unknown";
+        default: {
+          const exhaustive = telemetryStatus;
+          void exhaustive;
           return "stopped";
+        }
       }
     };
     const statusMapper = mapStatus || defaultMapStatus;
@@ -6389,10 +6538,10 @@ function useTelemetryStatus(telemetry, diagram, setDiagram, options = {}) {
 }
 
 // src/diagram/hooks/useBooleanIndicators.ts
-var import_react18 = require("react");
+var import_react19 = require("react");
 function useBooleanIndicators(telemetry, diagram, setDiagram, options = {}) {
   const { enabled = true, symbolId = "status-indicator" } = options;
-  (0, import_react18.useEffect)(() => {
+  (0, import_react19.useEffect)(() => {
     if (!enabled) return;
     const tagIndex = /* @__PURE__ */ new Map();
     telemetry.forEach((binding) => {
@@ -6430,7 +6579,7 @@ function useBooleanIndicators(telemetry, diagram, setDiagram, options = {}) {
 }
 
 // src/diagram/hooks/useDrag.ts
-var import_react19 = require("react");
+var import_react20 = require("react");
 function useDrag(options = {}) {
   const {
     onDragStart,
@@ -6440,23 +6589,23 @@ function useDrag(options = {}) {
     dragThreshold = 3,
     screenToWorld = (x, y) => ({ x, y })
   } = options;
-  const [dragState, setDragState] = (0, import_react19.useState)({
+  const [dragState, setDragState] = (0, import_react20.useState)({
     isDragging: false,
     startPosition: null,
     offset: { x: 0, y: 0 },
     draggedId: null
   });
-  const [isListening, setIsListening] = (0, import_react19.useState)(false);
-  const dragStartRef = (0, import_react19.useRef)(null);
-  const hasMovedRef = (0, import_react19.useRef)(false);
-  const applySnap = (0, import_react19.useCallback)(
+  const [isListening, setIsListening] = (0, import_react20.useState)(false);
+  const dragStartRef = (0, import_react20.useRef)(null);
+  const hasMovedRef = (0, import_react20.useRef)(false);
+  const applySnap = (0, import_react20.useCallback)(
     (value) => {
       if (snapToGrid <= 0) return value;
       return Math.round(value / snapToGrid) * snapToGrid;
     },
     [snapToGrid]
   );
-  const handleMouseMove = (0, import_react19.useCallback)(
+  const handleMouseMove = (0, import_react20.useCallback)(
     (event) => {
       if (!dragStartRef.current) return;
       const { id, screenStart: _screenStart, itemPosition, clickOffset } = dragStartRef.current;
@@ -6497,7 +6646,7 @@ function useDrag(options = {}) {
     },
     [screenToWorld, dragThreshold, applySnap, onDragStart, onDragMove]
   );
-  const handleMouseUp = (0, import_react19.useCallback)(
+  const handleMouseUp = (0, import_react20.useCallback)(
     (event) => {
       if (!dragStartRef.current || !hasMovedRef.current) {
         dragStartRef.current = null;
@@ -6534,7 +6683,7 @@ function useDrag(options = {}) {
     },
     [screenToWorld, applySnap, onDragEnd]
   );
-  const handleTouchMove = (0, import_react19.useCallback)(
+  const handleTouchMove = (0, import_react20.useCallback)(
     (event) => {
       if (!dragStartRef.current || event.touches.length !== 1) return;
       const touch = event.touches[0];
@@ -6577,7 +6726,7 @@ function useDrag(options = {}) {
     },
     [screenToWorld, dragThreshold, applySnap, onDragStart, onDragMove]
   );
-  const handleTouchEnd = (0, import_react19.useCallback)(
+  const handleTouchEnd = (0, import_react20.useCallback)(
     (event) => {
       if (!dragStartRef.current || !hasMovedRef.current) {
         dragStartRef.current = null;
@@ -6615,7 +6764,7 @@ function useDrag(options = {}) {
     },
     [screenToWorld, applySnap, onDragEnd]
   );
-  (0, import_react19.useEffect)(() => {
+  (0, import_react20.useEffect)(() => {
     if (!isListening) return;
     document.addEventListener("mousemove", handleMouseMove);
     document.addEventListener("mouseup", handleMouseUp);
@@ -6630,7 +6779,7 @@ function useDrag(options = {}) {
       document.removeEventListener("touchcancel", handleTouchEnd);
     };
   }, [isListening, handleMouseMove, handleMouseUp, handleTouchMove, handleTouchEnd]);
-  const startDrag = (0, import_react19.useCallback)(
+  const startDrag = (0, import_react20.useCallback)(
     (id, event, itemPosition) => {
       event.stopPropagation();
       let clientX;
@@ -6660,7 +6809,7 @@ function useDrag(options = {}) {
     },
     [screenToWorld]
   );
-  const cancelDrag = (0, import_react19.useCallback)(() => {
+  const cancelDrag = (0, import_react20.useCallback)(() => {
     dragStartRef.current = null;
     hasMovedRef.current = false;
     setIsListening(false);
@@ -6671,7 +6820,7 @@ function useDrag(options = {}) {
       draggedId: null
     });
   }, []);
-  const isDraggingItem = (0, import_react19.useCallback)(
+  const isDraggingItem = (0, import_react20.useCallback)(
     (id) => dragState.isDragging && dragState.draggedId === id,
     [dragState.isDragging, dragState.draggedId]
   );
@@ -6684,7 +6833,7 @@ function useDrag(options = {}) {
 }
 
 // src/diagram/hooks/useKeyboardShortcuts.ts
-var import_react20 = require("react");
+var import_react21 = require("react");
 function useKeyboardShortcuts(options) {
   const {
     onDelete,
@@ -6695,7 +6844,7 @@ function useKeyboardShortcuts(options) {
     onSelectAll,
     enabled = true
   } = options;
-  (0, import_react20.useEffect)(() => {
+  (0, import_react21.useEffect)(() => {
     if (!enabled) return;
     const handleKeyDown = (event) => {
       const target = event.target;
@@ -6804,7 +6953,7 @@ function nodeHasPort(node, portId) {
 }
 
 // src/components/PIDCanvas/PIDCanvas.tsx
-var import_jsx_runtime20 = require("react/jsx-runtime");
+var import_jsx_runtime21 = require("react/jsx-runtime");
 var DEFAULT_FEATURES = {
   pan: true,
   zoom: true,
@@ -6833,21 +6982,21 @@ function PIDCanvasImpl({
   statusColorMap,
   ...props
 }) {
-  const [localDiagram, setLocalDiagram] = (0, import_react21.useState)(diagram);
-  const [dragOverPosition, setDragOverPosition] = (0, import_react21.useState)(null);
-  const [isConnecting, setIsConnecting] = (0, import_react21.useState)(false);
-  const [connectionSource, setConnectionSource] = (0, import_react21.useState)(null);
-  const [connectionSourcePort, setConnectionSourcePort] = (0, import_react21.useState)(null);
-  const [connectionCursor, setConnectionCursor] = (0, import_react21.useState)(null);
-  const [hoveredNode, setHoveredNode] = (0, import_react21.useState)(null);
-  const [hoveredPort, setHoveredPort] = (0, import_react21.useState)(null);
-  const [selectedWaypoint, setSelectedWaypoint] = (0, import_react21.useState)(null);
-  const historyStack = (0, import_react21.useRef)([]);
-  const redoStack = (0, import_react21.useRef)([]);
-  const isUndoRedoAction = (0, import_react21.useRef)(false);
-  const isInternalChange = (0, import_react21.useRef)(false);
-  const lastInternalDiagram = (0, import_react21.useRef)(null);
-  (0, import_react21.useEffect)(() => {
+  const [localDiagram, setLocalDiagram] = (0, import_react22.useState)(diagram);
+  const [dragOverPosition, setDragOverPosition] = (0, import_react22.useState)(null);
+  const [isConnecting, setIsConnecting] = (0, import_react22.useState)(false);
+  const [connectionSource, setConnectionSource] = (0, import_react22.useState)(null);
+  const [connectionSourcePort, setConnectionSourcePort] = (0, import_react22.useState)(null);
+  const [connectionCursor, setConnectionCursor] = (0, import_react22.useState)(null);
+  const [hoveredNode, setHoveredNode] = (0, import_react22.useState)(null);
+  const [hoveredPort, setHoveredPort] = (0, import_react22.useState)(null);
+  const [selectedWaypoint, setSelectedWaypoint] = (0, import_react22.useState)(null);
+  const historyStack = (0, import_react22.useRef)([]);
+  const redoStack = (0, import_react22.useRef)([]);
+  const isUndoRedoAction = (0, import_react22.useRef)(false);
+  const isInternalChange = (0, import_react22.useRef)(false);
+  const lastInternalDiagram = (0, import_react22.useRef)(null);
+  (0, import_react22.useEffect)(() => {
     const isExternal = !isInternalChange.current && diagram !== lastInternalDiagram.current;
     if (isExternal) {
       setLocalDiagram(diagram);
@@ -6869,7 +7018,7 @@ function PIDCanvasImpl({
     enablePan: features.pan ?? true,
     enableZoom: features.zoom ?? true
   });
-  const calculateContentBounds = (0, import_react21.useCallback)(() => {
+  const calculateContentBounds = (0, import_react22.useCallback)(() => {
     const nodes2 = localDiagram.nodes.filter((n) => n.visible !== false);
     if (nodes2.length === 0) {
       return null;
@@ -6892,7 +7041,7 @@ function PIDCanvasImpl({
     });
     return { minX, minY, maxX, maxY };
   }, [localDiagram.nodes]);
-  (0, import_react21.useEffect)(() => {
+  (0, import_react22.useEffect)(() => {
     if (onMounted) {
       const controls = {
         fitToContent: (padding = 50) => {
@@ -6933,8 +7082,8 @@ function PIDCanvasImpl({
   });
   const dragEnabled = features.dragNodes ?? false;
   const selectionEnabled = features.selection ?? false;
-  const containerRef = (0, import_react21.useRef)(null);
-  const pushToHistory = (0, import_react21.useCallback)((currentDiagram) => {
+  const containerRef = (0, import_react22.useRef)(null);
+  const pushToHistory = (0, import_react22.useCallback)((currentDiagram) => {
     if (isUndoRedoAction.current) return;
     const snapshot = JSON.parse(JSON.stringify(currentDiagram));
     historyStack.current.push(snapshot);
@@ -6943,7 +7092,7 @@ function PIDCanvasImpl({
     }
     redoStack.current = [];
   }, []);
-  const undo = (0, import_react21.useCallback)(() => {
+  const undo = (0, import_react22.useCallback)(() => {
     if (historyStack.current.length === 0) return;
     isUndoRedoAction.current = true;
     const currentSnapshot = JSON.parse(JSON.stringify(localDiagram));
@@ -6957,7 +7106,7 @@ function PIDCanvasImpl({
       isUndoRedoAction.current = false;
     }, 0);
   }, [localDiagram, onDiagramChange]);
-  const redo = (0, import_react21.useCallback)(() => {
+  const redo = (0, import_react22.useCallback)(() => {
     if (redoStack.current.length === 0) return;
     isUndoRedoAction.current = true;
     const currentSnapshot = JSON.parse(JSON.stringify(localDiagram));
@@ -6971,7 +7120,7 @@ function PIDCanvasImpl({
       isUndoRedoAction.current = false;
     }, 0);
   }, [localDiagram, onDiagramChange]);
-  (0, import_react21.useEffect)(() => {
+  (0, import_react22.useEffect)(() => {
     const handleKeyDown = (e) => {
       const isCtrlOrCmd = e.ctrlKey || e.metaKey;
       if (isCtrlOrCmd && e.key === "z" && !e.shiftKey) {
@@ -6988,7 +7137,7 @@ function PIDCanvasImpl({
     window.addEventListener("keydown", handleKeyDown);
     return () => window.removeEventListener("keydown", handleKeyDown);
   }, [undo, redo]);
-  (0, import_react21.useEffect)(() => {
+  (0, import_react22.useEffect)(() => {
     if (!features.dragNodes) return;
     const handleKeyDown = (e) => {
       if (selection.selectedNodeIds.size === 0 && !selectedWaypoint) return;
@@ -7073,7 +7222,7 @@ function PIDCanvasImpl({
     onNodeMove,
     pushToHistory
   ]);
-  const handlePositionChange = (0, import_react21.useCallback)(
+  const handlePositionChange = (0, import_react22.useCallback)(
     (nodeId, x, y) => {
       pushToHistory(localDiagram);
       const updatedNodes = localDiagram.nodes.map(
@@ -7095,7 +7244,7 @@ function PIDCanvasImpl({
     },
     [localDiagram, onDiagramChange, onNodeMove, pushToHistory]
   );
-  const handleWaypointPositionChange = (0, import_react21.useCallback)(
+  const handleWaypointPositionChange = (0, import_react22.useCallback)(
     (pipeId, pointIndex, x, y) => {
       pushToHistory(localDiagram);
       const updatedPipes = localDiagram.pipes.map((pipe) => {
@@ -7113,7 +7262,7 @@ function PIDCanvasImpl({
     },
     [localDiagram, onDiagramChange, pushToHistory]
   );
-  const handleDragEnd = (0, import_react21.useCallback)(
+  const handleDragEnd = (0, import_react22.useCallback)(
     (nodeId, offset, finalPosition) => {
       const dragDistance = Math.sqrt(offset.x ** 2 + offset.y ** 2);
       if (dragDistance < 2) {
@@ -7194,7 +7343,7 @@ function PIDCanvasImpl({
       onDiagramChange?.(updatedDiagram);
     }
   });
-  const handleNodeDragStart = (0, import_react21.useCallback)(
+  const handleNodeDragStart = (0, import_react22.useCallback)(
     (nodeId, event) => {
       const node = localDiagram.nodes.find((n) => n.id === nodeId);
       if (!node) return;
@@ -7202,7 +7351,7 @@ function PIDCanvasImpl({
     },
     [localDiagram.nodes, startDrag]
   );
-  const handleWaypointClick = (0, import_react21.useCallback)(
+  const handleWaypointClick = (0, import_react22.useCallback)(
     (pipeId, pointIndex) => {
       setSelectedWaypoint({ pipeId, pointIndex });
       if (selectionEnabled) {
@@ -7211,7 +7360,7 @@ function PIDCanvasImpl({
     },
     [selectionEnabled, clearSelection]
   );
-  const handleWaypointDragStart = (0, import_react21.useCallback)(
+  const handleWaypointDragStart = (0, import_react22.useCallback)(
     (pipeId, pointIndex, event) => {
       const pipe = localDiagram.pipes.find((p) => p.id === pipeId);
       if (!pipe || pointIndex >= pipe.routePoints.length) return;
@@ -7220,7 +7369,7 @@ function PIDCanvasImpl({
     },
     [localDiagram.pipes, startWaypointDrag]
   );
-  const handlePipeSegmentClick = (0, import_react21.useCallback)(
+  const handlePipeSegmentClick = (0, import_react22.useCallback)(
     (pipeId, position, segmentIndex) => {
       pushToHistory(localDiagram);
       const updatedPipes = localDiagram.pipes.map((pipe) => {
@@ -7239,7 +7388,7 @@ function PIDCanvasImpl({
     [localDiagram, onDiagramChange, pushToHistory]
   );
   const telemetryEnabled = features.telemetry ?? false;
-  const handleDelete = (0, import_react21.useCallback)(() => {
+  const handleDelete = (0, import_react22.useCallback)(() => {
     if (!selectionEnabled) return;
     const { selectedNodeIds, selectedPipeIds } = selection;
     if (selectedNodeIds.size === 0 && selectedPipeIds.size === 0) return;
@@ -7268,17 +7417,17 @@ function PIDCanvasImpl({
     onDelete,
     pushToHistory
   ]);
-  const handleCopy = (0, import_react21.useCallback)(() => {
+  const handleCopy = (0, import_react22.useCallback)(() => {
     if (!selectionEnabled) return;
     const { selectedNodeIds, selectedPipeIds } = selection;
     if (selectedNodeIds.size === 0 && selectedPipeIds.size === 0) return;
     onItemsCopied?.(Array.from(selectedNodeIds), Array.from(selectedPipeIds));
   }, [selection, selectionEnabled, onItemsCopied]);
-  const handlePaste = (0, import_react21.useCallback)(() => {
+  const handlePaste = (0, import_react22.useCallback)(() => {
     if (!selectionEnabled) return;
     onPaste?.();
   }, [selectionEnabled, onPaste]);
-  const handleNodeDoubleClick = (0, import_react21.useCallback)(
+  const handleNodeDoubleClick = (0, import_react22.useCallback)(
     (nodeId, event) => {
       if (!selectionEnabled) return;
       console.log("Node double-clicked:", nodeId);
@@ -7292,7 +7441,7 @@ function PIDCanvasImpl({
     onCopy: handleCopy,
     onPaste: handlePaste
   });
-  const handleNodeClick = (0, import_react21.useCallback)(
+  const handleNodeClick = (0, import_react22.useCallback)(
     (nodeId, event) => {
       const connectionModeEnabled = features.connectionMode ?? false;
       if (connectionModeEnabled && isConnecting) {
@@ -7334,7 +7483,7 @@ function PIDCanvasImpl({
       onNodeClick
     ]
   );
-  const handlePipeClick = (0, import_react21.useCallback)(
+  const handlePipeClick = (0, import_react22.useCallback)(
     (pipeId, event) => {
       if (selectionEnabled) {
         selectPipe(pipeId, event.ctrlKey || event.metaKey);
@@ -7353,7 +7502,7 @@ function PIDCanvasImpl({
     }
     setSelectedWaypoint(null);
   };
-  const handleDragOver = (0, import_react21.useCallback)(
+  const handleDragOver = (0, import_react22.useCallback)(
     (event) => {
       if (!features.allowSymbolDrop) return;
       event.preventDefault();
@@ -7364,7 +7513,7 @@ function PIDCanvasImpl({
     },
     [features.allowSymbolDrop, screenToWorld, svgRef]
   );
-  const handleDrop = (0, import_react21.useCallback)(
+  const handleDrop = (0, import_react22.useCallback)(
     (event) => {
       if (!features.allowSymbolDrop) return;
       event.preventDefault();
@@ -7377,10 +7526,10 @@ function PIDCanvasImpl({
     },
     [features.allowSymbolDrop, screenToWorld, onSymbolDrop, svgRef]
   );
-  const handleDragLeave = (0, import_react21.useCallback)(() => {
+  const handleDragLeave = (0, import_react22.useCallback)(() => {
     setDragOverPosition(null);
   }, []);
-  const handleMouseMove = (0, import_react21.useCallback)(
+  const handleMouseMove = (0, import_react22.useCallback)(
     (event) => {
       const connectionModeEnabled = features.connectionMode ?? false;
       if (connectionModeEnabled) {
@@ -7417,7 +7566,7 @@ function PIDCanvasImpl({
   const viewBox = controlledViewBox;
   const displayDiagram = localDiagram;
   const selectedNode = selectionEnabled && selection.selectedNodeIds.size === 1 ? localDiagram.nodes.find((n) => selection.selectedNodeIds.has(n.id)) || null : null;
-  return /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)(
     "div",
     {
       ref: containerRef,
@@ -7432,7 +7581,7 @@ function PIDCanvasImpl({
       },
       ...props,
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)(
+        /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)(
           "svg",
           {
             ref: svgRef,
@@ -7451,15 +7600,15 @@ function PIDCanvasImpl({
             onDrop: handleDrop,
             onDragLeave: handleDragLeave,
             children: [
-              features.showGrid !== false ? /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)(import_jsx_runtime20.Fragment, { children: [
-                /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)("defs", { children: [
-                  /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("pattern", { id: "grid-minor", width: "5", height: "5", patternUnits: "userSpaceOnUse", children: /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("path", { d: "M 5 0 L 0 0 0 5", fill: "none", stroke: "#e5e7eb", strokeWidth: "0.5" }) }),
-                  /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)("pattern", { id: "grid-major", width: "25", height: "25", patternUnits: "userSpaceOnUse", children: [
-                    /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("rect", { width: "25", height: "25", fill: "url(#grid-minor)" }),
-                    /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("path", { d: "M 25 0 L 0 0 0 25", fill: "none", stroke: "#d1d5db", strokeWidth: "1" })
+              features.showGrid !== false ? /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)(import_jsx_runtime21.Fragment, { children: [
+                /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)("defs", { children: [
+                  /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("pattern", { id: "grid-minor", width: "5", height: "5", patternUnits: "userSpaceOnUse", children: /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("path", { d: "M 5 0 L 0 0 0 5", fill: "none", stroke: "#e5e7eb", strokeWidth: "0.5" }) }),
+                  /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)("pattern", { id: "grid-major", width: "25", height: "25", patternUnits: "userSpaceOnUse", children: [
+                    /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("rect", { width: "25", height: "25", fill: "url(#grid-minor)" }),
+                    /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("path", { d: "M 25 0 L 0 0 0 25", fill: "none", stroke: "#d1d5db", strokeWidth: "1" })
                   ] })
                 ] }),
-                /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
+                /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
                   "rect",
                   {
                     x: Math.floor(viewBox.x / 25) * 25 - viewBox.width,
@@ -7469,7 +7618,7 @@ function PIDCanvasImpl({
                     fill: "url(#grid-major)"
                   }
                 )
-              ] }) : /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
+              ] }) : /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
                 "rect",
                 {
                   x: Math.floor(viewBox.x / 25) * 25 - viewBox.width,
@@ -7479,7 +7628,7 @@ function PIDCanvasImpl({
                   fill: features.backgroundColor ?? "#ffffff"
                 }
               ),
-              /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
+              /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
                 PipeRenderer,
                 {
                   pipes: displayDiagram.pipes,
@@ -7493,7 +7642,7 @@ function PIDCanvasImpl({
                   onPipeSegmentClick: void 0
                 }
               ),
-              /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
+              /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
                 NodeRenderer,
                 {
                   nodes: displayDiagram.nodes,
@@ -7507,7 +7656,7 @@ function PIDCanvasImpl({
                   statusColorMap
                 }
               ),
-              (features.editPipeRoutes ?? false) && /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
+              (features.editPipeRoutes ?? false) && /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
                 PipeRenderer,
                 {
                   pipes: displayDiagram.pipes,
@@ -7524,7 +7673,7 @@ function PIDCanvasImpl({
                   onPipeSegmentClick: handlePipeSegmentClick
                 }
               ),
-              telemetryEnabled && telemetry && /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("g", { id: "layer-telemetry", children: displayDiagram.nodes.map((node) => {
+              telemetryEnabled && telemetry && /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("g", { id: "layer-telemetry", children: displayDiagram.nodes.map((node) => {
                 if (node.symbolId === "status-indicator") return null;
                 const binding = telemetry.get(node.id);
                 if (!binding) return null;
@@ -7532,7 +7681,7 @@ function PIDCanvasImpl({
                 if (!symbol) return null;
                 const overlayX = node.transform.x + symbol.viewBox.width / 2;
                 const overlayY = node.transform.y + symbol.viewBox.height + 50;
-                return /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
+                return /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
                   DataOverlay,
                   {
                     nodeId: node.id,
@@ -7545,7 +7694,7 @@ function PIDCanvasImpl({
                   `telemetry-${node.id}`
                 );
               }) }),
-              dragOverPosition && /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
+              dragOverPosition && /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
                 "circle",
                 {
                   cx: dragOverPosition.x,
@@ -7558,7 +7707,7 @@ function PIDCanvasImpl({
                   pointerEvents: "none"
                 }
               ),
-              isConnecting && connectionSource && connectionCursor && /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("g", { id: "connection-preview", pointerEvents: "none", children: (() => {
+              isConnecting && connectionSource && connectionCursor && /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("g", { id: "connection-preview", pointerEvents: "none", children: (() => {
                 const sourceNode = displayDiagram.nodes.find((n) => n.id === connectionSource);
                 if (!sourceNode) return null;
                 const symbol = getSymbolDefinition(sourceNode.symbolId);
@@ -7574,8 +7723,8 @@ function PIDCanvasImpl({
                     }
                   }
                 }
-                return /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)(import_jsx_runtime20.Fragment, { children: [
-                  /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
+                return /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)(import_jsx_runtime21.Fragment, { children: [
+                  /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
                     "circle",
                     {
                       cx: lineStartX,
@@ -7587,7 +7736,7 @@ function PIDCanvasImpl({
                       opacity: 0.6
                     }
                   ),
-                  /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
+                  /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
                     "line",
                     {
                       x1: lineStartX,
@@ -7600,7 +7749,7 @@ function PIDCanvasImpl({
                       opacity: 0.8
                     }
                   ),
-                  /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
+                  /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
                     "circle",
                     {
                       cx: connectionCursor.x,
@@ -7612,7 +7761,7 @@ function PIDCanvasImpl({
                   )
                 ] });
               })() }),
-              features.connectionMode && /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("g", { id: "port-indicators", children: displayDiagram.nodes.map((node) => {
+              features.connectionMode && /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("g", { id: "port-indicators", children: displayDiagram.nodes.map((node) => {
                 const symbol = getSymbolDefinition(node.symbolId);
                 if (!symbol?.ports) return null;
                 return symbol.ports.map((port) => {
@@ -7620,8 +7769,8 @@ function PIDCanvasImpl({
                   if (!portPos) return null;
                   const isHovered = hoveredPort === port.id && hoveredNode === node.id;
                   const isSourcePort = node.id === connectionSource && port.id === connectionSourcePort;
-                  return /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)("g", { children: [
-                    /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
+                  return /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)("g", { children: [
+                    /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
                       "circle",
                       {
                         cx: portPos.x,
@@ -7654,7 +7803,7 @@ function PIDCanvasImpl({
                         }
                       }
                     ),
-                    /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
+                    /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
                       "circle",
                       {
                         cx: portPos.x,
@@ -7673,7 +7822,7 @@ function PIDCanvasImpl({
             ]
           }
         ),
-        features.dragNodes && /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
+        features.dragNodes && /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
           PositionPanel,
           {
             selectedNode,
@@ -7691,19 +7840,19 @@ function PIDCanvasImpl({
     }
   );
 }
-var PIDCanvas = import_react21.default.memo(PIDCanvasImpl);
+var PIDCanvas = import_react22.default.memo(PIDCanvasImpl);
 
 // src/components/SymbolLibrary/SymbolLibrary.tsx
-var import_react22 = require("react");
-var import_jsx_runtime21 = require("react/jsx-runtime");
+var import_react23 = require("react");
+var import_jsx_runtime22 = require("react/jsx-runtime");
 function SymbolLibrary({
   className = "",
   onSymbolDragStart,
   showCategories = true,
   categories = ["Valves", "Pumps", "Tanks", "Instruments", "Displays"]
 }) {
-  const [selectedCategory, setSelectedCategory] = (0, import_react22.useState)("all");
-  const [searchQuery, setSearchQuery] = (0, import_react22.useState)("");
+  const [selectedCategory, setSelectedCategory] = (0, import_react23.useState)("all");
+  const [searchQuery, setSearchQuery] = (0, import_react23.useState)("");
   const symbolIds = getAvailableSymbols();
   const allSymbols = symbolIds.map((id) => getSymbolDefinition(id)).filter((symbol) => symbol !== void 0);
   const categoryMap = {
@@ -7724,9 +7873,9 @@ function SymbolLibrary({
     event.dataTransfer.effectAllowed = "copy";
     onSymbolDragStart?.(symbol.id, event);
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)("div", { className: `symbol-library ${className}`.trim(), style: styles.container, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("div", { style: styles.header, children: /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("h3", { style: styles.title, children: "Symbol Library" }) }),
-    /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("div", { style: styles.searchContainer, children: /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)("div", { className: `symbol-library ${className}`.trim(), style: styles.container, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("div", { style: styles.header, children: /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("h3", { style: styles.title, children: "Symbol Library" }) }),
+    /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("div", { style: styles.searchContainer, children: /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
       "input",
       {
         type: "text",
@@ -7736,8 +7885,8 @@ function SymbolLibrary({
         style: styles.searchInput
       }
     ) }),
-    showCategories && /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)("div", { style: styles.categories, children: [
-      /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
+    showCategories && /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)("div", { style: styles.categories, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
         "button",
         {
           onClick: () => setSelectedCategory("all"),
@@ -7748,7 +7897,7 @@ function SymbolLibrary({
           children: "All"
         }
       ),
-      categories.map((category) => /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
+      categories.map((category) => /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
         "button",
         {
           onClick: () => setSelectedCategory(category),
@@ -7761,7 +7910,7 @@ function SymbolLibrary({
         category
       ))
     ] }),
-    /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("div", { style: styles.symbolGrid, children: filteredSymbols.length === 0 ? /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("div", { style: styles.emptyState, children: "No symbols found" }) : filteredSymbols.map((symbol) => /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)(
+    /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("div", { style: styles.symbolGrid, children: filteredSymbols.length === 0 ? /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("div", { style: styles.emptyState, children: "No symbols found" }) : filteredSymbols.map((symbol) => /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)(
       "div",
       {
         draggable: true,
@@ -7769,15 +7918,15 @@ function SymbolLibrary({
         style: styles.symbolCard,
         title: symbol.metadata?.description || symbol.name,
         children: [
-          /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("div", { style: styles.symbolPreview, children: /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
+          /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("div", { style: styles.symbolPreview, children: /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
             "svg",
             {
               viewBox: `${symbol.viewBox.x} ${symbol.viewBox.y} ${symbol.viewBox.width} ${symbol.viewBox.height}`,
               style: styles.symbolSvg,
-              children: /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("g", { dangerouslySetInnerHTML: { __html: symbol.svgContent } })
+              children: /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("g", { dangerouslySetInnerHTML: { __html: symbol.svgContent } })
             }
           ) }),
-          /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("div", { style: styles.symbolName, children: symbol.name })
+          /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("div", { style: styles.symbolName, children: symbol.name })
         ]
       },
       symbol.id
@@ -7886,7 +8035,7 @@ var styles = {
 };
 
 // src/components/NodeConfigPanel/NodeConfigPanel.tsx
-var import_jsx_runtime22 = require("react/jsx-runtime");
+var import_jsx_runtime23 = require("react/jsx-runtime");
 function NodeConfigPanel({
   node,
   binding,
@@ -7909,15 +8058,15 @@ function NodeConfigPanel({
   };
   const appearanceFields = getAppearanceSchema(node.symbolId);
   const showGenericTelemetry = appearanceFields.length === 0;
-  return /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)("div", { className, style: defaultStyle, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)("h2", { style: { margin: "0 0 16px 0", fontSize: "1rem", fontWeight: 600 }, children: [
+  return /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)("div", { className, style: defaultStyle, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)("h2", { style: { margin: "0 0 16px 0", fontSize: "1rem", fontWeight: 600 }, children: [
       "Configure: ",
       node.id
     ] }),
-    /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)("div", { style: { marginBottom: "20px" }, children: [
-      /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("h3", { style: { fontSize: "0.875rem", fontWeight: 600, marginBottom: "8px" }, children: "Node Settings" }),
-      /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("label", { style: { fontSize: "0.75rem", display: "block", marginBottom: "4px" }, children: "Label:" }),
-      /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
+    /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)("div", { style: { marginBottom: "20px" }, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("h3", { style: { fontSize: "0.875rem", fontWeight: 600, marginBottom: "8px" }, children: "Node Settings" }),
+      /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("label", { style: { fontSize: "0.75rem", display: "block", marginBottom: "4px" }, children: "Label:" }),
+      /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
         "input",
         {
           type: "text",
@@ -7933,10 +8082,10 @@ function NodeConfigPanel({
           }
         }
       ),
-      /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)("div", { style: { display: "grid", gridTemplateColumns: "1fr 1fr", gap: "8px" }, children: [
-        /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)("div", { children: [
-          /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("label", { style: { fontSize: "0.75rem", display: "block", marginBottom: "4px" }, children: "Label Offset X:" }),
-          /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
+      /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)("div", { style: { display: "grid", gridTemplateColumns: "1fr 1fr", gap: "8px" }, children: [
+        /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)("div", { children: [
+          /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("label", { style: { fontSize: "0.75rem", display: "block", marginBottom: "4px" }, children: "Label Offset X:" }),
+          /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
             "input",
             {
               type: "number",
@@ -7957,9 +8106,9 @@ function NodeConfigPanel({
             }
           )
         ] }),
-        /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)("div", { children: [
-          /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("label", { style: { fontSize: "0.75rem", display: "block", marginBottom: "4px" }, children: "Label Offset Y:" }),
-          /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)("div", { children: [
+          /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("label", { style: { fontSize: "0.75rem", display: "block", marginBottom: "4px" }, children: "Label Offset Y:" }),
+          /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
             "input",
             {
               type: "number",
@@ -7981,9 +8130,9 @@ function NodeConfigPanel({
           )
         ] })
       ] }),
-      /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)("div", { children: [
-        /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("label", { style: { fontSize: "0.75rem", display: "block", marginBottom: "4px" }, children: "Label Font Size:" }),
-        /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
+      /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)("div", { children: [
+        /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("label", { style: { fontSize: "0.75rem", display: "block", marginBottom: "4px" }, children: "Label Font Size:" }),
+        /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
           "input",
           {
             type: "number",
@@ -8003,9 +8152,9 @@ function NodeConfigPanel({
           }
         )
       ] }),
-      /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)("div", { children: [
-        /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("label", { style: { fontSize: "0.75rem", display: "block", marginBottom: "4px" }, children: "Rotation (degrees):" }),
-        /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
+      /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)("div", { children: [
+        /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("label", { style: { fontSize: "0.75rem", display: "block", marginBottom: "4px" }, children: "Rotation (degrees):" }),
+        /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
           "input",
           {
             type: "number",
@@ -8030,8 +8179,8 @@ function NodeConfigPanel({
         )
       ] })
     ] }),
-    appearanceFields.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)("div", { style: { marginBottom: "20px" }, children: [
-      /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("h3", { style: { fontSize: "0.875rem", fontWeight: 600, marginBottom: "8px" }, children: "Appearance" }),
+    appearanceFields.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)("div", { style: { marginBottom: "20px" }, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("h3", { style: { fontSize: "0.875rem", fontWeight: 600, marginBottom: "8px" }, children: "Appearance" }),
       appearanceFields.map((field) => {
         const value = readAppearanceValue(node, field);
         const fieldLabel = field.label ?? field.key;
@@ -8044,8 +8193,8 @@ function NodeConfigPanel({
         };
         let control;
         if (field.kind === "boolean") {
-          control = /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)("label", { style: { fontSize: "0.75rem", display: "block" }, children: [
-            /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
+          control = /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)("label", { style: { fontSize: "0.75rem", display: "block" }, children: [
+            /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
               "input",
               {
                 type: "checkbox",
@@ -8057,28 +8206,28 @@ function NodeConfigPanel({
             fieldLabel
           ] });
         } else if (field.kind === "select") {
-          control = /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)(import_jsx_runtime22.Fragment, { children: [
-            /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)("label", { style: { fontSize: "0.75rem", display: "block", marginBottom: "4px" }, children: [
+          control = /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)(import_jsx_runtime23.Fragment, { children: [
+            /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)("label", { style: { fontSize: "0.75rem", display: "block", marginBottom: "4px" }, children: [
               fieldLabel,
               ":"
             ] }),
-            /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
+            /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
               "select",
               {
                 value: String(value),
                 onChange: (e) => onUpdateNode(writeAppearanceValue(node, field, e.target.value)),
                 style: inputStyle,
-                children: field.options?.map((opt) => /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("option", { value: opt, children: opt }, opt))
+                children: field.options?.map((opt) => /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("option", { value: opt, children: opt }, opt))
               }
             )
           ] });
         } else if (field.kind === "number") {
-          control = /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)(import_jsx_runtime22.Fragment, { children: [
-            /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)("label", { style: { fontSize: "0.75rem", display: "block", marginBottom: "4px" }, children: [
+          control = /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)(import_jsx_runtime23.Fragment, { children: [
+            /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)("label", { style: { fontSize: "0.75rem", display: "block", marginBottom: "4px" }, children: [
               fieldLabel,
               ":"
             ] }),
-            /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
+            /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
               "input",
               {
                 type: "number",
@@ -8093,12 +8242,12 @@ function NodeConfigPanel({
           const listId = `tags-${node.id}-${field.key}`;
           const known = tagValue.length > 0 && availableTags.includes(tagValue);
           const unknown = tagValue.length > 0 && !known;
-          control = /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)(import_jsx_runtime22.Fragment, { children: [
-            /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)("label", { style: { fontSize: "0.75rem", display: "block", marginBottom: "4px" }, children: [
+          control = /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)(import_jsx_runtime23.Fragment, { children: [
+            /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)("label", { style: { fontSize: "0.75rem", display: "block", marginBottom: "4px" }, children: [
               fieldLabel,
               ":"
             ] }),
-            /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
+            /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
               "input",
               {
                 type: "text",
@@ -8112,8 +8261,8 @@ function NodeConfigPanel({
                 }
               }
             ),
-            /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("datalist", { id: listId, children: availableTags.map((t) => /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("option", { value: t }, t)) }),
-            tagValue.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
+            /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("datalist", { id: listId, children: availableTags.map((t) => /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("option", { value: t }, t)) }),
+            tagValue.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
               "div",
               {
                 style: {
@@ -8126,12 +8275,12 @@ function NodeConfigPanel({
             )
           ] });
         } else {
-          control = /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)(import_jsx_runtime22.Fragment, { children: [
-            /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)("label", { style: { fontSize: "0.75rem", display: "block", marginBottom: "4px" }, children: [
+          control = /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)(import_jsx_runtime23.Fragment, { children: [
+            /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)("label", { style: { fontSize: "0.75rem", display: "block", marginBottom: "4px" }, children: [
               fieldLabel,
               ":"
             ] }),
-            /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
+            /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
               "input",
               {
                 type: "text",
@@ -8142,9 +8291,9 @@ function NodeConfigPanel({
             )
           ] });
         }
-        return /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)("div", { style: { marginBottom: "10px" }, children: [
+        return /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)("div", { style: { marginBottom: "10px" }, children: [
           control,
-          field.help && /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
+          field.help && /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
             "div",
             {
               style: {
@@ -8159,9 +8308,9 @@ function NodeConfigPanel({
         ] }, field.key);
       })
     ] }),
-    showGenericTelemetry && /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)("div", { style: { marginBottom: "20px" }, children: [
-      /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("h3", { style: { fontSize: "0.875rem", fontWeight: 600, marginBottom: "8px" }, children: "Telemetry Data" }),
-      !binding ? /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
+    showGenericTelemetry && /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)("div", { style: { marginBottom: "20px" }, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("h3", { style: { fontSize: "0.875rem", fontWeight: 600, marginBottom: "8px" }, children: "Telemetry Data" }),
+      !binding ? /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
         "button",
         {
           onClick: () => {
@@ -8204,9 +8353,9 @@ function NodeConfigPanel({
           },
           children: "+ Add Telemetry"
         }
-      ) : /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)(import_jsx_runtime22.Fragment, { children: [
-        /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("label", { style: { fontSize: "0.75rem", display: "block", marginBottom: "4px" }, children: "Tag (attribute):" }),
-        /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
+      ) : /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)(import_jsx_runtime23.Fragment, { children: [
+        /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("label", { style: { fontSize: "0.75rem", display: "block", marginBottom: "4px" }, children: "Tag (attribute):" }),
+        /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
           "input",
           {
             type: "text",
@@ -8226,8 +8375,8 @@ function NodeConfigPanel({
             }
           }
         ),
-        /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("label", { style: { fontSize: "0.75rem", display: "block", marginBottom: "4px" }, children: "Initial Value:" }),
-        /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("label", { style: { fontSize: "0.75rem", display: "block", marginBottom: "4px" }, children: "Initial Value:" }),
+        /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
           "input",
           {
             type: "number",
@@ -8249,8 +8398,8 @@ function NodeConfigPanel({
             }
           }
         ),
-        /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("label", { style: { fontSize: "0.75rem", display: "block", marginBottom: "4px" }, children: "Unit:" }),
-        /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("label", { style: { fontSize: "0.75rem", display: "block", marginBottom: "4px" }, children: "Unit:" }),
+        /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
           "input",
           {
             type: "text",
@@ -8272,8 +8421,8 @@ function NodeConfigPanel({
             }
           }
         ),
-        /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)("label", { style: { fontSize: "0.75rem", display: "block", marginBottom: "4px" }, children: [
-          /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)("label", { style: { fontSize: "0.75rem", display: "block", marginBottom: "4px" }, children: [
+          /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
             "input",
             {
               type: "checkbox",
@@ -8295,8 +8444,8 @@ function NodeConfigPanel({
           ),
           "Show Sparkline"
         ] }),
-        /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)("div", { style: { marginTop: "12px" }, children: [
-          /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)("div", { style: { marginTop: "12px" }, children: [
+          /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
             "label",
             {
               style: {
@@ -8308,10 +8457,10 @@ function NodeConfigPanel({
               children: "Telemetry Position Offset:"
             }
           ),
-          /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)("div", { style: { display: "grid", gridTemplateColumns: "1fr 1fr", gap: "8px" }, children: [
-            /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)("div", { children: [
-              /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("label", { style: { fontSize: "0.7rem", display: "block", marginBottom: "4px" }, children: "X Offset:" }),
-              /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
+          /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)("div", { style: { display: "grid", gridTemplateColumns: "1fr 1fr", gap: "8px" }, children: [
+            /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)("div", { children: [
+              /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("label", { style: { fontSize: "0.7rem", display: "block", marginBottom: "4px" }, children: "X Offset:" }),
+              /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
                 "input",
                 {
                   type: "number",
@@ -8338,9 +8487,9 @@ function NodeConfigPanel({
                 }
               )
             ] }),
-            /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)("div", { children: [
-              /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("label", { style: { fontSize: "0.7rem", display: "block", marginBottom: "4px" }, children: "Y Offset:" }),
-              /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
+            /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)("div", { children: [
+              /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("label", { style: { fontSize: "0.7rem", display: "block", marginBottom: "4px" }, children: "Y Offset:" }),
+              /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
                 "input",
                 {
                   type: "number",
@@ -8368,8 +8517,8 @@ function NodeConfigPanel({
               )
             ] })
           ] }),
-          /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)("div", { style: { marginTop: "16px" }, children: [
-            /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
+          /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)("div", { style: { marginTop: "16px" }, children: [
+            /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
               "label",
               {
                 style: {
@@ -8381,10 +8530,10 @@ function NodeConfigPanel({
                 children: "Display Colors:"
               }
             ),
-            /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)("div", { style: { marginBottom: "8px" }, children: [
-              /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("label", { style: { fontSize: "0.7rem", display: "block", marginBottom: "4px" }, children: "Text Color:" }),
-              /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)("div", { style: { display: "flex", gap: "8px", alignItems: "center" }, children: [
-                /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
+            /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)("div", { style: { marginBottom: "8px" }, children: [
+              /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("label", { style: { fontSize: "0.7rem", display: "block", marginBottom: "4px" }, children: "Text Color:" }),
+              /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)("div", { style: { display: "flex", gap: "8px", alignItems: "center" }, children: [
+                /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
                   "input",
                   {
                     type: "color",
@@ -8410,7 +8559,7 @@ function NodeConfigPanel({
                     }
                   }
                 ),
-                /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
+                /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
                   "input",
                   {
                     type: "text",
@@ -8440,10 +8589,10 @@ function NodeConfigPanel({
                 )
               ] })
             ] }),
-            binding.display?.showSparkline && /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)("div", { style: { marginBottom: "8px" }, children: [
-              /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("label", { style: { fontSize: "0.7rem", display: "block", marginBottom: "4px" }, children: "Sparkline Color:" }),
-              /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)("div", { style: { display: "flex", gap: "8px", alignItems: "center" }, children: [
-                /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
+            binding.display?.showSparkline && /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)("div", { style: { marginBottom: "8px" }, children: [
+              /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("label", { style: { fontSize: "0.7rem", display: "block", marginBottom: "4px" }, children: "Sparkline Color:" }),
+              /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)("div", { style: { display: "flex", gap: "8px", alignItems: "center" }, children: [
+                /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
                   "input",
                   {
                     type: "color",
@@ -8469,7 +8618,7 @@ function NodeConfigPanel({
                     }
                   }
                 ),
-                /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
+                /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
                   "input",
                   {
                     type: "text",
@@ -8499,9 +8648,9 @@ function NodeConfigPanel({
                 )
               ] })
             ] }),
-            /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)("div", { style: { marginBottom: "8px" }, children: [
-              /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("label", { style: { fontSize: "0.7rem", display: "block", marginBottom: "4px" }, children: "Background:" }),
-              /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
+            /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)("div", { style: { marginBottom: "8px" }, children: [
+              /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("label", { style: { fontSize: "0.7rem", display: "block", marginBottom: "4px" }, children: "Background:" }),
+              /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
                 "input",
                 {
                   type: "text",
@@ -8529,12 +8678,12 @@ function NodeConfigPanel({
                   }
                 }
               ),
-              /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("div", { style: { fontSize: "0.65rem", color: "#6b7280", marginTop: "2px" }, children: "Use 'status' for status-based color or hex code" })
+              /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("div", { style: { fontSize: "0.65rem", color: "#6b7280", marginTop: "2px" }, children: "Use 'status' for status-based color or hex code" })
             ] })
           ] }),
           " "
         ] }),
-        onRemoveTelemetry && /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
+        onRemoveTelemetry && /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
           "button",
           {
             onClick: onRemoveTelemetry,
@@ -8554,13 +8703,13 @@ function NodeConfigPanel({
         )
       ] })
     ] }),
-    showGenericTelemetry && binding && /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)("div", { style: { marginBottom: "20px" }, children: [
-      /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("h3", { style: { fontSize: "0.875rem", fontWeight: 600, marginBottom: "8px" }, children: "Thresholds" }),
+    showGenericTelemetry && binding && /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)("div", { style: { marginBottom: "20px" }, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("h3", { style: { fontSize: "0.875rem", fontWeight: 600, marginBottom: "8px" }, children: "Thresholds" }),
       ["highHigh", "high", "low", "lowLow"].map((key) => {
         const label = key === "highHigh" ? "High-High (\u2265)" : key === "high" ? "High (\u2265)" : key === "low" ? "Low (\u2264)" : "Low-Low (\u2264)";
-        return /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)("div", { style: { marginBottom: "8px" }, children: [
-          /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("label", { style: { fontSize: "0.75rem", display: "block", marginBottom: "4px" }, children: label }),
-          /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
+        return /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)("div", { style: { marginBottom: "8px" }, children: [
+          /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("label", { style: { fontSize: "0.75rem", display: "block", marginBottom: "4px" }, children: label }),
+          /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
             "input",
             {
               type: "number",
@@ -8584,8 +8733,8 @@ function NodeConfigPanel({
         ] }, key);
       })
     ] }),
-    showGenericTelemetry && binding && /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)("div", { style: { marginBottom: "20px" }, children: [
-      /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("h3", { style: { fontSize: "0.875rem", fontWeight: 600, marginBottom: "8px" }, children: "Status Colors" }),
+    showGenericTelemetry && binding && /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)("div", { style: { marginBottom: "20px" }, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("h3", { style: { fontSize: "0.875rem", fontWeight: 600, marginBottom: "8px" }, children: "Status Colors" }),
       ["normal", "warning", "alarm", "fault", "off"].map((status) => {
         const defaultColors = {
           normal: "#10b981",
@@ -8595,13 +8744,13 @@ function NodeConfigPanel({
           off: "#6b7280"
         };
         const label = status === "normal" ? "Normal" : status === "warning" ? "Warning" : status === "alarm" ? "Alarm" : status === "fault" ? "Fault" : "Off";
-        return /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)("div", { style: { marginBottom: "8px" }, children: [
-          /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)("label", { style: { fontSize: "0.75rem", display: "block", marginBottom: "4px" }, children: [
+        return /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)("div", { style: { marginBottom: "8px" }, children: [
+          /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)("label", { style: { fontSize: "0.75rem", display: "block", marginBottom: "4px" }, children: [
             label,
             ":"
           ] }),
-          /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)("div", { style: { display: "flex", gap: "8px", alignItems: "center" }, children: [
-            /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
+          /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)("div", { style: { display: "flex", gap: "8px", alignItems: "center" }, children: [
+            /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
               "input",
               {
                 type: "color",
@@ -8622,7 +8771,7 @@ function NodeConfigPanel({
                 }
               }
             ),
-            /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
+            /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
               "input",
               {
                 type: "text",
@@ -8649,7 +8798,7 @@ function NodeConfigPanel({
         ] }, status);
       })
     ] }),
-    /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("div", { style: { marginTop: "20px", paddingTop: "20px", borderTop: "1px solid #cbd5e1" }, children: /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
+    /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("div", { style: { marginTop: "20px", paddingTop: "20px", borderTop: "1px solid #cbd5e1" }, children: /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
       "button",
       {
         onClick: onRemove,
@@ -8926,13 +9075,13 @@ function createControlBinding(nodeId, deviceConfig, actions) {
 }
 
 // src/hooks/useDeviceControls.ts
-var import_react23 = require("react");
+var import_react24 = require("react");
 function commandKey(nodeId, kind, suffix) {
   return suffix ? `${nodeId}:${kind}:${suffix}` : `${nodeId}:${kind}`;
 }
 function useDeviceControls(initialBindings, options) {
   const { commandTimeoutMs } = options ?? {};
-  const [controls, setControls] = (0, import_react23.useState)(() => {
+  const [controls, setControls] = (0, import_react24.useState)(() => {
     const map = /* @__PURE__ */ new Map();
     if (initialBindings) {
       initialBindings.forEach((binding) => {
@@ -8941,12 +9090,12 @@ function useDeviceControls(initialBindings, options) {
     }
     return map;
   });
-  const pendingRef = (0, import_react23.useRef)(/* @__PURE__ */ new Map());
-  const [pendingCommands, setPendingCommands] = (0, import_react23.useState)(() => /* @__PURE__ */ new Set());
-  const syncPending = (0, import_react23.useCallback)(() => {
+  const pendingRef = (0, import_react24.useRef)(/* @__PURE__ */ new Map());
+  const [pendingCommands, setPendingCommands] = (0, import_react24.useState)(() => /* @__PURE__ */ new Set());
+  const syncPending = (0, import_react24.useCallback)(() => {
     setPendingCommands(new Set(pendingRef.current.keys()));
   }, []);
-  const updateControl = (0, import_react23.useCallback)((nodeId, updates) => {
+  const updateControl = (0, import_react24.useCallback)((nodeId, updates) => {
     setControls((prev) => {
       const newMap = new Map(prev);
       const existing = newMap.get(nodeId);
@@ -8960,7 +9109,7 @@ function useDeviceControls(initialBindings, options) {
       return newMap;
     });
   }, []);
-  const updateControlBatch = (0, import_react23.useCallback)((updates) => {
+  const updateControlBatch = (0, import_react24.useCallback)((updates) => {
     setControls((prev) => {
       const newMap = new Map(prev);
       Object.entries(updates).forEach(([nodeId, update]) => {
@@ -8972,7 +9121,7 @@ function useDeviceControls(initialBindings, options) {
       return newMap;
     });
   }, []);
-  const updateDeviceState = (0, import_react23.useCallback)(
+  const updateDeviceState = (0, import_react24.useCallback)(
     (nodeId, stateUpdates) => {
       setControls((prev) => {
         const newMap = new Map(prev);
@@ -8988,7 +9137,7 @@ function useDeviceControls(initialBindings, options) {
     },
     []
   );
-  const updateParameter = (0, import_react23.useCallback)(
+  const updateParameter = (0, import_react24.useCallback)(
     (nodeId, parameterId, value) => {
       setControls((prev) => {
         const newMap = new Map(prev);
@@ -9015,27 +9164,27 @@ function useDeviceControls(initialBindings, options) {
     },
     []
   );
-  const setControlBinding = (0, import_react23.useCallback)((binding) => {
+  const setControlBinding = (0, import_react24.useCallback)((binding) => {
     setControls((prev) => {
       const newMap = new Map(prev);
       newMap.set(binding.nodeId, binding);
       return newMap;
     });
   }, []);
-  const removeControlBinding = (0, import_react23.useCallback)((nodeId) => {
+  const removeControlBinding = (0, import_react24.useCallback)((nodeId) => {
     setControls((prev) => {
       const newMap = new Map(prev);
       newMap.delete(nodeId);
       return newMap;
     });
   }, []);
-  const getControlBinding = (0, import_react23.useCallback)(
+  const getControlBinding = (0, import_react24.useCallback)(
     (nodeId) => {
       return controls.get(nodeId);
     },
     [controls]
   );
-  const isCommandPending = (0, import_react23.useCallback)(
+  const isCommandPending = (0, import_react24.useCallback)(
     (nodeId, kind) => {
       if (kind) {
         const prefix2 = `${nodeId}:${kind}`;
@@ -9052,7 +9201,7 @@ function useDeviceControls(initialBindings, options) {
     },
     [pendingCommands]
   );
-  const markPending = (0, import_react23.useCallback)(
+  const markPending = (0, import_react24.useCallback)(
     (key, delta) => {
       const next = (pendingRef.current.get(key) ?? 0) + delta;
       if (next > 0) pendingRef.current.set(key, next);
@@ -9061,7 +9210,7 @@ function useDeviceControls(initialBindings, options) {
     },
     [syncPending]
   );
-  const runCommand = (0, import_react23.useCallback)(
+  const runCommand = (0, import_react24.useCallback)(
     async (nodeId, key, invoke, messages) => {
       const binding = controls.get(nodeId);
       if (!binding) return;
@@ -9101,7 +9250,7 @@ function useDeviceControls(initialBindings, options) {
     },
     [controls, updateDeviceState, markPending, commandTimeoutMs]
   );
-  const sendModeChange = (0, import_react23.useCallback)(
+  const sendModeChange = (0, import_react24.useCallback)(
     (nodeId, mode) => runCommand(
       nodeId,
       commandKey(nodeId, "mode"),
@@ -9110,7 +9259,7 @@ function useDeviceControls(initialBindings, options) {
     ),
     [runCommand]
   );
-  const sendParameterChange = (0, import_react23.useCallback)(
+  const sendParameterChange = (0, import_react24.useCallback)(
     (nodeId, parameterId, value) => runCommand(
       nodeId,
       commandKey(nodeId, "parameter", parameterId),
@@ -9119,21 +9268,21 @@ function useDeviceControls(initialBindings, options) {
     ),
     [runCommand]
   );
-  const sendStartCommand = (0, import_react23.useCallback)(
+  const sendStartCommand = (0, import_react24.useCallback)(
     (nodeId) => runCommand(nodeId, commandKey(nodeId, "start"), (binding) => binding.actions.onStart?.(), {
       success: "Start command sent",
       failure: "Start command failed"
     }),
     [runCommand]
   );
-  const sendStopCommand = (0, import_react23.useCallback)(
+  const sendStopCommand = (0, import_react24.useCallback)(
     (nodeId) => runCommand(nodeId, commandKey(nodeId, "stop"), (binding) => binding.actions.onStop?.(), {
       success: "Stop command sent",
       failure: "Stop command failed"
     }),
     [runCommand]
   );
-  const sendCustomAction = (0, import_react23.useCallback)(
+  const sendCustomAction = (0, import_react24.useCallback)(
     (nodeId, actionId) => runCommand(
       nodeId,
       commandKey(nodeId, "action", actionId),
@@ -9186,9 +9335,9 @@ function createConfigBinding(nodeId, tag, parameters, actions, options) {
 }
 
 // src/hooks/useDeviceConfigs.ts
-var import_react24 = require("react");
+var import_react25 = require("react");
 function useDeviceConfigs(initialConfigs) {
-  const [configs, setConfigs] = (0, import_react24.useState)(() => {
+  const [configs, setConfigs] = (0, import_react25.useState)(() => {
     const map = /* @__PURE__ */ new Map();
     if (initialConfigs) {
       initialConfigs.forEach((config) => {
@@ -9197,13 +9346,13 @@ function useDeviceConfigs(initialConfigs) {
     }
     return map;
   });
-  const getConfig = (0, import_react24.useCallback)(
+  const getConfig = (0, import_react25.useCallback)(
     (nodeId) => {
       return configs.get(nodeId);
     },
     [configs]
   );
-  const updateConfig = (0, import_react24.useCallback)((nodeId, updates) => {
+  const updateConfig = (0, import_react25.useCallback)((nodeId, updates) => {
     setConfigs((prev) => {
       const newMap = new Map(prev);
       const existing = newMap.get(nodeId);
@@ -9217,7 +9366,7 @@ function useDeviceConfigs(initialConfigs) {
       return newMap;
     });
   }, []);
-  const updateConfigState = (0, import_react24.useCallback)((nodeId, stateUpdates) => {
+  const updateConfigState = (0, import_react25.useCallback)((nodeId, stateUpdates) => {
     setConfigs((prev) => {
       const newMap = new Map(prev);
       const existing = newMap.get(nodeId);
@@ -9230,7 +9379,7 @@ function useDeviceConfigs(initialConfigs) {
       return newMap;
     });
   }, []);
-  const updateConfigBatch = (0, import_react24.useCallback)((updates) => {
+  const updateConfigBatch = (0, import_react25.useCallback)((updates) => {
     setConfigs((prev) => {
       const newMap = new Map(prev);
       Object.entries(updates).forEach(([nodeId, update]) => {
@@ -9242,7 +9391,7 @@ function useDeviceConfigs(initialConfigs) {
       return newMap;
     });
   }, []);
-  const updateParameterValue = (0, import_react24.useCallback)((nodeId, parameterId, value) => {
+  const updateParameterValue = (0, import_react25.useCallback)((nodeId, parameterId, value) => {
     setConfigs((prev) => {
       const newMap = new Map(prev);
       const existing = newMap.get(nodeId);
@@ -9259,7 +9408,7 @@ function useDeviceConfigs(initialConfigs) {
       return newMap;
     });
   }, []);
-  const applyConfig = (0, import_react24.useCallback)(
+  const applyConfig = (0, import_react25.useCallback)(
     async (nodeId) => {
       const config = configs.get(nodeId);
       if (!config || !config.actions.onApply) {
@@ -9292,7 +9441,7 @@ function useDeviceConfigs(initialConfigs) {
     },
     [configs, updateConfigState]
   );
-  const saveConfig = (0, import_react24.useCallback)(
+  const saveConfig = (0, import_react25.useCallback)(
     async (nodeId) => {
       const config = configs.get(nodeId);
       if (!config || !config.actions.onSave) {
@@ -9326,7 +9475,7 @@ function useDeviceConfigs(initialConfigs) {
     },
     [configs, updateConfigState]
   );
-  const resetConfig = (0, import_react24.useCallback)(
+  const resetConfig = (0, import_react25.useCallback)(
     async (nodeId) => {
       const config = configs.get(nodeId);
       if (!config) {
@@ -9356,7 +9505,7 @@ function useDeviceConfigs(initialConfigs) {
     },
     [configs, updateConfig, updateConfigState]
   );
-  const cancelConfig = (0, import_react24.useCallback)(
+  const cancelConfig = (0, import_react25.useCallback)(
     (nodeId) => {
       const config = configs.get(nodeId);
       if (config?.actions.onCancel) {
@@ -9365,7 +9514,7 @@ function useDeviceConfigs(initialConfigs) {
     },
     [configs]
   );
-  const validateConfig = (0, import_react24.useCallback)(
+  const validateConfig = (0, import_react25.useCallback)(
     (nodeId) => {
       const config = configs.get(nodeId);
       if (!config) {
@@ -9407,21 +9556,21 @@ function useDeviceConfigs(initialConfigs) {
     },
     [configs, updateConfigState]
   );
-  const setConfig = (0, import_react24.useCallback)((config) => {
+  const setConfig = (0, import_react25.useCallback)((config) => {
     setConfigs((prev) => {
       const newMap = new Map(prev);
       newMap.set(config.nodeId, config);
       return newMap;
     });
   }, []);
-  const removeConfig = (0, import_react24.useCallback)((nodeId) => {
+  const removeConfig = (0, import_react25.useCallback)((nodeId) => {
     setConfigs((prev) => {
       const newMap = new Map(prev);
       newMap.delete(nodeId);
       return newMap;
     });
   }, []);
-  const clearConfigs = (0, import_react24.useCallback)(() => {
+  const clearConfigs = (0, import_react25.useCallback)(() => {
     setConfigs(/* @__PURE__ */ new Map());
   }, []);
   return {
@@ -9443,8 +9592,8 @@ function useDeviceConfigs(initialConfigs) {
 }
 
 // src/components/DeviceConfigPanel/DeviceConfigPanel.tsx
-var import_react25 = __toESM(require("react"), 1);
-var import_jsx_runtime23 = require("react/jsx-runtime");
+var import_react26 = __toESM(require("react"), 1);
+var import_jsx_runtime24 = require("react/jsx-runtime");
 function DeviceConfigPanelImpl({
   binding,
   onClose,
@@ -9463,7 +9612,7 @@ function DeviceConfigPanelImpl({
   showBuiltInToast = true,
   embedded = false
 }) {
-  const [localValues, setLocalValues] = (0, import_react25.useState)(() => {
+  const [localValues, setLocalValues] = (0, import_react26.useState)(() => {
     if (binding) {
       const values = {};
       binding.parameters.forEach((param) => {
@@ -9473,7 +9622,7 @@ function DeviceConfigPanelImpl({
     }
     return {};
   });
-  const [collapsedSections, setCollapsedSections] = (0, import_react25.useState)(() => {
+  const [collapsedSections, setCollapsedSections] = (0, import_react26.useState)(() => {
     const collapsed = /* @__PURE__ */ new Set();
     if (binding?.sections) {
       binding.sections.forEach((section) => {
@@ -9484,9 +9633,9 @@ function DeviceConfigPanelImpl({
     }
     return collapsed;
   });
-  const [showToast, setShowToast] = (0, import_react25.useState)(true);
-  const [bindingId, setBindingId] = (0, import_react25.useState)(binding?.nodeId || null);
-  const lastResultTimestampRef = (0, import_react25.useRef)(0);
+  const [showToast, setShowToast] = (0, import_react26.useState)(true);
+  const [bindingId, setBindingId] = (0, import_react26.useState)(binding?.nodeId || null);
+  const lastResultTimestampRef = (0, import_react26.useRef)(0);
   if (binding && binding.nodeId !== bindingId) {
     const values = {};
     binding.parameters.forEach((param) => {
@@ -9502,7 +9651,7 @@ function DeviceConfigPanelImpl({
     setCollapsedSections(collapsed);
     setBindingId(binding.nodeId);
   }
-  (0, import_react25.useEffect)(() => {
+  (0, import_react26.useEffect)(() => {
     const currentTimestamp = binding?.state.lastSaved || 0;
     if (binding?.state.lastSaveResult && currentTimestamp !== lastResultTimestampRef.current) {
       lastResultTimestampRef.current = currentTimestamp;
@@ -9519,7 +9668,7 @@ function DeviceConfigPanelImpl({
       };
     }
   }, [binding?.state.lastSaveResult, binding?.state.lastSaved, toastDuration]);
-  const parametersBySection = (0, import_react25.useMemo)(() => {
+  const parametersBySection = (0, import_react26.useMemo)(() => {
     if (!binding) return { _unsectioned: [] };
     const groups = { _unsectioned: [] };
     binding.parameters.forEach((param) => {
@@ -9534,7 +9683,7 @@ function DeviceConfigPanelImpl({
     });
     return groups;
   }, [binding]);
-  const sortedSections = (0, import_react25.useMemo)(() => {
+  const sortedSections = (0, import_react26.useMemo)(() => {
     if (!binding?.sections) return [];
     return [...binding.sections].sort((a, b) => (a.order || 0) - (b.order || 0));
   }, [binding]);
@@ -9610,14 +9759,14 @@ function DeviceConfigPanelImpl({
     const value = localValues[param.id];
     const error = binding.state.errors?.[param.id];
     const isDisabled = param.readOnly || param.enabled === false;
-    return /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)(
+    return /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)(
       "div",
       {
         style: {
           marginBottom: spacing.marginBottom
         },
         children: [
-          /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)(
+          /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)(
             "label",
             {
               style: {
@@ -9632,13 +9781,13 @@ function DeviceConfigPanelImpl({
               },
               children: [
                 param.label,
-                param.required && /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("span", { style: { color: errorColor }, children: " *" }),
-                param.unit && /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)("span", { style: { color: mutedTextColor, fontWeight: "normal" }, children: [
+                param.required && /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("span", { style: { color: errorColor }, children: " *" }),
+                param.unit && /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)("span", { style: { color: mutedTextColor, fontWeight: "normal" }, children: [
                   " (",
                   param.unit,
                   ")"
                 ] }),
-                param.forced?.active && /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
+                param.forced?.active && /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
                   "span",
                   {
                     "aria-label": "Forced",
@@ -9665,7 +9814,7 @@ function DeviceConfigPanelImpl({
               ]
             }
           ),
-          param.forced?.active && param.forced.realValue !== void 0 && /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)(
+          param.forced?.active && param.forced.realValue !== void 0 && /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)(
             "div",
             {
               style: {
@@ -9683,7 +9832,7 @@ function DeviceConfigPanelImpl({
               ]
             }
           ),
-          param.description && /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
+          param.description && /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
             "div",
             {
               style: {
@@ -9695,7 +9844,7 @@ function DeviceConfigPanelImpl({
               children: param.description
             }
           ),
-          param.type === "number" && /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
+          param.type === "number" && /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
             "input",
             {
               type: "number",
@@ -9719,7 +9868,7 @@ function DeviceConfigPanelImpl({
               }
             }
           ),
-          param.type === "string" && /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
+          param.type === "string" && /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
             "input",
             {
               type: "text",
@@ -9740,7 +9889,7 @@ function DeviceConfigPanelImpl({
               }
             }
           ),
-          param.type === "boolean" && /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)(
+          param.type === "boolean" && /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)(
             "label",
             {
               style: {
@@ -9750,7 +9899,7 @@ function DeviceConfigPanelImpl({
                 cursor: isDisabled ? "not-allowed" : "pointer"
               },
               children: [
-                /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
+                /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
                   "input",
                   {
                     type: "checkbox",
@@ -9764,11 +9913,11 @@ function DeviceConfigPanelImpl({
                     }
                   }
                 ),
-                /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("span", { style: { fontSize: `${fontSize.value}px`, color: textColor }, children: value ? "Enabled" : "Disabled" })
+                /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("span", { style: { fontSize: `${fontSize.value}px`, color: textColor }, children: value ? "Enabled" : "Disabled" })
               ]
             }
           ),
-          param.type === "select" && /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
+          param.type === "select" && /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
             "select",
             {
               value: value ?? "",
@@ -9786,10 +9935,10 @@ function DeviceConfigPanelImpl({
                 borderRadius: "2px",
                 outline: "none"
               },
-              children: param.options?.map((option) => /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("option", { value: option.value, children: option.label }, option.value))
+              children: param.options?.map((option) => /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("option", { value: option.value, children: option.label }, option.value))
             }
           ),
-          error && /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
+          error && /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
             "div",
             {
               style: {
@@ -9809,7 +9958,7 @@ function DeviceConfigPanelImpl({
   const renderSection = (section) => {
     const params = parametersBySection[section.id] || [];
     const isCollapsed = collapsedSections.has(section.id);
-    return /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)(
+    return /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)(
       "div",
       {
         style: {
@@ -9819,7 +9968,7 @@ function DeviceConfigPanelImpl({
           backgroundColor: surfaceColor
         },
         children: [
-          /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)(
+          /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)(
             "div",
             {
               onClick: () => section.collapsible && toggleSection(section.id),
@@ -9832,8 +9981,8 @@ function DeviceConfigPanelImpl({
                 alignItems: "center"
               },
               children: [
-                /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)("div", { children: [
-                  /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)(
+                /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)("div", { children: [
+                  /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)(
                     "div",
                     {
                       style: {
@@ -9845,12 +9994,12 @@ function DeviceConfigPanelImpl({
                         letterSpacing: "0.5px"
                       },
                       children: [
-                        section.icon && /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("span", { style: { marginRight: "8px" }, children: section.icon }),
+                        section.icon && /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("span", { style: { marginRight: "8px" }, children: section.icon }),
                         section.title
                       ]
                     }
                   ),
-                  section.description && /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
+                  section.description && /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
                     "div",
                     {
                       style: {
@@ -9863,11 +10012,11 @@ function DeviceConfigPanelImpl({
                     }
                   )
                 ] }),
-                section.collapsible && /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("span", { style: { fontSize: "16px", color: mutedTextColor }, children: isCollapsed ? "\u25BC" : "\u25B2" })
+                section.collapsible && /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("span", { style: { fontSize: "16px", color: mutedTextColor }, children: isCollapsed ? "\u25BC" : "\u25B2" })
               ]
             }
           ),
-          !isCollapsed && /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("div", { style: { padding: spacing.padding }, children: params.map(renderParameter) })
+          !isCollapsed && /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("div", { style: { padding: spacing.padding }, children: params.map(renderParameter) })
         ]
       },
       section.id
@@ -9926,9 +10075,9 @@ function DeviceConfigPanelImpl({
   const showSave = binding.display?.showSave !== false && binding.actions.onSave;
   const showReset = binding.display?.showReset !== false && binding.actions.onReset;
   const showCancel = binding.display?.showCancel !== false;
-  return /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)(import_jsx_runtime23.Fragment, { children: [
-    /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)("div", { style: panelStyle, className: binding.display?.className, children: [
-      /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)(import_jsx_runtime24.Fragment, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)("div", { style: panelStyle, className: binding.display?.className, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)(
         "div",
         {
           style: {
@@ -9940,8 +10089,8 @@ function DeviceConfigPanelImpl({
             borderBottom: `2px solid ${borderColor}`
           },
           children: [
-            /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)("div", { children: [
-              /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
+            /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)("div", { children: [
+              /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
                 "h3",
                 {
                   style: {
@@ -9961,7 +10110,7 @@ function DeviceConfigPanelImpl({
                   children: titleText.length > 25 ? titleText.slice(0, 25) + "..." : titleText
                 }
               ),
-              binding.display?.subtitle && /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
+              binding.display?.subtitle && /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
                 "div",
                 {
                   style: {
@@ -9974,8 +10123,8 @@ function DeviceConfigPanelImpl({
                 }
               )
             ] }),
-            /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)("div", { style: { display: "flex", gap: "8px" }, children: [
-              showControlsButton && onOpenControls && /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
+            /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)("div", { style: { display: "flex", gap: "8px" }, children: [
+              showControlsButton && onOpenControls && /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
                 "button",
                 {
                   onClick: onOpenControls,
@@ -9998,7 +10147,7 @@ function DeviceConfigPanelImpl({
                   children: "CTRL"
                 }
               ),
-              onUndock && /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
+              onUndock && /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
                 "button",
                 {
                   onClick: onUndock,
@@ -10019,7 +10168,7 @@ function DeviceConfigPanelImpl({
                   children: undockIcon
                 }
               ),
-              /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
+              /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
                 "button",
                 {
                   onClick: onClose,
@@ -10042,7 +10191,7 @@ function DeviceConfigPanelImpl({
           ]
         }
       ),
-      binding.state.isDirty && /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
+      binding.state.isDirty && /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
         "div",
         {
           style: {
@@ -10057,11 +10206,11 @@ function DeviceConfigPanelImpl({
           children: "Unsaved changes"
         }
       ),
-      /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("div", { style: { flex: 1, overflowY: "auto", marginBottom: spacing.marginBottom }, children: sortedSections.length > 0 ? sortedSections.map(renderSection) : (
+      /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("div", { style: { flex: 1, overflowY: "auto", marginBottom: spacing.marginBottom }, children: sortedSections.length > 0 ? sortedSections.map(renderSection) : (
         /* Render unsectioned parameters */
-        /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("div", { children: parametersBySection._unsectioned?.map(renderParameter) })
+        /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("div", { children: parametersBySection._unsectioned?.map(renderParameter) })
       ) }),
-      /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)(
+      /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)(
         "div",
         {
           style: {
@@ -10072,7 +10221,7 @@ function DeviceConfigPanelImpl({
             flexWrap: "wrap"
           },
           children: [
-            showApply && /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
+            showApply && /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
               "button",
               {
                 onClick: handleApply,
@@ -10095,7 +10244,7 @@ function DeviceConfigPanelImpl({
                 children: binding.state.isSaving ? "Applying..." : "Apply"
               }
             ),
-            showSave && /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
+            showSave && /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
               "button",
               {
                 onClick: handleSave,
@@ -10118,7 +10267,7 @@ function DeviceConfigPanelImpl({
                 children: binding.state.isSaving ? "Saving..." : "Save"
               }
             ),
-            showReset && /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
+            showReset && /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
               "button",
               {
                 onClick: handleReset,
@@ -10141,7 +10290,7 @@ function DeviceConfigPanelImpl({
                 children: "Reset"
               }
             ),
-            showCancel && /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
+            showCancel && /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
               "button",
               {
                 onClick: handleCancel,
@@ -10168,7 +10317,7 @@ function DeviceConfigPanelImpl({
         }
       )
     ] }),
-    binding.state.lastSaveResult && showToast && showBuiltInToast && /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
+    binding.state.lastSaveResult && showToast && showBuiltInToast && /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
       "div",
       {
         style: {
@@ -10190,10 +10339,10 @@ function DeviceConfigPanelImpl({
     )
   ] });
 }
-var DeviceConfigPanel = import_react25.default.memo(DeviceConfigPanelImpl);
+var DeviceConfigPanel = import_react26.default.memo(DeviceConfigPanelImpl);
 
 // src/diagram/hooks/useSimulation.ts
-var import_react26 = require("react");
+var import_react27 = require("react");
 function useSimulation(telemetry, updateTelemetryBatch, options = {}) {
   const {
     interval = 2e3,
@@ -10204,7 +10353,7 @@ function useSimulation(telemetry, updateTelemetryBatch, options = {}) {
     historyLength = 10,
     generateValue
   } = options;
-  (0, import_react26.useEffect)(() => {
+  (0, import_react27.useEffect)(() => {
     if (!enabled) return;
     const intervalId = setInterval(() => {
       const updates = [];
@@ -10274,6 +10423,8 @@ function useSimulation(telemetry, updateTelemetryBatch, options = {}) {
   FooterPanel,
   FullscreenContainer,
   FullscreenWorkspace,
+  ISA_UNKNOWN,
+  ISA_UNKNOWN_DARK,
   LeftPanel,
   LeftToggleButton,
   LegacyValueEntry,
@@ -10296,8 +10447,9 @@ function useSimulation(telemetry, updateTelemetryBatch, options = {}) {
   ThemeProvider,
   ThemeToggle,
   TrendLine,
-  UNKNOWN_MARK_COLOR,
-  UNKNOWN_MARK_COLOR_DARK,
+  UNKNOWN_GLYPH_RING_DASH,
+  UNKNOWN_STATUS_GLYPH_COLOR_VAR,
+  UnknownStatusGlyph,
   ValueEntry,
   ZoomButton,
   ZoomControls,
@@ -10315,6 +10467,7 @@ function useSimulation(telemetry, updateTelemetryBatch, options = {}) {
   importDiagram,
   mockSymbolLibrary,
   nodeHasPort,
+  normalizeDeviceStatus,
   overlayStyles,
   readAppearanceValue,
   registerSymbol,