@procaaso/alphinity-ui-components 1.1.2 → 1.1.3

package/dist/index.d.cts

@@ -750,6 +750,50 @@ interface ThemeToggleProps extends react__default.HTMLAttributes<HTMLDivElement>
 }
 declare const ThemeToggle: react__default.FC<ThemeToggleProps>;
 
+/**
+ * ISA-101 High Performance HMI — Unified Status Color System
+ *
+ * Single source of truth for mapping device status to visual colors.
+ * Used by NodeRenderer (SVG fill/stroke), DeviceControlPanel (status indicator),
+ * and DataOverlay (telemetry badge).
+ */
+/** Canonical device status vocabulary */
+type DeviceStatus = 'normal' | 'warning' | 'alarm' | 'fault' | 'off' | 'starting' | 'stopping';
+/** Color entry covering both SVG node and overlay/panel needs */
+interface StatusColorEntry {
+    /** Fill color for SVG node symbols */
+    fill: string;
+    /** Stroke color for SVG node symbols */
+    stroke: string;
+    /** Background color for overlays and panel indicators */
+    bg: string;
+    /** Text color for overlays */
+    text: string;
+    /** Border color for overlays */
+    border: string;
+}
+/** Partial map for consumer overrides — only specify statuses you want to change */
+type StatusColorMap = Partial<Record<DeviceStatus, Partial<StatusColorEntry>>>;
+/**
+ * ISA-101 defaults.
+ *
+ * - normal:   muted grey (ISA-101: no color for normal operation)
+ * - warning:  amber/yellow
+ * - alarm:    red
+ * - fault:    dark red
+ * - off:      light grey (matches canvas default #edeeef)
+ * - starting: light green (transitional)
+ * - stopping: amber (transitional)
+ */
+declare const DEFAULT_STATUS_COLORS: Record<DeviceStatus, StatusColorEntry>;
+/**
+ * Resolve a status string to a full color entry.
+ *
+ * Priority: customMap[status] (merged) > DEFAULT_STATUS_COLORS[status] > off fallback.
+ * Supports aliases ('running' -> 'normal', 'stopped' -> 'off').
+ */
+declare function resolveStatusColor(status: string | undefined, customMap?: StatusColorMap): StatusColorEntry;
+
 interface NodeInstance {
     id: string;
     symbolId: string;
@@ -762,7 +806,7 @@ interface NodeInstance {
         y: number;
     };
     labelFontSize?: number;
-    status?: 'stopped' | 'running' | 'alarm' | 'warning' | string;
+    status?: 'normal' | 'warning' | 'alarm' | 'fault' | 'off' | 'starting' | 'stopping' | string;
     customColors?: {
         fill?: string;
         stroke?: string;
@@ -1296,6 +1340,8 @@ interface PIDCanvasProps extends react__default.HTMLAttributes<HTMLDivElement> {
     onMounted?: (controls: PIDCanvasControls) => void;
     /** Telemetry data bindings for live values */
     telemetry?: TelemetryMap;
+    /** Custom status-to-color map for node rendering (overrides ISA-101 defaults) */
+    statusColorMap?: StatusColorMap;
 }
 interface PIDCanvasControls {
     /** Fit view to show all diagram content */
@@ -1314,7 +1360,7 @@ interface PIDCanvasControls {
  *
  * Future: Editing tools, symbol library UI
  */
-declare function PIDCanvas({ diagram, className, style, features, onSelectionChange, onNodeClick, onPipeClick, onNodeMove, onDiagramChange, onDelete, onItemsCopied, onPaste, onSymbolDrop, onPipeCreated, onMounted, telemetry, ...props }: PIDCanvasProps): react__default.ReactElement;
+declare function PIDCanvas({ diagram, className, style, features, onSelectionChange, onNodeClick, onPipeClick, onNodeMove, onDiagramChange, onDelete, onItemsCopied, onPaste, onSymbolDrop, onPipeCreated, onMounted, telemetry, statusColorMap, ...props }: PIDCanvasProps): react__default.ReactElement;
 
 interface SymbolLibraryProps {
     /** Optional className for styling */
@@ -1810,4 +1856,4 @@ interface SimulationOptions {
  */
 declare function useSimulation(telemetry: TelemetryMap, updateTelemetryBatch: (updates: Array<any>) => void, options?: SimulationOptions): void;
 
-export { type AnchorType, Button, type ButtonProps, CardHeader, CardUnit, CardValue, CircularGauge, type CircularGaugeProps, type ConfigActions, type ConfigDisplay, type ConfigParameter, type ConfigSection, type ConfigState, type ConfigTheme, type ControlCapabilities, type ControlMode, ControlPanel, type ControlPanelProps, type ControlParameter, type ControlState, DEFAULT_THRESHOLDS, DashboardCard, type DataBinding, type DeviceConfigBinding, type DeviceConfigMap, DeviceConfigPanel, type DeviceConfigPanelProps, type DeviceControlBinding, type DeviceControlMap, DeviceControlPanel, type DeviceControlPanelProps, type Diagram, type DiagramMetadata, type DisplayMode, DisplayModeToggle, type DragPoint, type DragState, EquipmentIndicator, type EquipmentIndicatorProps, EquipmentIndicatorWithSparkline, type EquipmentIndicatorWithSparklineProps, FixedSVGContainer, FooterPanel, FullscreenContainer, FullscreenWorkspace, type FullscreenWorkspaceProps, type FullscreenWorkspaceTab, type KeyboardShortcutsOptions, LeftPanel, LeftToggleButton, LegacyValueEntry, type LegacyValueEntryProps, type ModeConfig, NodeConfigPanel, type NodeConfigPanelProps, type NodeControlConfig, NodeControlsPanel, type NodeControlsPanelProps, type NodeInstance, type Overlay, type OverlayContent, type OverlayTheme, type OverlayType, PIDCanvas, type PIDCanvasControls, type PIDCanvasFeatures, type PIDCanvasProps, PanelContent, PanelTabs, type PipeEdge, type PipeStyle, type Point, type PortDefinition, type PortInstance, type PortType, RightPanel, RightToggleButton, SVGArea, SVGLockedOverlay, type SVGLockedOverlayProps, ScrollableSVGWrapper, type SelectionState, Selector, type SelectorOption, type SelectorProps, type SimulationOptions, Sparkline, type SparklineProps, StatusIndicator, type StatusIndicatorProps, type SymbolCategory, type SymbolDefinition, SymbolLibrary, type SymbolLibraryProps, type SymbolMetadata, type TelemetryBinding, type TelemetryMap, type TelemetryStatus$1 as TelemetryStatus, type TelemetryValue, ThemeProvider, ThemeToggle, type ThemeToggleProps, type Thresholds, type Transform, TrendLine, type TrendLineProps, type UseDragOptions, type UseDragResult, type UseSelectionOptions, type UseSelectionResult, type UseTelemetryOptions, type UseTelemetryResult, type UseTelemetryStatusOptions, type UseViewBoxOptions, type UseViewBoxResult, ValueEntry, type ValueEntryProps, type ViewBox, ZoomButton, ZoomControls, calculateThresholdStatus, createConfigBinding, createControlBinding, exampleDiagram, exportDiagram, generateRoutePoints, getAvailableSymbols, getPortWorldPosition, getSymbolDefinition, importDiagram, mockSymbolLibrary, nodeHasPort, overlayStyles, registerSymbol, registerSymbols, useDeviceConfigs, useDeviceControls, useDrag, useKeyboardShortcuts, useSelection, useSimulation, useTelemetry, useTelemetryStatus, useTheme, useViewBox, validateDiagram };
+export { type AnchorType, Button, type ButtonProps, CardHeader, CardUnit, CardValue, CircularGauge, type CircularGaugeProps, type ConfigActions, type ConfigDisplay, type ConfigParameter, type ConfigSection, type ConfigState, type ConfigTheme, type ControlCapabilities, type ControlMode, ControlPanel, type ControlPanelProps, type ControlParameter, type ControlState, DEFAULT_STATUS_COLORS, DEFAULT_THRESHOLDS, DashboardCard, type DataBinding, type DeviceConfigBinding, type DeviceConfigMap, DeviceConfigPanel, type DeviceConfigPanelProps, type DeviceControlBinding, type DeviceControlMap, DeviceControlPanel, type DeviceControlPanelProps, type DeviceStatus, type Diagram, type DiagramMetadata, type DisplayMode, DisplayModeToggle, type DragPoint, type DragState, EquipmentIndicator, type EquipmentIndicatorProps, EquipmentIndicatorWithSparkline, type EquipmentIndicatorWithSparklineProps, FixedSVGContainer, FooterPanel, FullscreenContainer, FullscreenWorkspace, type FullscreenWorkspaceProps, type FullscreenWorkspaceTab, type KeyboardShortcutsOptions, LeftPanel, LeftToggleButton, LegacyValueEntry, type LegacyValueEntryProps, type ModeConfig, NodeConfigPanel, type NodeConfigPanelProps, type NodeControlConfig, NodeControlsPanel, type NodeControlsPanelProps, type NodeInstance, type Overlay, type OverlayContent, type OverlayTheme, type OverlayType, PIDCanvas, type PIDCanvasControls, type PIDCanvasFeatures, type PIDCanvasProps, PanelContent, PanelTabs, type PipeEdge, type PipeStyle, type Point, type PortDefinition, type PortInstance, type PortType, RightPanel, RightToggleButton, SVGArea, SVGLockedOverlay, type SVGLockedOverlayProps, ScrollableSVGWrapper, type SelectionState, Selector, type SelectorOption, type SelectorProps, type SimulationOptions, Sparkline, type SparklineProps, type StatusColorEntry, type StatusColorMap, StatusIndicator, type StatusIndicatorProps, type SymbolCategory, type SymbolDefinition, SymbolLibrary, type SymbolLibraryProps, type SymbolMetadata, type TelemetryBinding, type TelemetryMap, type TelemetryStatus$1 as TelemetryStatus, type TelemetryValue, ThemeProvider, ThemeToggle, type ThemeToggleProps, type Thresholds, type Transform, TrendLine, type TrendLineProps, type UseDragOptions, type UseDragResult, type UseSelectionOptions, type UseSelectionResult, type UseTelemetryOptions, type UseTelemetryResult, type UseTelemetryStatusOptions, type UseViewBoxOptions, type UseViewBoxResult, ValueEntry, type ValueEntryProps, type ViewBox, ZoomButton, ZoomControls, calculateThresholdStatus, createConfigBinding, createControlBinding, exampleDiagram, exportDiagram, generateRoutePoints, getAvailableSymbols, getPortWorldPosition, getSymbolDefinition, importDiagram, mockSymbolLibrary, nodeHasPort, overlayStyles, registerSymbol, registerSymbols, resolveStatusColor, useDeviceConfigs, useDeviceControls, useDrag, useKeyboardShortcuts, useSelection, useSimulation, useTelemetry, useTelemetryStatus, useTheme, useViewBox, validateDiagram };

package/dist/index.d.ts

@@ -750,6 +750,50 @@ interface ThemeToggleProps extends react__default.HTMLAttributes<HTMLDivElement>
 }
 declare const ThemeToggle: react__default.FC<ThemeToggleProps>;
 
+/**
+ * ISA-101 High Performance HMI — Unified Status Color System
+ *
+ * Single source of truth for mapping device status to visual colors.
+ * Used by NodeRenderer (SVG fill/stroke), DeviceControlPanel (status indicator),
+ * and DataOverlay (telemetry badge).
+ */
+/** Canonical device status vocabulary */
+type DeviceStatus = 'normal' | 'warning' | 'alarm' | 'fault' | 'off' | 'starting' | 'stopping';
+/** Color entry covering both SVG node and overlay/panel needs */
+interface StatusColorEntry {
+    /** Fill color for SVG node symbols */
+    fill: string;
+    /** Stroke color for SVG node symbols */
+    stroke: string;
+    /** Background color for overlays and panel indicators */
+    bg: string;
+    /** Text color for overlays */
+    text: string;
+    /** Border color for overlays */
+    border: string;
+}
+/** Partial map for consumer overrides — only specify statuses you want to change */
+type StatusColorMap = Partial<Record<DeviceStatus, Partial<StatusColorEntry>>>;
+/**
+ * ISA-101 defaults.
+ *
+ * - normal:   muted grey (ISA-101: no color for normal operation)
+ * - warning:  amber/yellow
+ * - alarm:    red
+ * - fault:    dark red
+ * - off:      light grey (matches canvas default #edeeef)
+ * - starting: light green (transitional)
+ * - stopping: amber (transitional)
+ */
+declare const DEFAULT_STATUS_COLORS: Record<DeviceStatus, StatusColorEntry>;
+/**
+ * Resolve a status string to a full color entry.
+ *
+ * Priority: customMap[status] (merged) > DEFAULT_STATUS_COLORS[status] > off fallback.
+ * Supports aliases ('running' -> 'normal', 'stopped' -> 'off').
+ */
+declare function resolveStatusColor(status: string | undefined, customMap?: StatusColorMap): StatusColorEntry;
+
 interface NodeInstance {
     id: string;
     symbolId: string;
@@ -762,7 +806,7 @@ interface NodeInstance {
         y: number;
     };
     labelFontSize?: number;
-    status?: 'stopped' | 'running' | 'alarm' | 'warning' | string;
+    status?: 'normal' | 'warning' | 'alarm' | 'fault' | 'off' | 'starting' | 'stopping' | string;
     customColors?: {
         fill?: string;
         stroke?: string;
@@ -1296,6 +1340,8 @@ interface PIDCanvasProps extends react__default.HTMLAttributes<HTMLDivElement> {
     onMounted?: (controls: PIDCanvasControls) => void;
     /** Telemetry data bindings for live values */
     telemetry?: TelemetryMap;
+    /** Custom status-to-color map for node rendering (overrides ISA-101 defaults) */
+    statusColorMap?: StatusColorMap;
 }
 interface PIDCanvasControls {
     /** Fit view to show all diagram content */
@@ -1314,7 +1360,7 @@ interface PIDCanvasControls {
  *
  * Future: Editing tools, symbol library UI
  */
-declare function PIDCanvas({ diagram, className, style, features, onSelectionChange, onNodeClick, onPipeClick, onNodeMove, onDiagramChange, onDelete, onItemsCopied, onPaste, onSymbolDrop, onPipeCreated, onMounted, telemetry, ...props }: PIDCanvasProps): react__default.ReactElement;
+declare function PIDCanvas({ diagram, className, style, features, onSelectionChange, onNodeClick, onPipeClick, onNodeMove, onDiagramChange, onDelete, onItemsCopied, onPaste, onSymbolDrop, onPipeCreated, onMounted, telemetry, statusColorMap, ...props }: PIDCanvasProps): react__default.ReactElement;
 
 interface SymbolLibraryProps {
     /** Optional className for styling */
@@ -1810,4 +1856,4 @@ interface SimulationOptions {
  */
 declare function useSimulation(telemetry: TelemetryMap, updateTelemetryBatch: (updates: Array<any>) => void, options?: SimulationOptions): void;
 
-export { type AnchorType, Button, type ButtonProps, CardHeader, CardUnit, CardValue, CircularGauge, type CircularGaugeProps, type ConfigActions, type ConfigDisplay, type ConfigParameter, type ConfigSection, type ConfigState, type ConfigTheme, type ControlCapabilities, type ControlMode, ControlPanel, type ControlPanelProps, type ControlParameter, type ControlState, DEFAULT_THRESHOLDS, DashboardCard, type DataBinding, type DeviceConfigBinding, type DeviceConfigMap, DeviceConfigPanel, type DeviceConfigPanelProps, type DeviceControlBinding, type DeviceControlMap, DeviceControlPanel, type DeviceControlPanelProps, type Diagram, type DiagramMetadata, type DisplayMode, DisplayModeToggle, type DragPoint, type DragState, EquipmentIndicator, type EquipmentIndicatorProps, EquipmentIndicatorWithSparkline, type EquipmentIndicatorWithSparklineProps, FixedSVGContainer, FooterPanel, FullscreenContainer, FullscreenWorkspace, type FullscreenWorkspaceProps, type FullscreenWorkspaceTab, type KeyboardShortcutsOptions, LeftPanel, LeftToggleButton, LegacyValueEntry, type LegacyValueEntryProps, type ModeConfig, NodeConfigPanel, type NodeConfigPanelProps, type NodeControlConfig, NodeControlsPanel, type NodeControlsPanelProps, type NodeInstance, type Overlay, type OverlayContent, type OverlayTheme, type OverlayType, PIDCanvas, type PIDCanvasControls, type PIDCanvasFeatures, type PIDCanvasProps, PanelContent, PanelTabs, type PipeEdge, type PipeStyle, type Point, type PortDefinition, type PortInstance, type PortType, RightPanel, RightToggleButton, SVGArea, SVGLockedOverlay, type SVGLockedOverlayProps, ScrollableSVGWrapper, type SelectionState, Selector, type SelectorOption, type SelectorProps, type SimulationOptions, Sparkline, type SparklineProps, StatusIndicator, type StatusIndicatorProps, type SymbolCategory, type SymbolDefinition, SymbolLibrary, type SymbolLibraryProps, type SymbolMetadata, type TelemetryBinding, type TelemetryMap, type TelemetryStatus$1 as TelemetryStatus, type TelemetryValue, ThemeProvider, ThemeToggle, type ThemeToggleProps, type Thresholds, type Transform, TrendLine, type TrendLineProps, type UseDragOptions, type UseDragResult, type UseSelectionOptions, type UseSelectionResult, type UseTelemetryOptions, type UseTelemetryResult, type UseTelemetryStatusOptions, type UseViewBoxOptions, type UseViewBoxResult, ValueEntry, type ValueEntryProps, type ViewBox, ZoomButton, ZoomControls, calculateThresholdStatus, createConfigBinding, createControlBinding, exampleDiagram, exportDiagram, generateRoutePoints, getAvailableSymbols, getPortWorldPosition, getSymbolDefinition, importDiagram, mockSymbolLibrary, nodeHasPort, overlayStyles, registerSymbol, registerSymbols, useDeviceConfigs, useDeviceControls, useDrag, useKeyboardShortcuts, useSelection, useSimulation, useTelemetry, useTelemetryStatus, useTheme, useViewBox, validateDiagram };
+export { type AnchorType, Button, type ButtonProps, CardHeader, CardUnit, CardValue, CircularGauge, type CircularGaugeProps, type ConfigActions, type ConfigDisplay, type ConfigParameter, type ConfigSection, type ConfigState, type ConfigTheme, type ControlCapabilities, type ControlMode, ControlPanel, type ControlPanelProps, type ControlParameter, type ControlState, DEFAULT_STATUS_COLORS, DEFAULT_THRESHOLDS, DashboardCard, type DataBinding, type DeviceConfigBinding, type DeviceConfigMap, DeviceConfigPanel, type DeviceConfigPanelProps, type DeviceControlBinding, type DeviceControlMap, DeviceControlPanel, type DeviceControlPanelProps, type DeviceStatus, type Diagram, type DiagramMetadata, type DisplayMode, DisplayModeToggle, type DragPoint, type DragState, EquipmentIndicator, type EquipmentIndicatorProps, EquipmentIndicatorWithSparkline, type EquipmentIndicatorWithSparklineProps, FixedSVGContainer, FooterPanel, FullscreenContainer, FullscreenWorkspace, type FullscreenWorkspaceProps, type FullscreenWorkspaceTab, type KeyboardShortcutsOptions, LeftPanel, LeftToggleButton, LegacyValueEntry, type LegacyValueEntryProps, type ModeConfig, NodeConfigPanel, type NodeConfigPanelProps, type NodeControlConfig, NodeControlsPanel, type NodeControlsPanelProps, type NodeInstance, type Overlay, type OverlayContent, type OverlayTheme, type OverlayType, PIDCanvas, type PIDCanvasControls, type PIDCanvasFeatures, type PIDCanvasProps, PanelContent, PanelTabs, type PipeEdge, type PipeStyle, type Point, type PortDefinition, type PortInstance, type PortType, RightPanel, RightToggleButton, SVGArea, SVGLockedOverlay, type SVGLockedOverlayProps, ScrollableSVGWrapper, type SelectionState, Selector, type SelectorOption, type SelectorProps, type SimulationOptions, Sparkline, type SparklineProps, type StatusColorEntry, type StatusColorMap, StatusIndicator, type StatusIndicatorProps, type SymbolCategory, type SymbolDefinition, SymbolLibrary, type SymbolLibraryProps, type SymbolMetadata, type TelemetryBinding, type TelemetryMap, type TelemetryStatus$1 as TelemetryStatus, type TelemetryValue, ThemeProvider, ThemeToggle, type ThemeToggleProps, type Thresholds, type Transform, TrendLine, type TrendLineProps, type UseDragOptions, type UseDragResult, type UseSelectionOptions, type UseSelectionResult, type UseTelemetryOptions, type UseTelemetryResult, type UseTelemetryStatusOptions, type UseViewBoxOptions, type UseViewBoxResult, ValueEntry, type ValueEntryProps, type ViewBox, ZoomButton, ZoomControls, calculateThresholdStatus, createConfigBinding, createControlBinding, exampleDiagram, exportDiagram, generateRoutePoints, getAvailableSymbols, getPortWorldPosition, getSymbolDefinition, importDiagram, mockSymbolLibrary, nodeHasPort, overlayStyles, registerSymbol, registerSymbols, resolveStatusColor, useDeviceConfigs, useDeviceControls, useDrag, useKeyboardShortcuts, useSelection, useSimulation, useTelemetry, useTelemetryStatus, useTheme, useViewBox, validateDiagram };

package/dist/index.js

@@ -895,6 +895,31 @@ var NodeControlsPanel = ({
 
 // src/components/DeviceControlPanel/DeviceControlPanel.tsx
 import { useState as useState5, useEffect as useEffect2 } from "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 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
 import { Fragment as Fragment2, jsx as jsx8, jsxs as jsxs7 } from "react/jsx-runtime";
 function DeviceControlPanel({
   binding,
@@ -969,23 +994,8 @@ function DeviceControlPanel({
   const textColor = binding.theme?.textColor || "#000000";
   const mutedTextColor = "#666666";
   const selectedColor = "#b4d0fe";
-  const statusColors = {
-    normal: binding.theme?.statusColors?.normal || "#888888",
-    // Gray (no alarm)
-    warning: binding.theme?.statusColors?.warning || "#FFD700",
-    // Yellow
-    alarm: binding.theme?.statusColors?.alarm || "#FF0000",
-    // Red
-    fault: binding.theme?.statusColors?.fault || "#FF0000",
-    // Red
-    off: binding.theme?.statusColors?.off || "#666666",
-    // Dark gray
-    starting: binding.theme?.statusColors?.starting || "#90EE90",
-    // Light green
-    stopping: binding.theme?.statusColors?.stopping || "#FFD700"
-    // Yellow
-  };
-  const statusColor = statusColors[binding.state.status || "normal"];
+  const statusEntry = resolveStatusColor(binding.state.status, binding.theme?.statusColors);
+  const statusColor = statusEntry.bg;
   const handleModeChange = (mode) => {
     onModeChange?.(mode);
   };
@@ -1272,7 +1282,10 @@ function DeviceControlPanel({
           /* @__PURE__ */ jsxs7(
             "div",
             {
-              onClick: () => setShowModeModal(true),
+              onClick: () => {
+                setPendingMode(currentMode);
+                setShowModeModal(true);
+              },
               style: {
                 padding: "12px",
                 backgroundColor: surfaceColor,
@@ -4012,7 +4025,8 @@ function NodeRenderer({
   onNodeDragStart,
   draggingNodeId,
   dragOffset = { x: 0, y: 0 },
-  enableDrag = false
+  enableDrag = false,
+  statusColorMap
 }) {
   return /* @__PURE__ */ jsx15("g", { id: "layer-nodes", children: nodes2.filter((node) => node.visible !== false).map((node) => {
     const symbol = getSymbolDefinition(node.symbolId);
@@ -4071,24 +4085,9 @@ function NodeRenderer({
         `translate(${centerX}, ${centerY}) scale(${scaleX}, ${scaleY}) translate(${-centerX}, ${-centerY})`
       );
     }
-    const getStatusColor = (status) => {
-      switch (status) {
-        case "running":
-          return "#22c55e";
-        // Green
-        case "alarm":
-          return "#ef4444";
-        // Red
-        case "warning":
-          return "#f59e0b";
-        // Orange
-        case "stopped":
-        default:
-          return "#edeeef";
-      }
-    };
-    const fillColor = node.customColors?.fill ?? getStatusColor(node.status);
-    const strokeColor = node.customColors?.stroke ?? "rgb(0, 0, 0)";
+    const statusEntry = resolveStatusColor(node.status, statusColorMap);
+    const fillColor = node.customColors?.fill ?? statusEntry.fill;
+    const strokeColor = node.customColors?.stroke ?? statusEntry.stroke;
     return /* @__PURE__ */ jsxs11(
       "g",
       {
@@ -4352,7 +4351,8 @@ function DataOverlay({
   x,
   y,
   telemetry,
-  scale = 1
+  scale = 1,
+  statusColorMap
 }) {
   const { value, display, history } = telemetry;
   const showValue = display?.showValue ?? true;
@@ -4377,21 +4377,9 @@ function DataOverlay({
     }
     return val.toString();
   };
-  const defaultStatusColors = {
-    normal: { bg: "#10b981", text: "#ffffff", border: "#059669" },
-    warning: { bg: "#f59e0b", text: "#ffffff", border: "#d97706" },
-    alarm: { bg: "#ef4444", text: "#ffffff", border: "#dc2626" },
-    fault: { bg: "#dc2626", text: "#ffffff", border: "#b91c1c" },
-    off: { bg: "#6b7280", text: "#ffffff", border: "#4b5563" }
-  };
-  const getStatusColors = () => {
-    const customColor = telemetry.statusColors?.[value.status];
-    if (customColor) {
-      return { bg: customColor, text: "#ffffff", border: customColor };
-    }
-    return defaultStatusColors[value.status] || defaultStatusColors.normal;
-  };
-  const statusColors = getStatusColors();
+  const resolvedEntry = resolveStatusColor(value.status, statusColorMap);
+  const customColor = telemetry.statusColors?.[value.status];
+  const statusColors = customColor ? { bg: customColor, text: "#ffffff", border: customColor } : { bg: resolvedEntry.bg, text: resolvedEntry.text, border: resolvedEntry.border };
   const colors = backgroundColor && backgroundColor !== "status" ? { bg: backgroundColor, text: textColor || "#ffffff", border: backgroundColor } : statusColors;
   const finalTextColor = textColor || colors.text;
   const formattedValue = formatValue(value.value);
@@ -5662,6 +5650,7 @@ function PIDCanvas({
   onPipeCreated,
   onMounted,
   telemetry,
+  statusColorMap,
   ...props
 }) {
   const [localDiagram, setLocalDiagram] = useState13(diagram);
@@ -6315,7 +6304,8 @@ function PIDCanvas({
                   enableDrag: dragEnabled && !isConnecting,
                   onNodeDragStart: dragEnabled && !isConnecting ? handleNodeDragStart : void 0,
                   draggingNodeId: dragState.draggedId,
-                  dragOffset: dragState.offset
+                  dragOffset: dragState.offset,
+                  statusColorMap
                 }
               ),
               (features.editPipeRoutes ?? false) && /* @__PURE__ */ jsx19(
@@ -6349,7 +6339,8 @@ function PIDCanvas({
                     x: overlayX,
                     y: overlayY,
                     telemetry: binding,
-                    scale: features.telemetryScale ?? 1
+                    scale: features.telemetryScale ?? 1,
+                    statusColorMap
                   },
                   `telemetry-${node.id}`
                 );
@@ -8844,6 +8835,7 @@ export {
   CardValue,
   CircularGauge,
   ControlPanel,
+  DEFAULT_STATUS_COLORS,
   DEFAULT_THRESHOLDS,
   DashboardCard,
   DeviceConfigPanel,
@@ -8893,6 +8885,7 @@ export {
   overlayStyles,
   registerSymbol,
   registerSymbols,
+  resolveStatusColor,
   useDeviceConfigs,
   useDeviceControls,
   useDrag,