@procaaso/alphinity-ui-components 1.1.2 → 1.3.0

package/dist/index.js

@@ -477,11 +477,12 @@ var ControlPanel = ({
   secondSetpointValue,
   onSecondSetpointChange,
   modeConfigs = {},
-  defaultUnit = "Units",
+  defaultUnit,
   defaultLabel = "Setpoint",
-  defaultMin = 0,
-  defaultMax = 100,
-  defaultPrecision = 2,
+  defaultMin,
+  defaultMax,
+  defaultPrecision,
+  scaling,
   status = "normal",
   collapsed = false,
   onCollapseChange,
@@ -503,11 +504,11 @@ var ControlPanel = ({
     onCollapseChange?.(!newExpanded);
   };
   const currentModeConfig = modeConfigs[selectedMode] || {};
-  const currentUnit = currentModeConfig.unit || defaultUnit;
+  const currentUnit = currentModeConfig.unit || defaultUnit || scaling?.units || "Units";
   const currentLabel = currentModeConfig.label || defaultLabel;
-  const currentMin = currentModeConfig.min ?? defaultMin;
-  const currentMax = currentModeConfig.max ?? defaultMax;
-  const currentPrecision = currentModeConfig.precision ?? defaultPrecision;
+  const currentMin = currentModeConfig.min ?? defaultMin ?? scaling?.euLow ?? 0;
+  const currentMax = currentModeConfig.max ?? defaultMax ?? scaling?.euHigh ?? 100;
+  const currentPrecision = currentModeConfig.precision ?? defaultPrecision ?? scaling?.decimals ?? 2;
   const hasSecondSetpoint = currentModeConfig.hasSecondSetpoint || false;
   const baseClass = "ui-control-panel";
   const statusClass = status ? `ui-control-panel--${status}` : "";
@@ -895,6 +896,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,
@@ -911,6 +937,8 @@ function DeviceControlPanel({
   onParameterChange,
   onStart,
   onStop,
+  startPending = false,
+  stopPending = false,
   onCustomAction,
   onOpenConfig,
   showConfigButton = true,
@@ -969,23 +997,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 +1285,10 @@ function DeviceControlPanel({
           /* @__PURE__ */ jsxs7(
             "div",
             {
-              onClick: () => setShowModeModal(true),
+              onClick: () => {
+                setPendingMode(currentMode);
+                setShowModeModal(true);
+              },
               style: {
                 padding: "12px",
                 backgroundColor: surfaceColor,
@@ -1669,11 +1685,10 @@ function DeviceControlPanel({
           "button",
           {
             onClick: onStart,
-            disabled: binding.state.isRunning,
             style: {
               flex: 1,
               height: touchSize,
-              backgroundColor: binding.state.isRunning ? "#a3a3a3" : "#10b981",
+              backgroundColor: "#10b981",
               color: "#ffffff",
               border: "none",
               borderRadius: "6px",
@@ -1681,21 +1696,20 @@ function DeviceControlPanel({
               fontWeight: 700,
               fontFamily: "Arial, sans-serif",
               letterSpacing: "0.5px",
-              cursor: binding.state.isRunning ? "not-allowed" : "pointer",
-              opacity: binding.state.isRunning ? 0.5 : 1
+              cursor: "pointer",
+              opacity: 1
             },
-            children: "START"
+            children: startPending ? "STARTING\u2026" : "START"
           }
         ),
         activeCapabilities?.canStop && /* @__PURE__ */ jsx8(
           "button",
           {
             onClick: onStop,
-            disabled: !binding.state.isRunning,
             style: {
               flex: 1,
               height: touchSize,
-              backgroundColor: !binding.state.isRunning ? "#a3a3a3" : "#ef4444",
+              backgroundColor: "#ef4444",
               color: "#ffffff",
               border: "none",
               borderRadius: "6px",
@@ -1703,10 +1717,10 @@ function DeviceControlPanel({
               fontWeight: 700,
               fontFamily: "Arial, sans-serif",
               letterSpacing: "0.5px",
-              cursor: !binding.state.isRunning ? "not-allowed" : "pointer",
-              opacity: !binding.state.isRunning ? 0.5 : 1
+              cursor: "pointer",
+              opacity: 1
             },
-            children: "STOP"
+            children: stopPending ? "STOPPING\u2026" : "STOP"
           }
         )
       ] }),
@@ -4012,7 +4026,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 +4086,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,14 +4352,16 @@ function DataOverlay({
   x,
   y,
   telemetry,
-  scale = 1
+  scale = 1,
+  statusColorMap
 }) {
-  const { value, display, history } = telemetry;
+  const { value, display, history, scaling } = telemetry;
   const showValue = display?.showValue ?? true;
   const showStatus = display?.showStatus ?? true;
   const showSparkline = display?.showSparkline ?? false;
   const label = display?.label;
-  const precision = display?.precision;
+  const precision = scaling?.decimals ?? display?.precision;
+  const unit = scaling?.units ?? value.unit;
   const sparklineColor = display?.sparklineColor;
   const textColor = display?.textColor;
   const backgroundColor = display?.backgroundColor;
@@ -4377,25 +4379,13 @@ 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);
-  const displayText = value.unit ? `${formattedValue} ${value.unit}` : formattedValue;
+  const displayText = unit ? `${formattedValue} ${unit}` : formattedValue;
   const sparklinePath = (() => {
     if (!showSparkline || !history || history.length < 2) return "";
     const width = 70 * scale;
@@ -4403,8 +4393,9 @@ function DataOverlay({
     const padding = 5 * scale;
     const effectiveWidth = width - padding * 2;
     const effectiveHeight = height - padding * 2;
-    const min = Math.min(...history);
-    const max = Math.max(...history);
+    const hasEuRange = scaling?.euLow !== void 0 && scaling?.euHigh !== void 0 && scaling.euHigh !== scaling.euLow;
+    const min = hasEuRange ? scaling.euLow : Math.min(...history);
+    const max = hasEuRange ? scaling.euHigh : Math.max(...history);
     const range = max - min || 1;
     const points = history.map((val, i) => {
       const xPos = i / (history.length - 1) * effectiveWidth + padding;
@@ -5662,6 +5653,7 @@ function PIDCanvas({
   onPipeCreated,
   onMounted,
   telemetry,
+  statusColorMap,
   ...props
 }) {
   const [localDiagram, setLocalDiagram] = useState13(diagram);
@@ -6315,7 +6307,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 +6342,8 @@ function PIDCanvas({
                     x: overlayX,
                     y: overlayY,
                     telemetry: binding,
-                    scale: features.telemetryScale ?? 1
+                    scale: features.telemetryScale ?? 1,
+                    statusColorMap
                   },
                   `telemetry-${node.id}`
                 );
@@ -7562,8 +7556,12 @@ function createControlBinding(nodeId, deviceConfig, actions) {
 }
 
 // src/hooks/useDeviceControls.ts
-import { useState as useState15, useCallback as useCallback8 } from "react";
-function useDeviceControls(initialBindings) {
+import { useState as useState15, useCallback as useCallback8, useRef as useRef6 } from "react";
+function commandKey(nodeId, kind, suffix) {
+  return suffix ? `${nodeId}:${kind}:${suffix}` : `${nodeId}:${kind}`;
+}
+function useDeviceControls(initialBindings, options) {
+  const { commandTimeoutMs } = options ?? {};
   const [controls, setControls] = useState15(() => {
     const map = /* @__PURE__ */ new Map();
     if (initialBindings) {
@@ -7573,6 +7571,11 @@ function useDeviceControls(initialBindings) {
     }
     return map;
   });
+  const pendingRef = useRef6(/* @__PURE__ */ new Map());
+  const [pendingCommands, setPendingCommands] = useState15(() => /* @__PURE__ */ new Set());
+  const syncPending = useCallback8(() => {
+    setPendingCommands(new Set(pendingRef.current.keys()));
+  }, []);
   const updateControl = useCallback8((nodeId, updates) => {
     setControls((prev) => {
       const newMap = new Map(prev);
@@ -7662,121 +7665,112 @@ function useDeviceControls(initialBindings) {
     },
     [controls]
   );
-  const sendModeChange = useCallback8(
-    async (nodeId, mode) => {
-      const binding = controls.get(nodeId);
-      if (!binding) return;
-      updateDeviceState(nodeId, { currentMode: mode });
-      try {
-        await binding.actions.onModeChange?.(mode);
-        updateDeviceState(nodeId, {
-          lastCommandTime: Date.now(),
-          lastCommandResult: { success: true, message: `Mode changed to ${mode}` }
-        });
-      } catch (error) {
-        updateDeviceState(nodeId, {
-          currentMode: binding.state.currentMode,
-          lastCommandResult: {
-            success: false,
-            message: error instanceof Error ? error.message : "Mode change failed"
-          }
-        });
+  const isCommandPending = useCallback8(
+    (nodeId, kind) => {
+      if (kind) {
+        const prefix2 = `${nodeId}:${kind}`;
+        for (const key of pendingCommands) {
+          if (key === prefix2 || key.startsWith(`${prefix2}:`)) return true;
+        }
+        return false;
       }
+      const prefix = `${nodeId}:`;
+      for (const key of pendingCommands) {
+        if (key.startsWith(prefix)) return true;
+      }
+      return false;
     },
-    [controls, updateDeviceState]
+    [pendingCommands]
   );
-  const sendParameterChange = useCallback8(
-    async (nodeId, parameterId, value) => {
-      const binding = controls.get(nodeId);
-      if (!binding) return;
-      updateParameter(nodeId, parameterId, value);
-      try {
-        await binding.actions.onParameterChange?.(parameterId, value);
-        updateDeviceState(nodeId, {
-          lastCommandTime: Date.now(),
-          lastCommandResult: { success: true, message: `Parameter ${parameterId} updated` }
-        });
-      } catch (error) {
-        updateDeviceState(nodeId, {
-          lastCommandResult: {
-            success: false,
-            message: error instanceof Error ? error.message : "Parameter change failed"
-          }
-        });
-      }
+  const markPending = useCallback8(
+    (key, delta) => {
+      const next = (pendingRef.current.get(key) ?? 0) + delta;
+      if (next > 0) pendingRef.current.set(key, next);
+      else pendingRef.current.delete(key);
+      syncPending();
     },
-    [controls, updateParameter, updateDeviceState]
+    [syncPending]
   );
-  const sendStartCommand = useCallback8(
-    async (nodeId) => {
+  const runCommand = useCallback8(
+    async (nodeId, key, invoke, messages) => {
       const binding = controls.get(nodeId);
       if (!binding) return;
-      updateDeviceState(nodeId, { isRunning: true, status: "starting" });
+      markPending(key, 1);
+      let timer;
       try {
-        await binding.actions.onStart?.();
+        const action = Promise.resolve(invoke(binding));
+        if (commandTimeoutMs && commandTimeoutMs > 0) {
+          await Promise.race([
+            action,
+            new Promise((_, reject) => {
+              timer = setTimeout(
+                () => reject(new Error(`${messages.success.replace(/ sent$/, "")} timed out (unconfirmed)`)),
+                commandTimeoutMs
+              );
+            })
+          ]);
+        } else {
+          await action;
+        }
         updateDeviceState(nodeId, {
-          status: "normal",
           lastCommandTime: Date.now(),
-          lastCommandResult: { success: true, message: "Device started" }
+          lastCommandResult: { success: true, message: messages.success }
         });
       } catch (error) {
         updateDeviceState(nodeId, {
-          isRunning: false,
-          status: "fault",
+          lastCommandTime: Date.now(),
           lastCommandResult: {
             success: false,
-            message: error instanceof Error ? error.message : "Start failed"
+            message: error instanceof Error ? error.message : messages.failure
           }
         });
+      } finally {
+        if (timer) clearTimeout(timer);
+        markPending(key, -1);
       }
     },
-    [controls, updateDeviceState]
+    [controls, updateDeviceState, markPending, commandTimeoutMs]
+  );
+  const sendModeChange = useCallback8(
+    (nodeId, mode) => runCommand(
+      nodeId,
+      commandKey(nodeId, "mode"),
+      (binding) => binding.actions.onModeChange?.(mode),
+      { success: `Mode ${mode} command sent`, failure: "Mode change failed" }
+    ),
+    [runCommand]
+  );
+  const sendParameterChange = useCallback8(
+    (nodeId, parameterId, value) => runCommand(
+      nodeId,
+      commandKey(nodeId, "parameter", parameterId),
+      (binding) => binding.actions.onParameterChange?.(parameterId, value),
+      { success: `Parameter ${parameterId} command sent`, failure: "Parameter change failed" }
+    ),
+    [runCommand]
+  );
+  const sendStartCommand = useCallback8(
+    (nodeId) => runCommand(nodeId, commandKey(nodeId, "start"), (binding) => binding.actions.onStart?.(), {
+      success: "Start command sent",
+      failure: "Start command failed"
+    }),
+    [runCommand]
   );
   const sendStopCommand = useCallback8(
-    async (nodeId) => {
-      const binding = controls.get(nodeId);
-      if (!binding) return;
-      updateDeviceState(nodeId, { isRunning: false, status: "stopping" });
-      try {
-        await binding.actions.onStop?.();
-        updateDeviceState(nodeId, {
-          status: "off",
-          lastCommandTime: Date.now(),
-          lastCommandResult: { success: true, message: "Device stopped" }
-        });
-      } catch (error) {
-        updateDeviceState(nodeId, {
-          isRunning: true,
-          status: "fault",
-          lastCommandResult: {
-            success: false,
-            message: error instanceof Error ? error.message : "Stop failed"
-          }
-        });
-      }
-    },
-    [controls, updateDeviceState]
+    (nodeId) => runCommand(nodeId, commandKey(nodeId, "stop"), (binding) => binding.actions.onStop?.(), {
+      success: "Stop command sent",
+      failure: "Stop command failed"
+    }),
+    [runCommand]
   );
   const sendCustomAction = useCallback8(
-    async (nodeId, actionId) => {
-      const binding = controls.get(nodeId);
-      if (!binding) return;
-      try {
-        await binding.actions.onCustomAction?.(actionId);
-        updateDeviceState(nodeId, {
-          lastCommandTime: Date.now(),
-          lastCommandResult: { success: true, message: `Action ${actionId} executed` }
-        });
-      } catch (error) {
-        updateDeviceState(nodeId, {
-          lastCommandResult: {
-            success: false,
-            message: error instanceof Error ? error.message : "Action failed"
-          }
-        });
-      }
-    },
-    [controls, updateDeviceState]
+    (nodeId, actionId) => runCommand(
+      nodeId,
+      commandKey(nodeId, "action", actionId),
+      (binding) => binding.actions.onCustomAction?.(actionId),
+      { success: `Action ${actionId} command sent`, failure: "Action failed" }
+    ),
+    [runCommand]
   );
   return {
     controls,
@@ -7787,6 +7781,10 @@ function useDeviceControls(initialBindings) {
     setControlBinding,
     removeControlBinding,
     getControlBinding,
+    // In-flight command visibility (interaction state, not device state).
+    // `isCommandPending` is the stable query surface; the raw key set is
+    // intentionally not exported (its key format is an implementation detail).
+    isCommandPending,
     // Command helpers
     sendModeChange,
     sendParameterChange,
@@ -8075,7 +8073,7 @@ function useDeviceConfigs(initialConfigs) {
 }
 
 // src/components/DeviceConfigPanel/DeviceConfigPanel.tsx
-import { useState as useState17, useEffect as useEffect12, useMemo, useRef as useRef6 } from "react";
+import { useState as useState17, useEffect as useEffect12, useMemo, useRef as useRef7 } from "react";
 import { Fragment as Fragment9, jsx as jsx22, jsxs as jsxs18 } from "react/jsx-runtime";
 function DeviceConfigPanel({
   binding,
@@ -8117,7 +8115,7 @@ function DeviceConfigPanel({
   });
   const [showToast, setShowToast] = useState17(true);
   const [bindingId, setBindingId] = useState17(binding?.nodeId || null);
-  const lastResultTimestampRef = useRef6(0);
+  const lastResultTimestampRef = useRef7(0);
   if (binding && binding.nodeId !== bindingId) {
     const values = {};
     binding.parameters.forEach((param) => {
@@ -8844,6 +8842,7 @@ export {
   CardValue,
   CircularGauge,
   ControlPanel,
+  DEFAULT_STATUS_COLORS,
   DEFAULT_THRESHOLDS,
   DashboardCard,
   DeviceConfigPanel,
@@ -8893,6 +8892,7 @@ export {
   overlayStyles,
   registerSymbol,
   registerSymbols,
+  resolveStatusColor,
   useDeviceConfigs,
   useDeviceControls,
   useDrag,