@procaaso/alphinity-ui-components 1.8.3 → 1.10.0

package/dist/index.cjs

@@ -44,6 +44,7 @@ __export(index_exports, {
   DisplayModeToggle: () => DisplayModeToggle,
   EquipmentIndicator: () => EquipmentIndicator,
   EquipmentIndicatorWithSparkline: () => EquipmentIndicatorWithSparkline,
+  FORCED_MARK_COLOR: () => FORCED_MARK_COLOR,
   FixedSVGContainer: () => FixedSVGContainer,
   FooterPanel: () => FooterPanel,
   FullscreenContainer: () => FullscreenContainer,
@@ -278,6 +279,8 @@ var ValueEntry = ({
   inputType = "numeric",
   label,
   readOnly = false,
+  forced = false,
+  realValue,
   className = "",
   disabled,
   ...props
@@ -328,9 +331,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 +351,57 @@ 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 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 +414,8 @@ var LegacyValueEntry = ({
   inputType = "numeric",
   label,
   readOnly = false,
+  forced = false,
+  realValue,
   className = "",
   disabled,
   ...props
@@ -448,6 +496,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 +565,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 +637,11 @@ var LegacyValueEntry = ({
               }
             }
           )
+        ] }),
+        forced && realValue !== void 0 && /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("div", { style: realValueStyle, children: [
+          "REAL ",
+          String(realValue),
+          unit ? ` ${unit}` : ""
         ] })
       ]
     }
@@ -578,6 +657,9 @@ var ControlPanel = ({
   onModeChange,
   setpointValue,
   onSetpointChange,
+  currentSetpointValue,
+  currentSetpointForced = false,
+  currentSetpointRealValue,
   secondSetpointValue,
   onSecondSetpointChange,
   modeConfigs = {},
@@ -674,6 +756,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,6 +861,8 @@ var StatusIndicator = ({
   labelPosition = "right",
   shape = "circle",
   led = true,
+  forced = false,
+  realValue,
   className = "",
   ...props
 }) => {
@@ -787,28 +886,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 +1050,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 +1117,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,
@@ -1050,6 +1142,7 @@ function DeviceControlPanelImpl({
   onUndock,
   undockIcon = "\u21F1",
   modeSelectionStyle = "buttons",
+  showBuiltInToast = true,
   embedded = false
 }) {
   const [localParameterValues, setLocalParameterValues] = (0, import_react5.useState)({});
@@ -1671,10 +1764,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",
@@ -1682,7 +1778,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)(
@@ -1704,6 +1822,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",
                 {
@@ -1895,7 +2034,7 @@ function DeviceControlPanelImpl({
         );
       }) })
     ] }),
-    binding.state.lastCommandResult && showToast && /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+    binding.state.lastCommandResult && showToast && showBuiltInToast && /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
       "div",
       {
         style: {
@@ -2802,19 +2941,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,
@@ -2823,7 +2981,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" })
+        ]
       }
     );
   }
@@ -2835,7 +2996,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: {
@@ -2844,30 +3005,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" })
+      ]
     }
   );
 };
@@ -2883,7 +3055,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;
@@ -2914,7 +3088,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: [
@@ -2990,12 +3164,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;
   }
@@ -3010,24 +3211,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,
@@ -3035,11 +3264,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: {
@@ -3055,45 +3324,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
@@ -4973,7 +5210,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;
@@ -5022,12 +5261,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",
       {
@@ -5037,8 +5280,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))"
       }
@@ -5087,6 +5330,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",
       {
@@ -8712,6 +8997,7 @@ function DeviceConfigPanelImpl({
   toastDuration = 3e3,
   onOpenControls,
   showControlsButton = true,
+  showBuiltInToast = true,
   embedded = false
 }) {
   const [localValues, setLocalValues] = (0, import_react24.useState)(() => {
@@ -8888,7 +9174,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}` : ""
               ]
             }
           ),
@@ -9377,7 +9705,7 @@ function DeviceConfigPanelImpl({
         }
       )
     ] }),
-    binding.state.lastSaveResult && showToast && /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
+    binding.state.lastSaveResult && showToast && showBuiltInToast && /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
       "div",
       {
         style: {
@@ -9477,6 +9805,7 @@ function useSimulation(telemetry, updateTelemetryBatch, options = {}) {
   DisplayModeToggle,
   EquipmentIndicator,
   EquipmentIndicatorWithSparkline,
+  FORCED_MARK_COLOR,
   FixedSVGContainer,
   FooterPanel,
   FullscreenContainer,