@procaaso/alphinity-ui-components 1.9.0 → 1.11.0

package/dist/index.cjs

@@ -31,6 +31,7 @@ var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: tru
 var index_exports = {};
 __export(index_exports, {
   Button: () => Button,
+  COLOR_PRESETS: () => COLOR_PRESETS,
   CardHeader: () => CardHeader,
   CardUnit: () => CardUnit,
   CardValue: () => CardValue,
@@ -44,6 +45,7 @@ __export(index_exports, {
   DisplayModeToggle: () => DisplayModeToggle,
   EquipmentIndicator: () => EquipmentIndicator,
   EquipmentIndicatorWithSparkline: () => EquipmentIndicatorWithSparkline,
+  FORCED_MARK_COLOR: () => FORCED_MARK_COLOR,
   FixedSVGContainer: () => FixedSVGContainer,
   FooterPanel: () => FooterPanel,
   FullscreenContainer: () => FullscreenContainer,
@@ -59,6 +61,7 @@ __export(index_exports, {
   PanelTabs: () => PanelTabs,
   RightPanel: () => RightPanel,
   RightToggleButton: () => RightToggleButton,
+  STATUS_LED_APPEARANCE: () => STATUS_LED_APPEARANCE,
   SVGArea: () => SVGArea,
   SVGLockedOverlay: () => SVGLockedOverlay,
   ScrollableSVGWrapper: () => ScrollableSVGWrapper,
@@ -69,6 +72,8 @@ __export(index_exports, {
   ThemeProvider: () => ThemeProvider,
   ThemeToggle: () => ThemeToggle,
   TrendLine: () => TrendLine,
+  UNKNOWN_MARK_COLOR: () => UNKNOWN_MARK_COLOR,
+  UNKNOWN_MARK_COLOR_DARK: () => UNKNOWN_MARK_COLOR_DARK,
   ValueEntry: () => ValueEntry,
   ZoomButton: () => ZoomButton,
   ZoomControls: () => ZoomControls,
@@ -78,6 +83,8 @@ __export(index_exports, {
   exampleDiagram: () => exampleDiagram,
   exportDiagram: () => exportDiagram,
   generateRoutePoints: () => generateRoutePoints,
+  getAppearanceDefaults: () => getAppearanceDefaults,
+  getAppearanceSchema: () => getAppearanceSchema,
   getAvailableSymbols: () => getAvailableSymbols,
   getPortWorldPosition: () => getPortWorldPosition,
   getSymbolDefinition: () => getSymbolDefinition,
@@ -85,9 +92,12 @@ __export(index_exports, {
   mockSymbolLibrary: () => mockSymbolLibrary,
   nodeHasPort: () => nodeHasPort,
   overlayStyles: () => overlayStyles,
+  readAppearanceValue: () => readAppearanceValue,
   registerSymbol: () => registerSymbol,
   registerSymbols: () => registerSymbols,
+  resolvePresetColor: () => resolvePresetColor,
   resolveStatusColor: () => resolveStatusColor,
+  useBooleanIndicators: () => useBooleanIndicators,
   useDeviceConfigs: () => useDeviceConfigs,
   useDeviceControls: () => useDeviceControls,
   useDrag: () => useDrag,
@@ -98,7 +108,8 @@ __export(index_exports, {
   useTelemetryStatus: () => useTelemetryStatus,
   useTheme: () => useTheme,
   useViewBox: () => useViewBox,
-  validateDiagram: () => validateDiagram
+  validateDiagram: () => validateDiagram,
+  writeAppearanceValue: () => writeAppearanceValue
 });
 module.exports = __toCommonJS(index_exports);
 
@@ -278,6 +289,8 @@ var ValueEntry = ({
   inputType = "numeric",
   label,
   readOnly = false,
+  forced = false,
+  realValue,
   className = "",
   disabled,
   ...props
@@ -328,9 +341,14 @@ var ValueEntry = ({
   const unitClass = unit ? "ui-value-entry--with-unit" : "";
   const currentStatus = disabled || readOnly ? "disabled" : status;
   const statusVariantClass = currentStatus ? `ui-value-entry--${currentStatus}` : "";
+  const forcedClass = forced ? "ui-value-entry--forced" : "";
+  const hasRealValue = forced && realValue !== void 0;
   const displayText = isEditing ? displayValue : inputType === "numeric" ? Number(value).toFixed(precision) : String(value);
   return /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { className: "ui-value-entry-container", children: [
-    label && /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("label", { className: "ui-value-entry-label", children: label }),
+    label && /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("label", { className: "ui-value-entry-label", children: [
+      label,
+      forced && /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("span", { className: "ui-value-entry-forced-badge", "aria-label": "Forced", children: "F" })
+    ] }),
     /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { className: "ui-value-entry-wrapper", children: [
       /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
         "input",
@@ -343,19 +361,71 @@ var ValueEntry = ({
           onKeyDown: handleKeyDown,
           disabled,
           readOnly,
-          className: `${baseClass} ${statusVariantClass} ${unitClass} ${className}`.trim(),
+          className: `${baseClass} ${statusVariantClass} ${forcedClass} ${unitClass} ${className}`.trim(),
           ...props
         }
       ),
       unit && /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("span", { className: "ui-value-entry-unit", children: unit }),
       status === "alarm" && /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("div", { className: "ui-value-entry-badge ui-value-entry-badge--alarm" }),
-      status === "warning" && /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("div", { className: "ui-value-entry-badge ui-value-entry-badge--warning" })
+      status === "warning" && /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("div", { className: "ui-value-entry-badge ui-value-entry-badge--warning" }),
+      !label && forced && /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("span", { className: "ui-value-entry-forced-badge", "aria-label": "Forced", children: "F" })
+    ] }),
+    hasRealValue && /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { className: "ui-value-entry-real-value", children: [
+      "REAL ",
+      String(realValue),
+      unit ? ` ${unit}` : ""
     ] })
   ] });
 };
 
 // src/components/ValueEntry/LegacyValueEntry.tsx
 var import_react3 = require("react");
+
+// src/theme/statusColors.ts
+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" },
+  alarm: { fill: "#ef4444", stroke: "#dc2626", bg: "#FF0000", text: "#ffffff", border: "#dc2626" },
+  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" }
+};
+var FORCED_MARK_COLOR = {
+  fill: "#ede9fe",
+  stroke: "#5b21b6",
+  bg: "#ede9fe",
+  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) {
+  const raw = (status || "off").toLowerCase();
+  const key = STATUS_ALIASES[raw] ?? raw;
+  const defaults = DEFAULT_STATUS_COLORS[key] ?? DEFAULT_STATUS_COLORS.off;
+  const overrides = customMap?.[key];
+  if (!overrides) return defaults;
+  return { ...defaults, ...overrides };
+}
+
+// src/components/ValueEntry/LegacyValueEntry.tsx
 var import_jsx_runtime4 = require("react/jsx-runtime");
 var LegacyValueEntry = ({
   value,
@@ -368,6 +438,8 @@ var LegacyValueEntry = ({
   inputType = "numeric",
   label,
   readOnly = false,
+  forced = false,
+  realValue,
   className = "",
   disabled,
   ...props
@@ -448,6 +520,27 @@ var LegacyValueEntry = ({
     }
   };
   const statusStyles = getStatusStyles();
+  const forcedBadgeStyle = {
+    display: "inline-flex",
+    alignItems: "center",
+    justifyContent: "center",
+    width: "1.1rem",
+    height: "1.1rem",
+    fontSize: "0.7rem",
+    fontWeight: 700,
+    color: FORCED_MARK_COLOR.text,
+    backgroundColor: FORCED_MARK_COLOR.bg,
+    border: `1px solid ${FORCED_MARK_COLOR.border}`,
+    borderRadius: "50%",
+    marginLeft: "8px",
+    lineHeight: 1
+  };
+  const realValueStyle = {
+    fontSize: "0.75rem",
+    fontWeight: 500,
+    color: "#94a3b8",
+    letterSpacing: "0.02em"
+  };
   const inputStyle = {
     width: "12rem",
     height: "4rem",
@@ -496,17 +589,22 @@ var LegacyValueEntry = ({
         gap: "0.75rem"
       },
       children: [
-        label && /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+        (label || forced) && /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(
           "label",
           {
             style: {
+              display: "flex",
+              alignItems: "center",
               fontSize: "0.875rem",
               fontWeight: "600",
               color: "#cbd5e1",
               textTransform: "uppercase",
               letterSpacing: "0.05em"
             },
-            children: label
+            children: [
+              label,
+              forced && /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("span", { style: forcedBadgeStyle, "aria-label": "Forced", children: "F" })
+            ]
           }
         ),
         /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("div", { style: { position: "relative", display: "inline-flex", alignItems: "center" }, children: [
@@ -563,6 +661,11 @@ var LegacyValueEntry = ({
               }
             }
           )
+        ] }),
+        forced && realValue !== void 0 && /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("div", { style: realValueStyle, children: [
+          "REAL ",
+          String(realValue),
+          unit ? ` ${unit}` : ""
         ] })
       ]
     }
@@ -578,6 +681,9 @@ var ControlPanel = ({
   onModeChange,
   setpointValue,
   onSetpointChange,
+  currentSetpointValue,
+  currentSetpointForced = false,
+  currentSetpointRealValue,
   secondSetpointValue,
   onSecondSetpointChange,
   modeConfigs = {},
@@ -674,6 +780,21 @@ var ControlPanel = ({
               disabled: status === "disabled"
             }
           ) }),
+          currentSetpointValue !== void 0 && /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("div", { children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+            LegacyValueEntry,
+            {
+              value: currentSetpointValue,
+              onChange: () => {
+              },
+              label: `${currentLabel} (Current)`,
+              unit: currentUnit,
+              precision: currentPrecision,
+              status,
+              readOnly: true,
+              forced: currentSetpointForced,
+              realValue: currentSetpointRealValue
+            }
+          ) }),
           hasSecondSetpoint && onSecondSetpointChange && /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("div", { children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
             LegacyValueEntry,
             {
@@ -764,9 +885,15 @@ var StatusIndicator = ({
   labelPosition = "right",
   shape = "circle",
   led = true,
+  visible = true,
+  forced = false,
+  realValue,
   className = "",
   ...props
 }) => {
+  if (!visible) {
+    return null;
+  }
   const baseClass = "ui-status-indicator";
   const statusClass = status ? `ui-status-indicator--${status}` : "";
   const sizeClass = size ? `ui-status-indicator--${size}` : "";
@@ -787,28 +914,43 @@ var StatusIndicator = ({
         return "ui-status-indicator-container ui-status-indicator-label-right";
     }
   };
+  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 }),
-    /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
-      "span",
-      {
-        role: "status",
-        "aria-label": label || `Status: ${status}`,
-        "aria-description": getStatusDescription(status),
-        "data-status": status,
-        className: `
-          ${baseClass}
-          ${statusClass}
-          ${sizeClass}
-          ${shapeClass}
-          ${animationClass}
-          ${ledClass}
-          ${className}
-        `.replace(/\s+/g, " ").trim(),
-        ...props
-      }
-    ),
-    label && (labelPosition === "right" || labelPosition === "bottom") && /* @__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: [
+      "REAL ",
+      realValue
+    ] }),
+    /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("span", { style: { position: "relative", display: "inline-flex" }, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+        "span",
+        {
+          role: "status",
+          "aria-label": label || `Status: ${status}`,
+          "aria-description": getStatusDescription(status),
+          "data-status": status,
+          "data-forced": forced,
+          className: `
+            ${baseClass}
+            ${statusClass}
+            ${sizeClass}
+            ${shapeClass}
+            ${animationClass}
+            ${ledClass}
+            ${forcedClass}
+            ${className}
+          `.replace(/\s+/g, " ").trim(),
+          ...props
+        }
+      ),
+      forced && /* @__PURE__ */ (0, import_jsx_runtime6.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: [
+      "REAL ",
+      realValue
+    ] })
   ] });
 };
 
@@ -936,6 +1078,9 @@ var NodeControlsPanel = ({
               onModeChange: config.onModeChange,
               setpointValue: config.setpoint,
               onSetpointChange: config.onSetpointChange,
+              currentSetpointValue: config.currentSetpoint,
+              currentSetpointForced: config.currentSetpointForced,
+              currentSetpointRealValue: config.currentSetpointRealValue,
               secondSetpointValue: config.secondSetpoint,
               onSecondSetpointChange: config.onSecondSetpointChange,
               modeConfigs: config.modeConfigs,
@@ -1000,31 +1145,6 @@ var NodeControlsPanel = ({
 
 // src/components/DeviceControlPanel/DeviceControlPanel.tsx
 var import_react5 = __toESM(require("react"), 1);
-
-// src/theme/statusColors.ts
-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" },
-  alarm: { fill: "#ef4444", stroke: "#dc2626", bg: "#FF0000", text: "#ffffff", border: "#dc2626" },
-  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" }
-};
-var STATUS_ALIASES = {
-  running: "normal",
-  stopped: "off"
-};
-function resolveStatusColor(status, customMap) {
-  const raw = (status || "off").toLowerCase();
-  const key = STATUS_ALIASES[raw] ?? raw;
-  const defaults = DEFAULT_STATUS_COLORS[key] ?? DEFAULT_STATUS_COLORS.off;
-  const overrides = customMap?.[key];
-  if (!overrides) return defaults;
-  return { ...defaults, ...overrides };
-}
-
-// src/components/DeviceControlPanel/DeviceControlPanel.tsx
 var import_jsx_runtime8 = require("react/jsx-runtime");
 function DeviceControlPanelImpl({
   binding,
@@ -1672,10 +1792,13 @@ function DeviceControlPanelImpl({
                     marginBottom: spacing.gap
                   },
                   children: [
-                    /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+                    /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(
                       "span",
                       {
                         style: {
+                          display: "flex",
+                          alignItems: "center",
+                          gap: "6px",
                           fontSize: `${fontSize.label}px`,
                           fontWeight: 600,
                           textTransform: "uppercase",
@@ -1683,7 +1806,29 @@ function DeviceControlPanelImpl({
                           fontFamily: "Arial, sans-serif",
                           color: mutedTextColor
                         },
-                        children: param.label
+                        children: [
+                          param.label,
+                          param.forced?.active && /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+                            "span",
+                            {
+                              "aria-label": "Forced",
+                              style: {
+                                display: "inline-flex",
+                                alignItems: "center",
+                                justifyContent: "center",
+                                width: "16px",
+                                height: "16px",
+                                fontSize: "10px",
+                                fontWeight: 700,
+                                color: FORCED_MARK_COLOR.text,
+                                backgroundColor: FORCED_MARK_COLOR.bg,
+                                border: `1px solid ${FORCED_MARK_COLOR.border}`,
+                                borderRadius: "50%"
+                              },
+                              children: "F"
+                            }
+                          )
+                        ]
                       }
                     ),
                     /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(
@@ -1705,6 +1850,27 @@ function DeviceControlPanelImpl({
                   ]
                 }
               ),
+              param.forced?.active && param.forced.realValue !== void 0 && /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(
+                "div",
+                {
+                  style: {
+                    display: "flex",
+                    justifyContent: "flex-end",
+                    marginTop: "-4px",
+                    marginBottom: spacing.gap,
+                    fontSize: "10px",
+                    fontWeight: 500,
+                    fontFamily: "Arial, sans-serif",
+                    color: mutedTextColor
+                  },
+                  children: [
+                    "REAL",
+                    " ",
+                    typeof param.forced.realValue === "boolean" ? param.forced.realValue ? "ON" : "OFF" : String(param.forced.realValue),
+                    param.unit ? ` ${param.unit}` : ""
+                  ]
+                }
+              ),
               param.type === "boolean" ? /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
                 "button",
                 {
@@ -2803,19 +2969,38 @@ var CardUnit = (0, import_styled2.default)("div")({
 
 // src/components/layout/FullscreenWorkspace/FullscreenWorkspace.visuals.tsx
 var import_jsx_runtime12 = require("react/jsx-runtime");
+var forcedTagStyle = {
+  position: "absolute",
+  top: "-6px",
+  right: "-6px",
+  width: "14px",
+  height: "14px",
+  display: "flex",
+  alignItems: "center",
+  justifyContent: "center",
+  fontSize: "9px",
+  fontWeight: 700,
+  color: FORCED_MARK_COLOR.text,
+  backgroundColor: FORCED_MARK_COLOR.bg,
+  border: `1px solid ${FORCED_MARK_COLOR.border}`,
+  borderRadius: "50%",
+  pointerEvents: "none"
+};
 var TrendLine = ({
   values,
   width = 60,
   height = 20,
   color = "#4fc3f7",
   strokeWidth = 1.5,
-  backgroundColor = "rgba(255, 255, 255, 0.1)"
+  backgroundColor = "rgba(255, 255, 255, 0.1)",
+  forced = false
 }) => {
   if (!values || values.length < 2) {
-    return /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
+    return /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)(
       "div",
       {
         style: {
+          position: "relative",
           width,
           height,
           backgroundColor,
@@ -2824,7 +3009,10 @@ var TrendLine = ({
           alignItems: "center",
           justifyContent: "center"
         },
-        children: /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("span", { style: { fontSize: "8px", color: "#ccc" }, children: "No data" })
+        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" })
+        ]
       }
     );
   }
@@ -2836,7 +3024,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.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)(
     "div",
     {
       style: {
@@ -2845,30 +3033,41 @@ var TrendLine = ({
         backgroundColor,
         borderRadius: "2px",
         position: "relative",
-        overflow: "hidden"
+        overflow: "visible"
       },
-      children: /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)("svg", { width, height, style: { position: "absolute", top: 0, left: 0 }, children: [
-        /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
-          "path",
+      children: [
+        /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)(
+          "svg",
           {
-            d: pathData,
-            fill: "none",
-            stroke: color,
-            strokeWidth,
-            strokeLinecap: "round",
-            strokeLinejoin: "round"
+            width,
+            height,
+            style: { position: "absolute", top: 0, left: 0, overflow: "hidden", borderRadius: "2px" },
+            children: [
+              /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
+                "path",
+                {
+                  d: pathData,
+                  fill: "none",
+                  stroke: color,
+                  strokeWidth,
+                  strokeLinecap: "round",
+                  strokeLinejoin: "round"
+                }
+              ),
+              /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
+                "circle",
+                {
+                  cx: 4 + (width - 8),
+                  cy: normalizedValues[normalizedValues.length - 1],
+                  r: 1.5,
+                  fill: color
+                }
+              )
+            ]
           }
         ),
-        /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
-          "circle",
-          {
-            cx: 4 + (width - 8),
-            cy: normalizedValues[normalizedValues.length - 1],
-            r: 1.5,
-            fill: color
-          }
-        )
-      ] })
+        forced && /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("span", { style: forcedTagStyle, "aria-label": "Forced", children: "F" })
+      ]
     }
   );
 };
@@ -2884,7 +3083,9 @@ var CircularGauge = ({
   unit,
   label,
   size = 60,
-  color = "rgba(255, 255, 255, 0.9)"
+  color = "rgba(255, 255, 255, 0.9)",
+  forced = false,
+  realValue
 }) => {
   const percentage = Math.min(value / max * 100, 100);
   const strokeWidth = 4;
@@ -2915,7 +3116,7 @@ var CircularGauge = ({
               height: size,
               borderRadius: "50%",
               backgroundColor,
-              border: `1px solid ${borderStrokeColor}`
+              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: [
@@ -2991,12 +3192,39 @@ var CircularGauge = ({
             },
             children: label
           }
-        )
+        ),
+        forced && /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
+          "span",
+          {
+            "aria-label": "Forced",
+            style: {
+              display: "inline-flex",
+              alignItems: "center",
+              justifyContent: "center",
+              width: "14px",
+              height: "14px",
+              fontSize: "9px",
+              fontWeight: 700,
+              color: FORCED_MARK_COLOR.text,
+              backgroundColor: FORCED_MARK_COLOR.bg,
+              border: `1px solid ${FORCED_MARK_COLOR.border}`,
+              borderRadius: "50%",
+              marginTop: "2px"
+            },
+            children: "F"
+          }
+        ),
+        forced && realValue !== void 0 && /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)("div", { style: { fontSize: "8px", opacity: 0.8, color: "white", marginTop: "1px" }, children: [
+          "REAL ",
+          realValue.toFixed(1),
+          " ",
+          unit
+        ] })
       ]
     }
   );
 };
-var Sparkline = ({ data, width, height, color }) => {
+var Sparkline = ({ data, width, height, color, forced = false }) => {
   if (!data || data.length < 2) {
     return null;
   }
@@ -3011,24 +3239,52 @@ var Sparkline = ({ data, width, height, color }) => {
     const y = height - 8 - (value - min) / range * (height - 8);
     return `${x + 4},${y + 4}`;
   }).join(" ");
-  return /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)(
     "div",
     {
       style: {
+        position: "relative",
         width,
         height,
         backgroundColor: "rgba(0, 0, 0, 0.7)",
-        border: "1px solid rgba(255, 255, 255, 0.3)",
+        border: forced ? `1px solid ${FORCED_MARK_COLOR.border}` : "1px solid rgba(255, 255, 255, 0.3)",
         borderRadius: "4px",
         display: "flex",
         alignItems: "center",
         justifyContent: "center",
         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" }) })
+      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" })
+      ]
     }
   );
 };
+var EquipmentForcedBadge = () => /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
+  "span",
+  {
+    "aria-label": "Forced",
+    style: {
+      position: "absolute",
+      top: "-4px",
+      right: "-4px",
+      width: "11px",
+      height: "11px",
+      borderRadius: "50%",
+      backgroundColor: FORCED_MARK_COLOR.bg,
+      border: `1px solid ${FORCED_MARK_COLOR.border}`,
+      color: FORCED_MARK_COLOR.text,
+      fontSize: "7px",
+      fontWeight: 700,
+      display: "flex",
+      alignItems: "center",
+      justifyContent: "center",
+      lineHeight: 1
+    },
+    children: "F"
+  }
+);
 var EquipmentIndicatorWithSparkline = ({
   svgX,
   svgY,
@@ -3036,11 +3292,51 @@ var EquipmentIndicatorWithSparkline = ({
   label,
   size = 30,
   sparklineData,
-  sparklineOffset = { x: 40, y: 0 }
+  sparklineOffset = { x: 40, y: 0 },
+  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.jsx)(
+    /* @__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)(
+        "div",
+        {
+          style: {
+            width: size,
+            height: size,
+            borderRadius: "50%",
+            backgroundColor: color,
+            display: "flex",
+            alignItems: "center",
+            justifyContent: "center",
+            color: "white",
+            fontSize: "7px",
+            fontWeight: "700",
+            textAlign: "center",
+            boxShadow: "0 2px 8px rgba(0, 0, 0, 0.3)",
+            border: forced ? `2px solid ${FORCED_MARK_COLOR.border}` : "2px solid rgba(255, 255, 255, 0.3)"
+          },
+          children: label
+        }
+      ),
+      forced && /* @__PURE__ */ (0, import_jsx_runtime12.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 }) })
+  ] });
+};
+var EquipmentIndicator = ({
+  svgX,
+  svgY,
+  color,
+  label,
+  size = 30,
+  style,
+  className,
+  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)(
       "div",
       {
         style: {
@@ -3056,45 +3352,13 @@ var EquipmentIndicatorWithSparkline = ({
           fontWeight: "700",
           textAlign: "center",
           boxShadow: "0 2px 8px rgba(0, 0, 0, 0.3)",
-          border: "2px solid rgba(255, 255, 255, 0.3)"
+          border: forced ? `2px solid ${FORCED_MARK_COLOR.border}` : "2px solid rgba(255, 255, 255, 0.3)"
         },
         children: label
       }
-    ) }),
-    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 }) })
-  ] });
-};
-var EquipmentIndicator = ({
-  svgX,
-  svgY,
-  color,
-  label,
-  size = 30,
-  style,
-  className
-}) => {
-  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.jsx)(
-    "div",
-    {
-      style: {
-        width: size,
-        height: size,
-        borderRadius: "50%",
-        backgroundColor: color,
-        display: "flex",
-        alignItems: "center",
-        justifyContent: "center",
-        color: "white",
-        fontSize: "7px",
-        fontWeight: "700",
-        textAlign: "center",
-        boxShadow: "0 2px 8px rgba(0, 0, 0, 0.3)",
-        border: "2px solid rgba(255, 255, 255, 0.3)"
-      },
-      children: label
-    }
-  ) });
+    ),
+    forced && /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(EquipmentForcedBadge, {})
+  ] }) });
 };
 
 // src/components/layout/FullscreenWorkspace/FullscreenWorkspace.tsx
@@ -3384,7 +3648,7 @@ var ThemeToggle = ({
 };
 
 // src/components/PIDCanvas/PIDCanvas.tsx
-var import_react20 = __toESM(require("react"), 1);
+var import_react21 = __toESM(require("react"), 1);
 
 // src/components/PIDCanvas/NodeRenderer.tsx
 var import_react10 = __toESM(require("react"), 1);
@@ -3415,6 +3679,25 @@ var mockSymbolLibrary = {
       tags: ["valve", "gate", "powered", "actuator"]
     }
   },
+  "status-indicator": {
+    id: "status-indicator",
+    name: "Status LED",
+    category: "instrument",
+    viewBox: { x: 0, y: 0, width: 24, height: 24 },
+    ports: [],
+    svgContent: `
+      <rect x="2" y="2" width="20" height="20"
+        rx="var(--led-rx, 50%)"
+        fill="var(--symbol-fill, #64748b)"
+        stroke="rgba(255,255,255,0.4)"
+        stroke-width="var(--led-bezel, 0)"
+        style="transform-box: fill-box; transform: rotate(var(--led-rotate, 0deg)); transform-origin: center; pointer-events: all;"/>
+    `,
+    metadata: {
+      description: "Status LED indicator driven by telemetry status color",
+      tags: ["status", "led", "indicator", "instrument"]
+    }
+  },
   "pump-positive-displacement": {
     id: "pump-positive-displacement",
     name: "Positive Displacement Pump",
@@ -4607,8 +4890,144 @@ function getAvailableSymbols() {
   return [...Object.keys(customSymbols), ...Object.keys(mockSymbolLibrary)];
 }
 
+// src/diagram/symbols/appearanceSchema.ts
+var COLOR_PRESETS = {
+  green: "#22c55e",
+  red: "#ef4444",
+  amber: "#f59e0b",
+  blue: "#3b82f6",
+  grey: "#64748b"
+};
+function resolvePresetColor(name) {
+  return name && COLOR_PRESETS[name] || COLOR_PRESETS.grey;
+}
+var COLOR_OPTIONS = Object.keys(COLOR_PRESETS);
+var STATUS_LED_APPEARANCE = [
+  {
+    key: "shape",
+    kind: "select",
+    label: "Shape",
+    options: ["circle", "square", "diamond"],
+    default: "circle"
+  },
+  {
+    key: "size",
+    kind: "select",
+    label: "Size",
+    target: "scale",
+    options: ["small", "medium", "large"],
+    default: "medium",
+    valueMap: { small: 0.75, medium: 1, large: 1.5 }
+  },
+  { key: "led", kind: "boolean", label: "Bezel ring", default: true },
+  { key: "glow", kind: "boolean", label: "Diffusion (glow)", default: false },
+  {
+    key: "animation",
+    kind: "select",
+    label: "Animation",
+    options: ["none", "pulse", "blink"],
+    default: "none"
+  },
+  {
+    key: "labelPosition",
+    kind: "select",
+    label: "Label position",
+    options: ["bottom", "top", "left", "right"],
+    default: "bottom"
+  },
+  // Color binding: a named signal drives the on/off color.
+  {
+    key: "colorSource",
+    kind: "tag",
+    label: "Color source (tag)",
+    default: "",
+    help: "Signal/tag that drives color. True (non-zero) shows On color; false shows Off color. Blank = unbound (grey)."
+  },
+  {
+    key: "onColor",
+    kind: "select",
+    label: "On color (true)",
+    options: COLOR_OPTIONS,
+    default: "green",
+    help: "Color when the Color source is true."
+  },
+  {
+    key: "offColor",
+    kind: "select",
+    label: "Off color (false)",
+    options: COLOR_OPTIONS,
+    default: "red",
+    help: "Color when the Color source is false."
+  },
+  // Visibility binding: an independent named signal drives show/hide.
+  {
+    key: "visibleSource",
+    kind: "tag",
+    label: "Visibility source (tag)",
+    default: "",
+    help: "Signal/tag that drives visibility. True shows the LED, false hides it. Blank = always visible (use the Visible checkbox)."
+  },
+  {
+    key: "visible",
+    kind: "boolean",
+    label: "Visible",
+    target: "visible",
+    default: true,
+    help: "Static show/hide, used only when no Visibility source is set."
+  }
+];
+var APPEARANCE_REGISTRY = {
+  "status-indicator": STATUS_LED_APPEARANCE
+};
+function getAppearanceSchema(symbolId) {
+  return APPEARANCE_REGISTRY[symbolId] ?? [];
+}
+function getAppearanceDefaults(symbolId) {
+  const out = {};
+  for (const field of getAppearanceSchema(symbolId)) {
+    if ((field.target ?? "metadata") === "metadata" && field.default !== void 0) {
+      out[field.key] = field.default;
+    }
+  }
+  return out;
+}
+function readAppearanceValue(node, field) {
+  if (field.target === "visible") {
+    return node.visible ?? field.default ?? true;
+  }
+  if (field.target === "scale") {
+    const scale = node.transform.scale ?? 1;
+    if (field.valueMap) {
+      let bestOption = field.options?.[0] ?? String(scale);
+      let bestDiff = Infinity;
+      for (const [option, value2] of Object.entries(field.valueMap)) {
+        const diff = Math.abs(value2 - scale);
+        if (diff < bestDiff) {
+          bestDiff = diff;
+          bestOption = option;
+        }
+      }
+      return bestOption;
+    }
+    return scale;
+  }
+  const value = node.metadata?.[field.key];
+  return value ?? field.default;
+}
+function writeAppearanceValue(node, field, value) {
+  if (field.target === "visible") {
+    return { visible: Boolean(value) };
+  }
+  if (field.target === "scale") {
+    const scale = field.valueMap ? field.valueMap[String(value)] ?? 1 : Number(value);
+    return { transform: { ...node.transform, scale } };
+  }
+  return { metadata: { ...node.metadata, [field.key]: value } };
+}
+
 // src/components/PIDCanvas/NodeRenderer.tsx
 var import_jsx_runtime16 = require("react/jsx-runtime");
+var HATCH_SIZE = 6;
 function NodeRendererImpl({
   nodes: nodes2,
   selectedNodeIds,
@@ -4620,140 +5039,206 @@ function NodeRendererImpl({
   enableDrag = false,
   statusColorMap
 }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("g", { id: "layer-nodes", children: nodes2.filter((node) => node.visible !== false).map((node) => {
-    const symbol = getSymbolDefinition(node.symbolId);
-    const isSelected = selectedNodeIds?.has(node.id) ?? false;
-    const isDragging = draggingNodeId === node.id;
-    if (!symbol) {
-      return /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)("g", { children: [
-        /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
-          "circle",
-          {
-            cx: node.transform.x,
-            cy: node.transform.y,
-            r: "15",
-            fill: "#ff0000",
-            opacity: "0.3",
-            stroke: "#ff0000",
-            strokeWidth: "2"
-          }
-        ),
-        /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
-          "text",
-          {
-            x: node.transform.x,
-            y: node.transform.y,
-            textAnchor: "middle",
-            dominantBaseline: "middle",
-            fontSize: "10",
-            fill: "#ff0000",
-            children: "?"
-          }
-        )
-      ] }, node.id);
-    }
-    const transforms = [];
-    const effectiveX = isDragging ? node.transform.x + dragOffset.x : node.transform.x;
-    const effectiveY = isDragging ? node.transform.y + dragOffset.y : node.transform.y;
-    transforms.push(`translate(${effectiveX}, ${effectiveY})`);
-    if (node.transform.rotation) {
-      const centerX = symbol.viewBox.width / 2;
-      const centerY = symbol.viewBox.height / 2;
-      transforms.push(`rotate(${node.transform.rotation}, ${centerX}, ${centerY})`);
-    }
-    if (node.transform.scale && node.transform.scale !== 1) {
-      const centerX = symbol.viewBox.width / 2;
-      const centerY = symbol.viewBox.height / 2;
-      transforms.push(
-        `translate(${centerX}, ${centerY}) scale(${node.transform.scale}) translate(${-centerX}, ${-centerY})`
-      );
-    }
-    if (node.transform.flipX || node.transform.flipY) {
-      const scaleX = node.transform.flipX ? -1 : 1;
-      const scaleY = node.transform.flipY ? -1 : 1;
-      const centerX = symbol.viewBox.width / 2;
-      const centerY = symbol.viewBox.height / 2;
-      transforms.push(
-        `translate(${centerX}, ${centerY}) scale(${scaleX}, ${scaleY}) translate(${-centerX}, ${-centerY})`
-      );
-    }
-    const statusEntry = resolveStatusColor(node.status, statusColorMap);
-    const fillColor = node.customColors?.fill ?? statusEntry.fill;
-    const strokeColor = node.customColors?.stroke ?? statusEntry.stroke;
-    return /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)(
-      "g",
+  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)(
+      "pattern",
       {
-        "data-node-id": node.id,
-        "data-symbol-id": node.symbolId,
-        "data-selected": isSelected,
-        "data-dragging": isDragging,
-        transform: transforms.join(" "),
-        style: {
-          "--symbol-fill": fillColor,
-          "--symbol-stroke": strokeColor,
-          cursor: enableDrag ? isDragging ? "grabbing" : "grab" : onNodeClick ? "pointer" : "default"
-        },
-        onClick: (e) => {
-          e.stopPropagation();
-          onNodeClick?.(node.id, e);
-        },
-        onDoubleClick: (e) => {
-          e.stopPropagation();
-          onNodeDoubleClick?.(node.id, e);
-        },
-        onMouseDown: (e) => {
-          if (enableDrag) {
-            onNodeDragStart?.(node.id, e);
-          }
-        },
-        onTouchStart: (e) => {
-          if (enableDrag) {
-            e.stopPropagation();
-            onNodeDragStart?.(node.id, e);
-          }
-        },
+        id: hatchId,
+        "data-testid": "position-unknown-pattern",
+        patternUnits: "userSpaceOnUse",
+        width: HATCH_SIZE,
+        height: HATCH_SIZE,
+        patternTransform: "rotate(45)",
         children: [
-          isSelected && /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
-            "rect",
+          /* @__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",
             {
-              x: "-5",
-              y: "-5",
-              width: symbol.viewBox.width + 10,
-              height: symbol.viewBox.height + 10,
-              fill: "none",
-              stroke: isDragging ? "#10b981" : "#3b82f6",
-              strokeWidth: isDragging ? "3" : "2",
-              strokeDasharray: "4 2",
-              rx: "2",
-              pointerEvents: "none"
+              x1: "0",
+              y1: "0",
+              x2: "0",
+              y2: HATCH_SIZE,
+              stroke: UNKNOWN_MARK_COLOR.text,
+              strokeWidth: "2"
             }
-          ),
+          )
+        ]
+      }
+    ) }),
+    nodes2.filter((node) => node.visible !== false).map((node) => {
+      const symbol = getSymbolDefinition(node.symbolId);
+      const isSelected = selectedNodeIds?.has(node.id) ?? false;
+      const isDragging = draggingNodeId === node.id;
+      if (!symbol) {
+        return /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)("g", { children: [
           /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
-            "g",
+            "circle",
             {
-              dangerouslySetInnerHTML: { __html: symbol.svgContent },
-              "data-symbol-content": symbol.id,
-              style: { pointerEvents: "auto" }
+              cx: node.transform.x,
+              cy: node.transform.y,
+              r: "15",
+              fill: "#ff0000",
+              opacity: "0.3",
+              stroke: "#ff0000",
+              strokeWidth: "2"
             }
           ),
           /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
             "text",
             {
-              x: symbol.viewBox.width / 2 + (node.labelOffset?.x ?? 0),
-              y: symbol.viewBox.height + 12 + (node.labelOffset?.y ?? 0),
+              x: node.transform.x,
+              y: node.transform.y,
               textAnchor: "middle",
-              fontSize: node.labelFontSize ?? 10,
-              fontWeight: "600",
-              fill: isSelected ? "#3b82f6" : "#1f2937",
-              transform: node.transform.rotation ? `rotate(${-node.transform.rotation}, ${symbol.viewBox.width / 2 + (node.labelOffset?.x ?? 0)}, ${symbol.viewBox.height + 12 + (node.labelOffset?.y ?? 0)})` : void 0,
-              children: node.label || node.id
+              dominantBaseline: "middle",
+              fontSize: "10",
+              fill: "#ff0000",
+              children: "?"
             }
           )
-        ]
-      },
-      node.id
-    );
-  }) });
+        ] }, node.id);
+      }
+      const transforms = [];
+      const effectiveX = isDragging ? node.transform.x + dragOffset.x : node.transform.x;
+      const effectiveY = isDragging ? node.transform.y + dragOffset.y : node.transform.y;
+      transforms.push(`translate(${effectiveX}, ${effectiveY})`);
+      if (node.transform.rotation) {
+        const centerX = symbol.viewBox.width / 2;
+        const centerY = symbol.viewBox.height / 2;
+        transforms.push(`rotate(${node.transform.rotation}, ${centerX}, ${centerY})`);
+      }
+      if (node.transform.scale && node.transform.scale !== 1) {
+        const centerX = symbol.viewBox.width / 2;
+        const centerY = symbol.viewBox.height / 2;
+        transforms.push(
+          `translate(${centerX}, ${centerY}) scale(${node.transform.scale}) translate(${-centerX}, ${-centerY})`
+        );
+      }
+      if (node.transform.flipX || node.transform.flipY) {
+        const scaleX = node.transform.flipX ? -1 : 1;
+        const scaleY = node.transform.flipY ? -1 : 1;
+        const centerX = symbol.viewBox.width / 2;
+        const centerY = symbol.viewBox.height / 2;
+        transforms.push(
+          `translate(${centerX}, ${centerY}) scale(${scaleX}, ${scaleY}) translate(${-centerX}, ${-centerY})`
+        );
+      }
+      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 appearance = { ...getAppearanceDefaults(node.symbolId), ...node.metadata ?? {} };
+      const ledStyle = {};
+      if (appearance.shape !== void 0) {
+        ledStyle["--led-rx"] = appearance.shape === "circle" ? "50%" : "2";
+        ledStyle["--led-rotate"] = appearance.shape === "diamond" ? "45deg" : "0deg";
+      }
+      if (appearance.led !== void 0) {
+        ledStyle["--led-bezel"] = appearance.led ? "2" : "0";
+      }
+      if (appearance.glow) {
+        ledStyle.filter = `drop-shadow(0 0 4px ${fillColor})`;
+      }
+      const ledAnimation = typeof appearance.animation === "string" && appearance.animation !== "none" ? appearance.animation : void 0;
+      const vb = symbol.viewBox;
+      const ox = node.labelOffset?.x ?? 0;
+      const oy = node.labelOffset?.y ?? 0;
+      const labelPos = typeof appearance.labelPosition === "string" ? appearance.labelPosition : "bottom";
+      let labelX = vb.width / 2 + ox;
+      let labelY = vb.height + 12 + oy;
+      let labelAnchor = "middle";
+      if (labelPos === "top") {
+        labelX = vb.width / 2 + ox;
+        labelY = -6 + oy;
+        labelAnchor = "middle";
+      } else if (labelPos === "left") {
+        labelX = -6 + ox;
+        labelY = vb.height / 2 + oy;
+        labelAnchor = "end";
+      } else if (labelPos === "right") {
+        labelX = vb.width + 6 + ox;
+        labelY = vb.height / 2 + oy;
+        labelAnchor = "start";
+      }
+      return /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)(
+        "g",
+        {
+          "data-node-id": node.id,
+          "data-symbol-id": node.symbolId,
+          "data-selected": isSelected,
+          "data-dragging": isDragging,
+          "data-led-animation": ledAnimation,
+          "data-position-unknown": isUnknown ? "true" : void 0,
+          transform: transforms.join(" "),
+          style: {
+            "--symbol-fill": fillColor,
+            "--symbol-stroke": strokeColor,
+            cursor: enableDrag ? isDragging ? "grabbing" : "grab" : onNodeClick ? "pointer" : "default",
+            ...ledStyle
+          },
+          onClick: (e) => {
+            e.stopPropagation();
+            onNodeClick?.(node.id, e);
+          },
+          onDoubleClick: (e) => {
+            e.stopPropagation();
+            onNodeDoubleClick?.(node.id, e);
+          },
+          onMouseDown: (e) => {
+            if (enableDrag) {
+              onNodeDragStart?.(node.id, e);
+            }
+          },
+          onTouchStart: (e) => {
+            if (enableDrag) {
+              e.stopPropagation();
+              onNodeDragStart?.(node.id, e);
+            }
+          },
+          children: [
+            isSelected && /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
+              "rect",
+              {
+                x: "-5",
+                y: "-5",
+                width: symbol.viewBox.width + 10,
+                height: symbol.viewBox.height + 10,
+                fill: "none",
+                stroke: isDragging ? "#10b981" : "#3b82f6",
+                strokeWidth: isDragging ? "3" : "2",
+                strokeDasharray: "4 2",
+                rx: "2",
+                pointerEvents: "none"
+              }
+            ),
+            /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
+              "g",
+              {
+                dangerouslySetInnerHTML: { __html: symbol.svgContent },
+                "data-symbol-content": symbol.id,
+                style: { pointerEvents: "auto" }
+              }
+            ),
+            /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
+              "text",
+              {
+                x: labelX,
+                y: labelY,
+                textAnchor: labelAnchor,
+                fontSize: node.labelFontSize ?? 10,
+                fontWeight: "600",
+                fill: isSelected ? "#3b82f6" : "#1f2937",
+                transform: node.transform.rotation ? `rotate(${-node.transform.rotation}, ${labelX}, ${labelY})` : void 0,
+                children: node.label || node.id
+              }
+            )
+          ]
+        },
+        node.id
+      );
+    })
+  ] });
 }
 var NodeRenderer = import_react10.default.memo(NodeRendererImpl);
 
@@ -4974,7 +5459,9 @@ function DataOverlayImpl({
   scale = 1,
   statusColorMap
 }) {
-  const { value, display, history, scaling } = telemetry;
+  const { value, display, history, scaling, forced } = telemetry;
+  const isForced = forced?.active === true;
+  const hasRealValue = isForced && forced?.realValue !== void 0;
   const showValue = display?.showValue ?? true;
   const showStatus = display?.showStatus ?? true;
   const showSparkline = display?.showSparkline ?? false;
@@ -5023,12 +5510,16 @@ function DataOverlayImpl({
   const finalTextColor = textColor || colors.text;
   const formattedValue = formatValue(value.value);
   const displayText = unit ? `${formattedValue} ${unit}` : formattedValue;
+  const realDisplayText = hasRealValue ? unit ? `REAL ${formatValue(forced.realValue)} ${unit}` : `REAL ${formatValue(forced.realValue)}` : void 0;
+  const borderColor = isForced ? FORCED_MARK_COLOR.border : colors.border;
+  const borderWidth = (isForced ? 2 : 1) * scale;
   const hasSparkline = showSparkline && sparklinePath;
-  const overlayHeight = (label ? hasSparkline ? 55 : 30 : hasSparkline ? 47 : 22) * scale;
+  const extraMarkRows = realDisplayText ? 1 : 0;
+  const overlayHeight = (label ? hasSparkline ? 55 : 30 : hasSparkline ? 47 : 22) * scale + extraMarkRows * 9 * scale;
   const overlayWidth = 80 * scale;
   const displayX = x + offsetX;
   const displayY = y + offsetY;
-  return /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)("g", { "data-overlay-node": nodeId, "data-status": value.status, children: [
+  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)(
       "rect",
       {
@@ -5038,8 +5529,8 @@ function DataOverlayImpl({
         height: overlayHeight,
         rx: 4 * scale,
         fill: colors.bg,
-        stroke: colors.border,
-        strokeWidth: 1 * scale,
+        stroke: borderColor,
+        strokeWidth: borderWidth,
         opacity: "0.95",
         filter: "drop-shadow(0 2px 4px rgba(0,0,0,0.2))"
       }
@@ -5088,6 +5579,48 @@ function DataOverlayImpl({
         ]
       }
     ),
+    isForced && /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)(
+      "g",
+      {
+        transform: `translate(${displayX + overlayWidth / 2}, ${displayY - 25 * scale})`,
+        "aria-label": "Forced",
+        children: [
+          /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
+            "circle",
+            {
+              r: 7 * scale,
+              fill: FORCED_MARK_COLOR.bg,
+              stroke: FORCED_MARK_COLOR.border,
+              strokeWidth: 1.5 * scale
+            }
+          ),
+          /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
+            "text",
+            {
+              textAnchor: "middle",
+              dominantBaseline: "central",
+              fontSize: 8 * scale,
+              fontWeight: "700",
+              fill: FORCED_MARK_COLOR.text,
+              children: "F"
+            }
+          )
+        ]
+      }
+    ),
+    realDisplayText && /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
+      "text",
+      {
+        x: displayX,
+        y: displayY + (value.quality !== void 0 && value.quality < 100 ? 14 : 5) * scale,
+        textAnchor: "middle",
+        fontSize: 7 * scale,
+        fontWeight: "500",
+        fill: finalTextColor,
+        opacity: "0.85",
+        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)(
       "path",
       {
@@ -5855,8 +6388,49 @@ function useTelemetryStatus(telemetry, diagram, setDiagram, options = {}) {
   }, [telemetry, diagram, setDiagram, enabled, mapStatus]);
 }
 
-// src/diagram/hooks/useDrag.ts
+// src/diagram/hooks/useBooleanIndicators.ts
 var import_react18 = require("react");
+function useBooleanIndicators(telemetry, diagram, setDiagram, options = {}) {
+  const { enabled = true, symbolId = "status-indicator" } = options;
+  (0, import_react18.useEffect)(() => {
+    if (!enabled) return;
+    const tagIndex = /* @__PURE__ */ new Map();
+    telemetry.forEach((binding) => {
+      if (binding.tag) tagIndex.set(binding.tag, binding.value.value);
+    });
+    let needsUpdate = false;
+    const updatedNodes = diagram.nodes.map((node) => {
+      if (node.symbolId !== symbolId) return node;
+      const meta = node.metadata ?? {};
+      const colorSource = typeof meta.colorSource === "string" ? meta.colorSource : "";
+      const visibleSource = typeof meta.visibleSource === "string" ? meta.visibleSource : "";
+      let next = node;
+      if (colorSource) {
+        const isTrue = Boolean(tagIndex.get(colorSource));
+        const fill = resolvePresetColor(
+          String(isTrue ? meta.onColor ?? "green" : meta.offColor ?? "red")
+        );
+        if (node.customColors?.fill !== fill) {
+          next = { ...next, customColors: { ...next.customColors, fill } };
+        }
+      }
+      if (visibleSource) {
+        const vis = Boolean(tagIndex.get(visibleSource));
+        if ((next.visible ?? true) !== vis) {
+          next = { ...next, visible: vis };
+        }
+      }
+      if (next !== node) needsUpdate = true;
+      return next;
+    });
+    if (needsUpdate) {
+      setDiagram({ ...diagram, nodes: updatedNodes });
+    }
+  }, [telemetry, diagram, setDiagram, enabled, symbolId]);
+}
+
+// src/diagram/hooks/useDrag.ts
+var import_react19 = require("react");
 function useDrag(options = {}) {
   const {
     onDragStart,
@@ -5866,23 +6440,23 @@ function useDrag(options = {}) {
     dragThreshold = 3,
     screenToWorld = (x, y) => ({ x, y })
   } = options;
-  const [dragState, setDragState] = (0, import_react18.useState)({
+  const [dragState, setDragState] = (0, import_react19.useState)({
     isDragging: false,
     startPosition: null,
     offset: { x: 0, y: 0 },
     draggedId: null
   });
-  const [isListening, setIsListening] = (0, import_react18.useState)(false);
-  const dragStartRef = (0, import_react18.useRef)(null);
-  const hasMovedRef = (0, import_react18.useRef)(false);
-  const applySnap = (0, import_react18.useCallback)(
+  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)(
     (value) => {
       if (snapToGrid <= 0) return value;
       return Math.round(value / snapToGrid) * snapToGrid;
     },
     [snapToGrid]
   );
-  const handleMouseMove = (0, import_react18.useCallback)(
+  const handleMouseMove = (0, import_react19.useCallback)(
     (event) => {
       if (!dragStartRef.current) return;
       const { id, screenStart: _screenStart, itemPosition, clickOffset } = dragStartRef.current;
@@ -5923,7 +6497,7 @@ function useDrag(options = {}) {
     },
     [screenToWorld, dragThreshold, applySnap, onDragStart, onDragMove]
   );
-  const handleMouseUp = (0, import_react18.useCallback)(
+  const handleMouseUp = (0, import_react19.useCallback)(
     (event) => {
       if (!dragStartRef.current || !hasMovedRef.current) {
         dragStartRef.current = null;
@@ -5960,7 +6534,7 @@ function useDrag(options = {}) {
     },
     [screenToWorld, applySnap, onDragEnd]
   );
-  const handleTouchMove = (0, import_react18.useCallback)(
+  const handleTouchMove = (0, import_react19.useCallback)(
     (event) => {
       if (!dragStartRef.current || event.touches.length !== 1) return;
       const touch = event.touches[0];
@@ -6003,7 +6577,7 @@ function useDrag(options = {}) {
     },
     [screenToWorld, dragThreshold, applySnap, onDragStart, onDragMove]
   );
-  const handleTouchEnd = (0, import_react18.useCallback)(
+  const handleTouchEnd = (0, import_react19.useCallback)(
     (event) => {
       if (!dragStartRef.current || !hasMovedRef.current) {
         dragStartRef.current = null;
@@ -6041,7 +6615,7 @@ function useDrag(options = {}) {
     },
     [screenToWorld, applySnap, onDragEnd]
   );
-  (0, import_react18.useEffect)(() => {
+  (0, import_react19.useEffect)(() => {
     if (!isListening) return;
     document.addEventListener("mousemove", handleMouseMove);
     document.addEventListener("mouseup", handleMouseUp);
@@ -6056,7 +6630,7 @@ function useDrag(options = {}) {
       document.removeEventListener("touchcancel", handleTouchEnd);
     };
   }, [isListening, handleMouseMove, handleMouseUp, handleTouchMove, handleTouchEnd]);
-  const startDrag = (0, import_react18.useCallback)(
+  const startDrag = (0, import_react19.useCallback)(
     (id, event, itemPosition) => {
       event.stopPropagation();
       let clientX;
@@ -6086,7 +6660,7 @@ function useDrag(options = {}) {
     },
     [screenToWorld]
   );
-  const cancelDrag = (0, import_react18.useCallback)(() => {
+  const cancelDrag = (0, import_react19.useCallback)(() => {
     dragStartRef.current = null;
     hasMovedRef.current = false;
     setIsListening(false);
@@ -6097,7 +6671,7 @@ function useDrag(options = {}) {
       draggedId: null
     });
   }, []);
-  const isDraggingItem = (0, import_react18.useCallback)(
+  const isDraggingItem = (0, import_react19.useCallback)(
     (id) => dragState.isDragging && dragState.draggedId === id,
     [dragState.isDragging, dragState.draggedId]
   );
@@ -6110,7 +6684,7 @@ function useDrag(options = {}) {
 }
 
 // src/diagram/hooks/useKeyboardShortcuts.ts
-var import_react19 = require("react");
+var import_react20 = require("react");
 function useKeyboardShortcuts(options) {
   const {
     onDelete,
@@ -6121,7 +6695,7 @@ function useKeyboardShortcuts(options) {
     onSelectAll,
     enabled = true
   } = options;
-  (0, import_react19.useEffect)(() => {
+  (0, import_react20.useEffect)(() => {
     if (!enabled) return;
     const handleKeyDown = (event) => {
       const target = event.target;
@@ -6259,21 +6833,21 @@ function PIDCanvasImpl({
   statusColorMap,
   ...props
 }) {
-  const [localDiagram, setLocalDiagram] = (0, import_react20.useState)(diagram);
-  const [dragOverPosition, setDragOverPosition] = (0, import_react20.useState)(null);
-  const [isConnecting, setIsConnecting] = (0, import_react20.useState)(false);
-  const [connectionSource, setConnectionSource] = (0, import_react20.useState)(null);
-  const [connectionSourcePort, setConnectionSourcePort] = (0, import_react20.useState)(null);
-  const [connectionCursor, setConnectionCursor] = (0, import_react20.useState)(null);
-  const [hoveredNode, setHoveredNode] = (0, import_react20.useState)(null);
-  const [hoveredPort, setHoveredPort] = (0, import_react20.useState)(null);
-  const [selectedWaypoint, setSelectedWaypoint] = (0, import_react20.useState)(null);
-  const historyStack = (0, import_react20.useRef)([]);
-  const redoStack = (0, import_react20.useRef)([]);
-  const isUndoRedoAction = (0, import_react20.useRef)(false);
-  const isInternalChange = (0, import_react20.useRef)(false);
-  const lastInternalDiagram = (0, import_react20.useRef)(null);
-  (0, import_react20.useEffect)(() => {
+  const [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 isExternal = !isInternalChange.current && diagram !== lastInternalDiagram.current;
     if (isExternal) {
       setLocalDiagram(diagram);
@@ -6295,7 +6869,7 @@ function PIDCanvasImpl({
     enablePan: features.pan ?? true,
     enableZoom: features.zoom ?? true
   });
-  const calculateContentBounds = (0, import_react20.useCallback)(() => {
+  const calculateContentBounds = (0, import_react21.useCallback)(() => {
     const nodes2 = localDiagram.nodes.filter((n) => n.visible !== false);
     if (nodes2.length === 0) {
       return null;
@@ -6318,7 +6892,7 @@ function PIDCanvasImpl({
     });
     return { minX, minY, maxX, maxY };
   }, [localDiagram.nodes]);
-  (0, import_react20.useEffect)(() => {
+  (0, import_react21.useEffect)(() => {
     if (onMounted) {
       const controls = {
         fitToContent: (padding = 50) => {
@@ -6359,8 +6933,8 @@ function PIDCanvasImpl({
   });
   const dragEnabled = features.dragNodes ?? false;
   const selectionEnabled = features.selection ?? false;
-  const containerRef = (0, import_react20.useRef)(null);
-  const pushToHistory = (0, import_react20.useCallback)((currentDiagram) => {
+  const containerRef = (0, import_react21.useRef)(null);
+  const pushToHistory = (0, import_react21.useCallback)((currentDiagram) => {
     if (isUndoRedoAction.current) return;
     const snapshot = JSON.parse(JSON.stringify(currentDiagram));
     historyStack.current.push(snapshot);
@@ -6369,7 +6943,7 @@ function PIDCanvasImpl({
     }
     redoStack.current = [];
   }, []);
-  const undo = (0, import_react20.useCallback)(() => {
+  const undo = (0, import_react21.useCallback)(() => {
     if (historyStack.current.length === 0) return;
     isUndoRedoAction.current = true;
     const currentSnapshot = JSON.parse(JSON.stringify(localDiagram));
@@ -6383,7 +6957,7 @@ function PIDCanvasImpl({
       isUndoRedoAction.current = false;
     }, 0);
   }, [localDiagram, onDiagramChange]);
-  const redo = (0, import_react20.useCallback)(() => {
+  const redo = (0, import_react21.useCallback)(() => {
     if (redoStack.current.length === 0) return;
     isUndoRedoAction.current = true;
     const currentSnapshot = JSON.parse(JSON.stringify(localDiagram));
@@ -6397,7 +6971,7 @@ function PIDCanvasImpl({
       isUndoRedoAction.current = false;
     }, 0);
   }, [localDiagram, onDiagramChange]);
-  (0, import_react20.useEffect)(() => {
+  (0, import_react21.useEffect)(() => {
     const handleKeyDown = (e) => {
       const isCtrlOrCmd = e.ctrlKey || e.metaKey;
       if (isCtrlOrCmd && e.key === "z" && !e.shiftKey) {
@@ -6414,7 +6988,7 @@ function PIDCanvasImpl({
     window.addEventListener("keydown", handleKeyDown);
     return () => window.removeEventListener("keydown", handleKeyDown);
   }, [undo, redo]);
-  (0, import_react20.useEffect)(() => {
+  (0, import_react21.useEffect)(() => {
     if (!features.dragNodes) return;
     const handleKeyDown = (e) => {
       if (selection.selectedNodeIds.size === 0 && !selectedWaypoint) return;
@@ -6499,7 +7073,7 @@ function PIDCanvasImpl({
     onNodeMove,
     pushToHistory
   ]);
-  const handlePositionChange = (0, import_react20.useCallback)(
+  const handlePositionChange = (0, import_react21.useCallback)(
     (nodeId, x, y) => {
       pushToHistory(localDiagram);
       const updatedNodes = localDiagram.nodes.map(
@@ -6521,7 +7095,7 @@ function PIDCanvasImpl({
     },
     [localDiagram, onDiagramChange, onNodeMove, pushToHistory]
   );
-  const handleWaypointPositionChange = (0, import_react20.useCallback)(
+  const handleWaypointPositionChange = (0, import_react21.useCallback)(
     (pipeId, pointIndex, x, y) => {
       pushToHistory(localDiagram);
       const updatedPipes = localDiagram.pipes.map((pipe) => {
@@ -6539,7 +7113,7 @@ function PIDCanvasImpl({
     },
     [localDiagram, onDiagramChange, pushToHistory]
   );
-  const handleDragEnd = (0, import_react20.useCallback)(
+  const handleDragEnd = (0, import_react21.useCallback)(
     (nodeId, offset, finalPosition) => {
       const dragDistance = Math.sqrt(offset.x ** 2 + offset.y ** 2);
       if (dragDistance < 2) {
@@ -6620,7 +7194,7 @@ function PIDCanvasImpl({
       onDiagramChange?.(updatedDiagram);
     }
   });
-  const handleNodeDragStart = (0, import_react20.useCallback)(
+  const handleNodeDragStart = (0, import_react21.useCallback)(
     (nodeId, event) => {
       const node = localDiagram.nodes.find((n) => n.id === nodeId);
       if (!node) return;
@@ -6628,7 +7202,7 @@ function PIDCanvasImpl({
     },
     [localDiagram.nodes, startDrag]
   );
-  const handleWaypointClick = (0, import_react20.useCallback)(
+  const handleWaypointClick = (0, import_react21.useCallback)(
     (pipeId, pointIndex) => {
       setSelectedWaypoint({ pipeId, pointIndex });
       if (selectionEnabled) {
@@ -6637,7 +7211,7 @@ function PIDCanvasImpl({
     },
     [selectionEnabled, clearSelection]
   );
-  const handleWaypointDragStart = (0, import_react20.useCallback)(
+  const handleWaypointDragStart = (0, import_react21.useCallback)(
     (pipeId, pointIndex, event) => {
       const pipe = localDiagram.pipes.find((p) => p.id === pipeId);
       if (!pipe || pointIndex >= pipe.routePoints.length) return;
@@ -6646,7 +7220,7 @@ function PIDCanvasImpl({
     },
     [localDiagram.pipes, startWaypointDrag]
   );
-  const handlePipeSegmentClick = (0, import_react20.useCallback)(
+  const handlePipeSegmentClick = (0, import_react21.useCallback)(
     (pipeId, position, segmentIndex) => {
       pushToHistory(localDiagram);
       const updatedPipes = localDiagram.pipes.map((pipe) => {
@@ -6665,7 +7239,7 @@ function PIDCanvasImpl({
     [localDiagram, onDiagramChange, pushToHistory]
   );
   const telemetryEnabled = features.telemetry ?? false;
-  const handleDelete = (0, import_react20.useCallback)(() => {
+  const handleDelete = (0, import_react21.useCallback)(() => {
     if (!selectionEnabled) return;
     const { selectedNodeIds, selectedPipeIds } = selection;
     if (selectedNodeIds.size === 0 && selectedPipeIds.size === 0) return;
@@ -6694,17 +7268,17 @@ function PIDCanvasImpl({
     onDelete,
     pushToHistory
   ]);
-  const handleCopy = (0, import_react20.useCallback)(() => {
+  const handleCopy = (0, import_react21.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_react20.useCallback)(() => {
+  const handlePaste = (0, import_react21.useCallback)(() => {
     if (!selectionEnabled) return;
     onPaste?.();
   }, [selectionEnabled, onPaste]);
-  const handleNodeDoubleClick = (0, import_react20.useCallback)(
+  const handleNodeDoubleClick = (0, import_react21.useCallback)(
     (nodeId, event) => {
       if (!selectionEnabled) return;
       console.log("Node double-clicked:", nodeId);
@@ -6718,7 +7292,7 @@ function PIDCanvasImpl({
     onCopy: handleCopy,
     onPaste: handlePaste
   });
-  const handleNodeClick = (0, import_react20.useCallback)(
+  const handleNodeClick = (0, import_react21.useCallback)(
     (nodeId, event) => {
       const connectionModeEnabled = features.connectionMode ?? false;
       if (connectionModeEnabled && isConnecting) {
@@ -6760,7 +7334,7 @@ function PIDCanvasImpl({
       onNodeClick
     ]
   );
-  const handlePipeClick = (0, import_react20.useCallback)(
+  const handlePipeClick = (0, import_react21.useCallback)(
     (pipeId, event) => {
       if (selectionEnabled) {
         selectPipe(pipeId, event.ctrlKey || event.metaKey);
@@ -6779,7 +7353,7 @@ function PIDCanvasImpl({
     }
     setSelectedWaypoint(null);
   };
-  const handleDragOver = (0, import_react20.useCallback)(
+  const handleDragOver = (0, import_react21.useCallback)(
     (event) => {
       if (!features.allowSymbolDrop) return;
       event.preventDefault();
@@ -6790,7 +7364,7 @@ function PIDCanvasImpl({
     },
     [features.allowSymbolDrop, screenToWorld, svgRef]
   );
-  const handleDrop = (0, import_react20.useCallback)(
+  const handleDrop = (0, import_react21.useCallback)(
     (event) => {
       if (!features.allowSymbolDrop) return;
       event.preventDefault();
@@ -6803,10 +7377,10 @@ function PIDCanvasImpl({
     },
     [features.allowSymbolDrop, screenToWorld, onSymbolDrop, svgRef]
   );
-  const handleDragLeave = (0, import_react20.useCallback)(() => {
+  const handleDragLeave = (0, import_react21.useCallback)(() => {
     setDragOverPosition(null);
   }, []);
-  const handleMouseMove = (0, import_react20.useCallback)(
+  const handleMouseMove = (0, import_react21.useCallback)(
     (event) => {
       const connectionModeEnabled = features.connectionMode ?? false;
       if (connectionModeEnabled) {
@@ -6951,6 +7525,7 @@ function PIDCanvasImpl({
                 }
               ),
               telemetryEnabled && telemetry && /* @__PURE__ */ (0, import_jsx_runtime20.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;
                 const symbol = getSymbolDefinition(node.symbolId);
@@ -7116,10 +7691,10 @@ function PIDCanvasImpl({
     }
   );
 }
-var PIDCanvas = import_react20.default.memo(PIDCanvasImpl);
+var PIDCanvas = import_react21.default.memo(PIDCanvasImpl);
 
 // src/components/SymbolLibrary/SymbolLibrary.tsx
-var import_react21 = require("react");
+var import_react22 = require("react");
 var import_jsx_runtime21 = require("react/jsx-runtime");
 function SymbolLibrary({
   className = "",
@@ -7127,8 +7702,8 @@ function SymbolLibrary({
   showCategories = true,
   categories = ["Valves", "Pumps", "Tanks", "Instruments", "Displays"]
 }) {
-  const [selectedCategory, setSelectedCategory] = (0, import_react21.useState)("all");
-  const [searchQuery, setSearchQuery] = (0, import_react21.useState)("");
+  const [selectedCategory, setSelectedCategory] = (0, import_react22.useState)("all");
+  const [searchQuery, setSearchQuery] = (0, import_react22.useState)("");
   const symbolIds = getAvailableSymbols();
   const allSymbols = symbolIds.map((id) => getSymbolDefinition(id)).filter((symbol) => symbol !== void 0);
   const categoryMap = {
@@ -7318,6 +7893,8 @@ function NodeConfigPanel({
   onUpdateNode,
   onUpdateTelemetry,
   onAddTelemetry,
+  onRemoveTelemetry,
+  availableTags = [],
   onRemove,
   className = "",
   style = {}
@@ -7330,6 +7907,8 @@ function NodeConfigPanel({
     padding: "20px",
     ...style
   };
+  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: [
       "Configure: ",
@@ -7451,7 +8030,136 @@ function NodeConfigPanel({
         )
       ] })
     ] }),
-    /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)("div", { style: { marginBottom: "20px" }, children: [
+    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.map((field) => {
+        const value = readAppearanceValue(node, field);
+        const fieldLabel = field.label ?? field.key;
+        const inputStyle = {
+          width: "100%",
+          padding: "6px 8px",
+          borderRadius: "4px",
+          border: "1px solid #cbd5e1",
+          fontSize: "0.875rem"
+        };
+        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)(
+              "input",
+              {
+                type: "checkbox",
+                checked: Boolean(value),
+                onChange: (e) => onUpdateNode(writeAppearanceValue(node, field, e.target.checked)),
+                style: { marginRight: "6px" }
+              }
+            ),
+            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: [
+              fieldLabel,
+              ":"
+            ] }),
+            /* @__PURE__ */ (0, import_jsx_runtime22.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))
+              }
+            )
+          ] });
+        } 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: [
+              fieldLabel,
+              ":"
+            ] }),
+            /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
+              "input",
+              {
+                type: "number",
+                value: Number(value),
+                onChange: (e) => onUpdateNode(writeAppearanceValue(node, field, parseFloat(e.target.value) || 0)),
+                style: inputStyle
+              }
+            )
+          ] });
+        } else if (field.kind === "tag") {
+          const tagValue = String(value);
+          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: [
+              fieldLabel,
+              ":"
+            ] }),
+            /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
+              "input",
+              {
+                type: "text",
+                value: tagValue,
+                list: listId,
+                onChange: (e) => onUpdateNode(writeAppearanceValue(node, field, e.target.value)),
+                placeholder: "type or pick a signal\u2026",
+                style: {
+                  ...inputStyle,
+                  border: `1px solid ${unknown ? "#f59e0b" : known ? "#22c55e" : "#cbd5e1"}`
+                }
+              }
+            ),
+            /* @__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)(
+              "div",
+              {
+                style: {
+                  fontSize: "0.7rem",
+                  marginTop: "3px",
+                  color: known ? "#16a34a" : "#b45309"
+                },
+                children: known ? "\u2713 matched signal" : "\u26A0 no matching signal (reads as false until published)"
+              }
+            )
+          ] });
+        } 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: [
+              fieldLabel,
+              ":"
+            ] }),
+            /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
+              "input",
+              {
+                type: "text",
+                value: String(value),
+                onChange: (e) => onUpdateNode(writeAppearanceValue(node, field, e.target.value)),
+                style: inputStyle
+              }
+            )
+          ] });
+        }
+        return /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)("div", { style: { marginBottom: "10px" }, children: [
+          control,
+          field.help && /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
+            "div",
+            {
+              style: {
+                fontSize: "0.7rem",
+                color: "#64748b",
+                marginTop: "3px",
+                lineHeight: 1.35
+              },
+              children: field.help
+            }
+          )
+        ] }, 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)(
         "button",
@@ -7497,6 +8205,27 @@ 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)(
+          "input",
+          {
+            type: "text",
+            value: binding.tag || "",
+            onChange: (e) => onUpdateTelemetry({
+              nodeId: node.id,
+              tag: e.target.value
+            }),
+            placeholder: "e.g. pump.running",
+            style: {
+              width: "100%",
+              padding: "6px 8px",
+              borderRadius: "4px",
+              border: "1px solid #cbd5e1",
+              fontSize: "0.875rem",
+              marginBottom: "8px"
+            }
+          }
+        ),
         /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("label", { style: { fontSize: "0.75rem", display: "block", marginBottom: "4px" }, children: "Initial Value:" }),
         /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
           "input",
@@ -7804,10 +8533,28 @@ function NodeConfigPanel({
             ] })
           ] }),
           " "
-        ] })
+        ] }),
+        onRemoveTelemetry && /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
+          "button",
+          {
+            onClick: onRemoveTelemetry,
+            style: {
+              width: "100%",
+              padding: "6px 8px",
+              marginTop: "8px",
+              borderRadius: "4px",
+              border: "1px solid #ef4444",
+              background: "transparent",
+              color: "#ef4444",
+              fontSize: "0.8125rem",
+              cursor: "pointer"
+            },
+            children: "Remove Telemetry"
+          }
+        )
       ] })
     ] }),
-    binding && /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)("div", { style: { marginBottom: "20px" }, children: [
+    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" }),
       ["highHigh", "high", "low", "lowLow"].map((key) => {
         const label = key === "highHigh" ? "High-High (\u2265)" : key === "high" ? "High (\u2265)" : key === "low" ? "Low (\u2264)" : "Low-Low (\u2264)";
@@ -7837,7 +8584,7 @@ function NodeConfigPanel({
         ] }, key);
       })
     ] }),
-    binding && /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)("div", { style: { marginBottom: "20px" }, children: [
+    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" }),
       ["normal", "warning", "alarm", "fault", "off"].map((status) => {
         const defaultColors = {
@@ -8179,13 +8926,13 @@ function createControlBinding(nodeId, deviceConfig, actions) {
 }
 
 // src/hooks/useDeviceControls.ts
-var import_react22 = require("react");
+var import_react23 = 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_react22.useState)(() => {
+  const [controls, setControls] = (0, import_react23.useState)(() => {
     const map = /* @__PURE__ */ new Map();
     if (initialBindings) {
       initialBindings.forEach((binding) => {
@@ -8194,12 +8941,12 @@ function useDeviceControls(initialBindings, options) {
     }
     return map;
   });
-  const pendingRef = (0, import_react22.useRef)(/* @__PURE__ */ new Map());
-  const [pendingCommands, setPendingCommands] = (0, import_react22.useState)(() => /* @__PURE__ */ new Set());
-  const syncPending = (0, import_react22.useCallback)(() => {
+  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)(() => {
     setPendingCommands(new Set(pendingRef.current.keys()));
   }, []);
-  const updateControl = (0, import_react22.useCallback)((nodeId, updates) => {
+  const updateControl = (0, import_react23.useCallback)((nodeId, updates) => {
     setControls((prev) => {
       const newMap = new Map(prev);
       const existing = newMap.get(nodeId);
@@ -8213,7 +8960,7 @@ function useDeviceControls(initialBindings, options) {
       return newMap;
     });
   }, []);
-  const updateControlBatch = (0, import_react22.useCallback)((updates) => {
+  const updateControlBatch = (0, import_react23.useCallback)((updates) => {
     setControls((prev) => {
       const newMap = new Map(prev);
       Object.entries(updates).forEach(([nodeId, update]) => {
@@ -8225,7 +8972,7 @@ function useDeviceControls(initialBindings, options) {
       return newMap;
     });
   }, []);
-  const updateDeviceState = (0, import_react22.useCallback)(
+  const updateDeviceState = (0, import_react23.useCallback)(
     (nodeId, stateUpdates) => {
       setControls((prev) => {
         const newMap = new Map(prev);
@@ -8241,7 +8988,7 @@ function useDeviceControls(initialBindings, options) {
     },
     []
   );
-  const updateParameter = (0, import_react22.useCallback)(
+  const updateParameter = (0, import_react23.useCallback)(
     (nodeId, parameterId, value) => {
       setControls((prev) => {
         const newMap = new Map(prev);
@@ -8268,27 +9015,27 @@ function useDeviceControls(initialBindings, options) {
     },
     []
   );
-  const setControlBinding = (0, import_react22.useCallback)((binding) => {
+  const setControlBinding = (0, import_react23.useCallback)((binding) => {
     setControls((prev) => {
       const newMap = new Map(prev);
       newMap.set(binding.nodeId, binding);
       return newMap;
     });
   }, []);
-  const removeControlBinding = (0, import_react22.useCallback)((nodeId) => {
+  const removeControlBinding = (0, import_react23.useCallback)((nodeId) => {
     setControls((prev) => {
       const newMap = new Map(prev);
       newMap.delete(nodeId);
       return newMap;
     });
   }, []);
-  const getControlBinding = (0, import_react22.useCallback)(
+  const getControlBinding = (0, import_react23.useCallback)(
     (nodeId) => {
       return controls.get(nodeId);
     },
     [controls]
   );
-  const isCommandPending = (0, import_react22.useCallback)(
+  const isCommandPending = (0, import_react23.useCallback)(
     (nodeId, kind) => {
       if (kind) {
         const prefix2 = `${nodeId}:${kind}`;
@@ -8305,7 +9052,7 @@ function useDeviceControls(initialBindings, options) {
     },
     [pendingCommands]
   );
-  const markPending = (0, import_react22.useCallback)(
+  const markPending = (0, import_react23.useCallback)(
     (key, delta) => {
       const next = (pendingRef.current.get(key) ?? 0) + delta;
       if (next > 0) pendingRef.current.set(key, next);
@@ -8314,7 +9061,7 @@ function useDeviceControls(initialBindings, options) {
     },
     [syncPending]
   );
-  const runCommand = (0, import_react22.useCallback)(
+  const runCommand = (0, import_react23.useCallback)(
     async (nodeId, key, invoke, messages) => {
       const binding = controls.get(nodeId);
       if (!binding) return;
@@ -8354,7 +9101,7 @@ function useDeviceControls(initialBindings, options) {
     },
     [controls, updateDeviceState, markPending, commandTimeoutMs]
   );
-  const sendModeChange = (0, import_react22.useCallback)(
+  const sendModeChange = (0, import_react23.useCallback)(
     (nodeId, mode) => runCommand(
       nodeId,
       commandKey(nodeId, "mode"),
@@ -8363,7 +9110,7 @@ function useDeviceControls(initialBindings, options) {
     ),
     [runCommand]
   );
-  const sendParameterChange = (0, import_react22.useCallback)(
+  const sendParameterChange = (0, import_react23.useCallback)(
     (nodeId, parameterId, value) => runCommand(
       nodeId,
       commandKey(nodeId, "parameter", parameterId),
@@ -8372,21 +9119,21 @@ function useDeviceControls(initialBindings, options) {
     ),
     [runCommand]
   );
-  const sendStartCommand = (0, import_react22.useCallback)(
+  const sendStartCommand = (0, import_react23.useCallback)(
     (nodeId) => runCommand(nodeId, commandKey(nodeId, "start"), (binding) => binding.actions.onStart?.(), {
       success: "Start command sent",
       failure: "Start command failed"
     }),
     [runCommand]
   );
-  const sendStopCommand = (0, import_react22.useCallback)(
+  const sendStopCommand = (0, import_react23.useCallback)(
     (nodeId) => runCommand(nodeId, commandKey(nodeId, "stop"), (binding) => binding.actions.onStop?.(), {
       success: "Stop command sent",
       failure: "Stop command failed"
     }),
     [runCommand]
   );
-  const sendCustomAction = (0, import_react22.useCallback)(
+  const sendCustomAction = (0, import_react23.useCallback)(
     (nodeId, actionId) => runCommand(
       nodeId,
       commandKey(nodeId, "action", actionId),
@@ -8439,9 +9186,9 @@ function createConfigBinding(nodeId, tag, parameters, actions, options) {
 }
 
 // src/hooks/useDeviceConfigs.ts
-var import_react23 = require("react");
+var import_react24 = require("react");
 function useDeviceConfigs(initialConfigs) {
-  const [configs, setConfigs] = (0, import_react23.useState)(() => {
+  const [configs, setConfigs] = (0, import_react24.useState)(() => {
     const map = /* @__PURE__ */ new Map();
     if (initialConfigs) {
       initialConfigs.forEach((config) => {
@@ -8450,13 +9197,13 @@ function useDeviceConfigs(initialConfigs) {
     }
     return map;
   });
-  const getConfig = (0, import_react23.useCallback)(
+  const getConfig = (0, import_react24.useCallback)(
     (nodeId) => {
       return configs.get(nodeId);
     },
     [configs]
   );
-  const updateConfig = (0, import_react23.useCallback)((nodeId, updates) => {
+  const updateConfig = (0, import_react24.useCallback)((nodeId, updates) => {
     setConfigs((prev) => {
       const newMap = new Map(prev);
       const existing = newMap.get(nodeId);
@@ -8470,7 +9217,7 @@ function useDeviceConfigs(initialConfigs) {
       return newMap;
     });
   }, []);
-  const updateConfigState = (0, import_react23.useCallback)((nodeId, stateUpdates) => {
+  const updateConfigState = (0, import_react24.useCallback)((nodeId, stateUpdates) => {
     setConfigs((prev) => {
       const newMap = new Map(prev);
       const existing = newMap.get(nodeId);
@@ -8483,7 +9230,7 @@ function useDeviceConfigs(initialConfigs) {
       return newMap;
     });
   }, []);
-  const updateConfigBatch = (0, import_react23.useCallback)((updates) => {
+  const updateConfigBatch = (0, import_react24.useCallback)((updates) => {
     setConfigs((prev) => {
       const newMap = new Map(prev);
       Object.entries(updates).forEach(([nodeId, update]) => {
@@ -8495,7 +9242,7 @@ function useDeviceConfigs(initialConfigs) {
       return newMap;
     });
   }, []);
-  const updateParameterValue = (0, import_react23.useCallback)((nodeId, parameterId, value) => {
+  const updateParameterValue = (0, import_react24.useCallback)((nodeId, parameterId, value) => {
     setConfigs((prev) => {
       const newMap = new Map(prev);
       const existing = newMap.get(nodeId);
@@ -8512,7 +9259,7 @@ function useDeviceConfigs(initialConfigs) {
       return newMap;
     });
   }, []);
-  const applyConfig = (0, import_react23.useCallback)(
+  const applyConfig = (0, import_react24.useCallback)(
     async (nodeId) => {
       const config = configs.get(nodeId);
       if (!config || !config.actions.onApply) {
@@ -8545,7 +9292,7 @@ function useDeviceConfigs(initialConfigs) {
     },
     [configs, updateConfigState]
   );
-  const saveConfig = (0, import_react23.useCallback)(
+  const saveConfig = (0, import_react24.useCallback)(
     async (nodeId) => {
       const config = configs.get(nodeId);
       if (!config || !config.actions.onSave) {
@@ -8579,7 +9326,7 @@ function useDeviceConfigs(initialConfigs) {
     },
     [configs, updateConfigState]
   );
-  const resetConfig = (0, import_react23.useCallback)(
+  const resetConfig = (0, import_react24.useCallback)(
     async (nodeId) => {
       const config = configs.get(nodeId);
       if (!config) {
@@ -8609,7 +9356,7 @@ function useDeviceConfigs(initialConfigs) {
     },
     [configs, updateConfig, updateConfigState]
   );
-  const cancelConfig = (0, import_react23.useCallback)(
+  const cancelConfig = (0, import_react24.useCallback)(
     (nodeId) => {
       const config = configs.get(nodeId);
       if (config?.actions.onCancel) {
@@ -8618,7 +9365,7 @@ function useDeviceConfigs(initialConfigs) {
     },
     [configs]
   );
-  const validateConfig = (0, import_react23.useCallback)(
+  const validateConfig = (0, import_react24.useCallback)(
     (nodeId) => {
       const config = configs.get(nodeId);
       if (!config) {
@@ -8660,21 +9407,21 @@ function useDeviceConfigs(initialConfigs) {
     },
     [configs, updateConfigState]
   );
-  const setConfig = (0, import_react23.useCallback)((config) => {
+  const setConfig = (0, import_react24.useCallback)((config) => {
     setConfigs((prev) => {
       const newMap = new Map(prev);
       newMap.set(config.nodeId, config);
       return newMap;
     });
   }, []);
-  const removeConfig = (0, import_react23.useCallback)((nodeId) => {
+  const removeConfig = (0, import_react24.useCallback)((nodeId) => {
     setConfigs((prev) => {
       const newMap = new Map(prev);
       newMap.delete(nodeId);
       return newMap;
     });
   }, []);
-  const clearConfigs = (0, import_react23.useCallback)(() => {
+  const clearConfigs = (0, import_react24.useCallback)(() => {
     setConfigs(/* @__PURE__ */ new Map());
   }, []);
   return {
@@ -8696,7 +9443,7 @@ function useDeviceConfigs(initialConfigs) {
 }
 
 // src/components/DeviceConfigPanel/DeviceConfigPanel.tsx
-var import_react24 = __toESM(require("react"), 1);
+var import_react25 = __toESM(require("react"), 1);
 var import_jsx_runtime23 = require("react/jsx-runtime");
 function DeviceConfigPanelImpl({
   binding,
@@ -8716,7 +9463,7 @@ function DeviceConfigPanelImpl({
   showBuiltInToast = true,
   embedded = false
 }) {
-  const [localValues, setLocalValues] = (0, import_react24.useState)(() => {
+  const [localValues, setLocalValues] = (0, import_react25.useState)(() => {
     if (binding) {
       const values = {};
       binding.parameters.forEach((param) => {
@@ -8726,7 +9473,7 @@ function DeviceConfigPanelImpl({
     }
     return {};
   });
-  const [collapsedSections, setCollapsedSections] = (0, import_react24.useState)(() => {
+  const [collapsedSections, setCollapsedSections] = (0, import_react25.useState)(() => {
     const collapsed = /* @__PURE__ */ new Set();
     if (binding?.sections) {
       binding.sections.forEach((section) => {
@@ -8737,9 +9484,9 @@ function DeviceConfigPanelImpl({
     }
     return collapsed;
   });
-  const [showToast, setShowToast] = (0, import_react24.useState)(true);
-  const [bindingId, setBindingId] = (0, import_react24.useState)(binding?.nodeId || null);
-  const lastResultTimestampRef = (0, import_react24.useRef)(0);
+  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);
   if (binding && binding.nodeId !== bindingId) {
     const values = {};
     binding.parameters.forEach((param) => {
@@ -8755,7 +9502,7 @@ function DeviceConfigPanelImpl({
     setCollapsedSections(collapsed);
     setBindingId(binding.nodeId);
   }
-  (0, import_react24.useEffect)(() => {
+  (0, import_react25.useEffect)(() => {
     const currentTimestamp = binding?.state.lastSaved || 0;
     if (binding?.state.lastSaveResult && currentTimestamp !== lastResultTimestampRef.current) {
       lastResultTimestampRef.current = currentTimestamp;
@@ -8772,7 +9519,7 @@ function DeviceConfigPanelImpl({
       };
     }
   }, [binding?.state.lastSaveResult, binding?.state.lastSaved, toastDuration]);
-  const parametersBySection = (0, import_react24.useMemo)(() => {
+  const parametersBySection = (0, import_react25.useMemo)(() => {
     if (!binding) return { _unsectioned: [] };
     const groups = { _unsectioned: [] };
     binding.parameters.forEach((param) => {
@@ -8787,7 +9534,7 @@ function DeviceConfigPanelImpl({
     });
     return groups;
   }, [binding]);
-  const sortedSections = (0, import_react24.useMemo)(() => {
+  const sortedSections = (0, import_react25.useMemo)(() => {
     if (!binding?.sections) return [];
     return [...binding.sections].sort((a, b) => (a.order || 0) - (b.order || 0));
   }, [binding]);
@@ -8890,7 +9637,49 @@ function DeviceConfigPanelImpl({
                   " (",
                   param.unit,
                   ")"
-                ] })
+                ] }),
+                param.forced?.active && /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
+                  "span",
+                  {
+                    "aria-label": "Forced",
+                    style: {
+                      display: "inline-flex",
+                      alignItems: "center",
+                      justifyContent: "center",
+                      width: "16px",
+                      height: "16px",
+                      marginLeft: "6px",
+                      fontSize: "10px",
+                      fontWeight: 700,
+                      textTransform: "none",
+                      letterSpacing: "normal",
+                      color: FORCED_MARK_COLOR.text,
+                      backgroundColor: FORCED_MARK_COLOR.bg,
+                      border: `1px solid ${FORCED_MARK_COLOR.border}`,
+                      borderRadius: "50%",
+                      verticalAlign: "middle"
+                    },
+                    children: "F"
+                  }
+                )
+              ]
+            }
+          ),
+          param.forced?.active && param.forced.realValue !== void 0 && /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)(
+            "div",
+            {
+              style: {
+                fontSize: `${fontSize.description}px`,
+                color: mutedTextColor,
+                marginTop: "-2px",
+                marginBottom: "6px",
+                fontFamily: "Arial, sans-serif"
+              },
+              children: [
+                "REAL",
+                " ",
+                typeof param.forced.realValue === "boolean" ? param.forced.realValue ? "ON" : "OFF" : String(param.forced.realValue),
+                param.unit ? ` ${param.unit}` : ""
               ]
             }
           ),
@@ -9401,10 +10190,10 @@ function DeviceConfigPanelImpl({
     )
   ] });
 }
-var DeviceConfigPanel = import_react24.default.memo(DeviceConfigPanelImpl);
+var DeviceConfigPanel = import_react25.default.memo(DeviceConfigPanelImpl);
 
 // src/diagram/hooks/useSimulation.ts
-var import_react25 = require("react");
+var import_react26 = require("react");
 function useSimulation(telemetry, updateTelemetryBatch, options = {}) {
   const {
     interval = 2e3,
@@ -9415,7 +10204,7 @@ function useSimulation(telemetry, updateTelemetryBatch, options = {}) {
     historyLength = 10,
     generateValue
   } = options;
-  (0, import_react25.useEffect)(() => {
+  (0, import_react26.useEffect)(() => {
     if (!enabled) return;
     const intervalId = setInterval(() => {
       const updates = [];
@@ -9466,6 +10255,7 @@ function useSimulation(telemetry, updateTelemetryBatch, options = {}) {
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
   Button,
+  COLOR_PRESETS,
   CardHeader,
   CardUnit,
   CardValue,
@@ -9479,6 +10269,7 @@ function useSimulation(telemetry, updateTelemetryBatch, options = {}) {
   DisplayModeToggle,
   EquipmentIndicator,
   EquipmentIndicatorWithSparkline,
+  FORCED_MARK_COLOR,
   FixedSVGContainer,
   FooterPanel,
   FullscreenContainer,
@@ -9494,6 +10285,7 @@ function useSimulation(telemetry, updateTelemetryBatch, options = {}) {
   PanelTabs,
   RightPanel,
   RightToggleButton,
+  STATUS_LED_APPEARANCE,
   SVGArea,
   SVGLockedOverlay,
   ScrollableSVGWrapper,
@@ -9504,6 +10296,8 @@ function useSimulation(telemetry, updateTelemetryBatch, options = {}) {
   ThemeProvider,
   ThemeToggle,
   TrendLine,
+  UNKNOWN_MARK_COLOR,
+  UNKNOWN_MARK_COLOR_DARK,
   ValueEntry,
   ZoomButton,
   ZoomControls,
@@ -9513,6 +10307,8 @@ function useSimulation(telemetry, updateTelemetryBatch, options = {}) {
   exampleDiagram,
   exportDiagram,
   generateRoutePoints,
+  getAppearanceDefaults,
+  getAppearanceSchema,
   getAvailableSymbols,
   getPortWorldPosition,
   getSymbolDefinition,
@@ -9520,9 +10316,12 @@ function useSimulation(telemetry, updateTelemetryBatch, options = {}) {
   mockSymbolLibrary,
   nodeHasPort,
   overlayStyles,
+  readAppearanceValue,
   registerSymbol,
   registerSymbols,
+  resolvePresetColor,
   resolveStatusColor,
+  useBooleanIndicators,
   useDeviceConfigs,
   useDeviceControls,
   useDrag,
@@ -9533,6 +10332,7 @@ function useSimulation(telemetry, updateTelemetryBatch, options = {}) {
   useTelemetryStatus,
   useTheme,
   useViewBox,
-  validateDiagram
+  validateDiagram,
+  writeAppearanceValue
 });
 //# sourceMappingURL=index.cjs.map