@procaaso/alphinity-ui-components 1.13.0 → 1.15.0

package/dist/index.d.cts

@@ -528,10 +528,29 @@ interface CustomAction {
  * Device control capabilities and commands
  */
 interface ControlCapabilities {
-    /** Can the device be started? */
+    /**
+     * Can the device be started? When `canStart` or `canStop` is true, the
+     * panel shows BOTH the START and the STOP button, each in a fixed place
+     * (alphinity-tffi #3853). A false `canStart` then shows START disabled.
+     * It does not remove START and it does not let STOP take its place.
+     */
     canStart?: boolean;
-    /** Can the device be stopped? */
+    /** Can the device be stopped? See `canStart`. */
     canStop?: boolean;
+    /**
+     * Does START apply now? Default: true (enabled). Set false to show START
+     * disabled, for example on a pump that runs already. Use this with
+     * `canStart: true` to keep "the device has a START" apart from "START
+     * applies now". A disabled START does not call `onStart`.
+     */
+    startEnabled?: boolean;
+    /**
+     * Does STOP apply now? Default: true (enabled). Set false to show STOP
+     * disabled, for example on a pump that is stopped. The panel itself never
+     * disables STOP for a pending command. A disabled STOP does not call
+     * `onStop`.
+     */
+    stopEnabled?: boolean;
     /** Can the device be paused? */
     canPause?: boolean;
     /** Can the device be reset? */
@@ -609,8 +628,11 @@ interface ControlState {
      * Current status. `unknown` marks an untrusted read (OPC UA StatusCode
      * severity Bad). This library never infers `unknown`; it only displays a
      * value the backend has already published as `unknown`.
+     *
+     * `forced` marks a device that a maintenance force holds. It resolves to
+     * `FORCED_MARK_COLOR`, the same violet as every other forced mark.
      */
-    status?: 'normal' | 'warning' | 'alarm' | 'fault' | 'off' | 'starting' | 'stopping' | 'unknown';
+    status?: 'normal' | 'warning' | 'alarm' | 'fault' | 'off' | 'starting' | 'stopping' | 'unknown' | 'forced';
     /** Status message */
     statusMessage?: string;
     /** Last command timestamp */
@@ -775,12 +797,18 @@ interface DeviceControlPanelProps {
     /** Called when stop button clicked */
     onStop?: () => void;
     /**
-     * Start command is in flight (awaiting ack). Shows a busy affordance on the
-     * START button and disables it, without locking STOP — wire from the hook's
-     * `isCommandPending(nodeId, 'start')`.
+     * Start command is in flight (awaiting ack). START shows "STARTING..." and
+     * is disabled, so a second tap cannot send a second start. STOP stays
+     * enabled: a pending start never disables STOP (alphinity-tffi #3853).
+     * Wire from the hook's `isCommandPending(nodeId, 'start')`, or from the
+     * host's own in-flight state.
      */
     startPending?: boolean;
-    /** Stop command is in flight (awaiting ack). See `startPending`. */
+    /**
+     * Stop command is in flight (awaiting ack). STOP shows "STOPPING..." and
+     * stays enabled, so STOP is always one tap. Only `capabilities.canStop`
+     * or `capabilities.stopEnabled` can disable STOP.
+     */
     stopPending?: boolean;
     /** Called when custom action clicked */
     onCustomAction?: (actionId: string) => void;
@@ -1166,7 +1194,7 @@ declare const ThemeToggle: React__default.FC<ThemeToggleProps>;
  * from a number or a threshold. The library only displays an `unknown` value
  * that the backend has already published.
  */
-type DeviceStatus = 'normal' | 'warning' | 'alarm' | 'fault' | 'off' | 'starting' | 'stopping' | 'unknown';
+type DeviceStatus = 'normal' | 'warning' | 'alarm' | 'fault' | 'off' | 'starting' | 'stopping' | 'unknown' | 'forced';
 /** Color entry covering both SVG node and overlay/panel needs */
 interface StatusColorEntry {
     /** Fill color for SVG node symbols */
@@ -1219,6 +1247,22 @@ declare const ISA_UNKNOWN_DARK: {
     readonly bg: "#23263a";
     readonly border: "#6f74a3";
 };
+/**
+ * Maintenance-force marking color (#3607, R19). A forced value is not a
+ * health status, and must never share a color with warning/alarm/fault or
+ * read as one of them. Violet is unused elsewhere in this palette.
+ *
+ * `DEFAULT_STATUS_COLORS.forced` points at this same object (alphinity-tffi
+ * #3771). A device that a maintenance force holds then gets the forced
+ * violet on its status dot, and not the `off` grey fallback. The forced
+ * entry is a marker, not a severity: it stays outside the
+ * warning/alarm/fault colours.
+ *
+ * Light fill + dark text, not a solid vivid chip: reads as a calm marker
+ * rather than an alarm sticker, while the vivid `border` shade still
+ * outlines a forced value's box/ring so it stays findable at a glance.
+ */
+declare const FORCED_MARK_COLOR: StatusColorEntry;
 /**
  * ISA-101 defaults.
  *
@@ -1231,6 +1275,8 @@ declare const ISA_UNKNOWN_DARK: {
  * - stopping: amber (transitional)
  * - unknown:  periwinkle (untrusted read; OPC UA severity Bad). Derived
  *             from ISA_UNKNOWN above, the shared token.
+ * - forced:   violet (a maintenance force holds the device). The same
+ *             object as FORCED_MARK_COLOR above.
  *
  * The unknown entry deliberately does NOT rely on its fill. The flat fill
  * sits a CIEDE2000 delta-E of 0.45 from the off fill after greyscale
@@ -1245,17 +1291,6 @@ declare const ISA_UNKNOWN_DARK: {
  * apart. That is why unknown never relies on colour anywhere.
  */
 declare const DEFAULT_STATUS_COLORS: Record<DeviceStatus, StatusColorEntry>;
-/**
- * Maintenance-force marking color (#3607, R19). Deliberately outside
- * DEFAULT_STATUS_COLORS: a forced value is not a health status, and must
- * never share a color with warning/alarm/fault or read as one of them.
- * Violet is unused elsewhere in this palette.
- *
- * Light fill + dark text, not a solid vivid chip: reads as a calm marker
- * rather than an alarm sticker, while the vivid `border` shade still
- * outlines a forced value's box/ring so it stays findable at a glance.
- */
-declare const FORCED_MARK_COLOR: StatusColorEntry;
 /**
  * Normalize a status string to its canonical `DeviceStatus` key.
  *

package/dist/index.d.ts

@@ -528,10 +528,29 @@ interface CustomAction {
  * Device control capabilities and commands
  */
 interface ControlCapabilities {
-    /** Can the device be started? */
+    /**
+     * Can the device be started? When `canStart` or `canStop` is true, the
+     * panel shows BOTH the START and the STOP button, each in a fixed place
+     * (alphinity-tffi #3853). A false `canStart` then shows START disabled.
+     * It does not remove START and it does not let STOP take its place.
+     */
     canStart?: boolean;
-    /** Can the device be stopped? */
+    /** Can the device be stopped? See `canStart`. */
     canStop?: boolean;
+    /**
+     * Does START apply now? Default: true (enabled). Set false to show START
+     * disabled, for example on a pump that runs already. Use this with
+     * `canStart: true` to keep "the device has a START" apart from "START
+     * applies now". A disabled START does not call `onStart`.
+     */
+    startEnabled?: boolean;
+    /**
+     * Does STOP apply now? Default: true (enabled). Set false to show STOP
+     * disabled, for example on a pump that is stopped. The panel itself never
+     * disables STOP for a pending command. A disabled STOP does not call
+     * `onStop`.
+     */
+    stopEnabled?: boolean;
     /** Can the device be paused? */
     canPause?: boolean;
     /** Can the device be reset? */
@@ -609,8 +628,11 @@ interface ControlState {
      * Current status. `unknown` marks an untrusted read (OPC UA StatusCode
      * severity Bad). This library never infers `unknown`; it only displays a
      * value the backend has already published as `unknown`.
+     *
+     * `forced` marks a device that a maintenance force holds. It resolves to
+     * `FORCED_MARK_COLOR`, the same violet as every other forced mark.
      */
-    status?: 'normal' | 'warning' | 'alarm' | 'fault' | 'off' | 'starting' | 'stopping' | 'unknown';
+    status?: 'normal' | 'warning' | 'alarm' | 'fault' | 'off' | 'starting' | 'stopping' | 'unknown' | 'forced';
     /** Status message */
     statusMessage?: string;
     /** Last command timestamp */
@@ -775,12 +797,18 @@ interface DeviceControlPanelProps {
     /** Called when stop button clicked */
     onStop?: () => void;
     /**
-     * Start command is in flight (awaiting ack). Shows a busy affordance on the
-     * START button and disables it, without locking STOP — wire from the hook's
-     * `isCommandPending(nodeId, 'start')`.
+     * Start command is in flight (awaiting ack). START shows "STARTING..." and
+     * is disabled, so a second tap cannot send a second start. STOP stays
+     * enabled: a pending start never disables STOP (alphinity-tffi #3853).
+     * Wire from the hook's `isCommandPending(nodeId, 'start')`, or from the
+     * host's own in-flight state.
      */
     startPending?: boolean;
-    /** Stop command is in flight (awaiting ack). See `startPending`. */
+    /**
+     * Stop command is in flight (awaiting ack). STOP shows "STOPPING..." and
+     * stays enabled, so STOP is always one tap. Only `capabilities.canStop`
+     * or `capabilities.stopEnabled` can disable STOP.
+     */
     stopPending?: boolean;
     /** Called when custom action clicked */
     onCustomAction?: (actionId: string) => void;
@@ -1166,7 +1194,7 @@ declare const ThemeToggle: React__default.FC<ThemeToggleProps>;
  * from a number or a threshold. The library only displays an `unknown` value
  * that the backend has already published.
  */
-type DeviceStatus = 'normal' | 'warning' | 'alarm' | 'fault' | 'off' | 'starting' | 'stopping' | 'unknown';
+type DeviceStatus = 'normal' | 'warning' | 'alarm' | 'fault' | 'off' | 'starting' | 'stopping' | 'unknown' | 'forced';
 /** Color entry covering both SVG node and overlay/panel needs */
 interface StatusColorEntry {
     /** Fill color for SVG node symbols */
@@ -1219,6 +1247,22 @@ declare const ISA_UNKNOWN_DARK: {
     readonly bg: "#23263a";
     readonly border: "#6f74a3";
 };
+/**
+ * Maintenance-force marking color (#3607, R19). A forced value is not a
+ * health status, and must never share a color with warning/alarm/fault or
+ * read as one of them. Violet is unused elsewhere in this palette.
+ *
+ * `DEFAULT_STATUS_COLORS.forced` points at this same object (alphinity-tffi
+ * #3771). A device that a maintenance force holds then gets the forced
+ * violet on its status dot, and not the `off` grey fallback. The forced
+ * entry is a marker, not a severity: it stays outside the
+ * warning/alarm/fault colours.
+ *
+ * Light fill + dark text, not a solid vivid chip: reads as a calm marker
+ * rather than an alarm sticker, while the vivid `border` shade still
+ * outlines a forced value's box/ring so it stays findable at a glance.
+ */
+declare const FORCED_MARK_COLOR: StatusColorEntry;
 /**
  * ISA-101 defaults.
  *
@@ -1231,6 +1275,8 @@ declare const ISA_UNKNOWN_DARK: {
  * - stopping: amber (transitional)
  * - unknown:  periwinkle (untrusted read; OPC UA severity Bad). Derived
  *             from ISA_UNKNOWN above, the shared token.
+ * - forced:   violet (a maintenance force holds the device). The same
+ *             object as FORCED_MARK_COLOR above.
  *
  * The unknown entry deliberately does NOT rely on its fill. The flat fill
  * sits a CIEDE2000 delta-E of 0.45 from the off fill after greyscale
@@ -1245,17 +1291,6 @@ declare const ISA_UNKNOWN_DARK: {
  * apart. That is why unknown never relies on colour anywhere.
  */
 declare const DEFAULT_STATUS_COLORS: Record<DeviceStatus, StatusColorEntry>;
-/**
- * Maintenance-force marking color (#3607, R19). Deliberately outside
- * DEFAULT_STATUS_COLORS: a forced value is not a health status, and must
- * never share a color with warning/alarm/fault or read as one of them.
- * Violet is unused elsewhere in this palette.
- *
- * Light fill + dark text, not a solid vivid chip: reads as a calm marker
- * rather than an alarm sticker, while the vivid `border` shade still
- * outlines a forced value's box/ring so it stays findable at a glance.
- */
-declare const FORCED_MARK_COLOR: StatusColorEntry;
 /**
  * Normalize a status string to its canonical `DeviceStatus` key.
  *

package/dist/index.js

@@ -277,6 +277,13 @@ var ISA_UNKNOWN_DARK = {
   bg: "#23263a",
   border: "#6f74a3"
 };
+var FORCED_MARK_COLOR = {
+  fill: "#ede9fe",
+  stroke: "#5b21b6",
+  bg: "#ede9fe",
+  text: "#5b21b6",
+  border: "#7c3aed"
+};
 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" },
@@ -285,14 +292,8 @@ var DEFAULT_STATUS_COLORS = {
   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" },
-  unknown: { fill: ISA_UNKNOWN.bg, stroke: ISA_UNKNOWN.border, bg: ISA_UNKNOWN.bg, text: ISA_UNKNOWN.fg, border: ISA_UNKNOWN.border }
-};
-var FORCED_MARK_COLOR = {
-  fill: "#ede9fe",
-  stroke: "#5b21b6",
-  bg: "#ede9fe",
-  text: "#5b21b6",
-  border: "#7c3aed"
+  unknown: { fill: ISA_UNKNOWN.bg, stroke: ISA_UNKNOWN.border, bg: ISA_UNKNOWN.bg, text: ISA_UNKNOWN.fg, border: ISA_UNKNOWN.border },
+  forced: FORCED_MARK_COLOR
 };
 var STATUS_ALIASES = {
   running: "normal",
@@ -1138,6 +1139,10 @@ var NodeControlsPanel = ({
 // src/components/DeviceControlPanel/DeviceControlPanel.tsx
 import React6, { useState as useState5, useEffect as useEffect2 } from "react";
 import { Fragment as Fragment2, jsx as jsx9, jsxs as jsxs8 } from "react/jsx-runtime";
+var DISABLED_BUTTON_BG = "#e5e7eb";
+var DISABLED_BUTTON_TEXT = "#4b5563";
+var DISABLED_BUTTON_BORDER = "#6b7280";
+var DISABLED_BUTTON_HATCH = "repeating-linear-gradient(135deg, rgba(0,0,0,0.10) 0px, rgba(0,0,0,0.10) 4px, transparent 4px, transparent 10px)";
 function DeviceControlPanelImpl({
   binding,
   onClose,
@@ -1218,6 +1223,36 @@ function DeviceControlPanelImpl({
   const statusEntry = resolveStatusColor(binding.state.status, binding.theme?.statusColors);
   const statusColor = statusEntry.bg;
   const isUnknownStatus = normalizeDeviceStatus(binding.state.status) === "unknown";
+  const startStopRowShown = binding.display?.showStartStop !== false && (activeCapabilities?.canStart === true || activeCapabilities?.canStop === true);
+  const startEnabledNow = activeCapabilities?.canStart === true && activeCapabilities?.startEnabled !== false && !startPending;
+  const stopEnabledNow = activeCapabilities?.canStop === true && activeCapabilities?.stopEnabled !== false;
+  const startStopFontPx = Math.max(18, Math.round(18 * fontScale));
+  const startStopButtonStyle = (enabled, enabledBg) => ({
+    flex: 1,
+    minWidth: 0,
+    height: Math.max(touchSize, 56),
+    borderRadius: "6px",
+    fontSize: `${startStopFontPx}px`,
+    fontWeight: 700,
+    fontFamily: "Arial, sans-serif",
+    letterSpacing: "0.5px",
+    ...enabled ? {
+      backgroundColor: enabledBg,
+      color: "#ffffff",
+      border: "2px solid transparent",
+      cursor: "pointer",
+      opacity: 1
+    } : {
+      // Disabled look that does not depend on colour (ISA-101): a dashed
+      // border and a diagonal hatch. A grey fill alone is not enough.
+      backgroundColor: DISABLED_BUTTON_BG,
+      backgroundImage: DISABLED_BUTTON_HATCH,
+      color: DISABLED_BUTTON_TEXT,
+      border: `2px dashed ${DISABLED_BUTTON_BORDER}`,
+      cursor: "not-allowed",
+      opacity: 1
+    }
+  });
   const handleModeChange = (mode) => {
     onModeChange?.(mode);
   };
@@ -1403,6 +1438,7 @@ function DeviceControlPanelImpl({
             /* @__PURE__ */ jsx9(
               "div",
               {
+                "data-testid": "device-status-dot",
                 style: {
                   width: "10px",
                   height: "10px",
@@ -1988,50 +2024,45 @@ function DeviceControlPanelImpl({
           param.id
         ))
       ] }),
-      binding.display?.showStartStop !== false && (activeCapabilities?.canStart || activeCapabilities?.canStop) && /* @__PURE__ */ jsxs8("div", { style: { display: "flex", gap: spacing.gap, marginBottom: spacing.marginBottom }, children: [
-        activeCapabilities?.canStart && /* @__PURE__ */ jsx9(
-          "button",
-          {
-            onClick: onStart,
-            style: {
-              flex: 1,
-              height: touchSize,
-              backgroundColor: "#10b981",
-              color: "#ffffff",
-              border: "none",
-              borderRadius: "6px",
-              fontSize: "12px",
-              fontWeight: 700,
-              fontFamily: "Arial, sans-serif",
-              letterSpacing: "0.5px",
-              cursor: "pointer",
-              opacity: 1
-            },
-            children: startPending ? "STARTING\u2026" : "START"
-          }
-        ),
-        activeCapabilities?.canStop && /* @__PURE__ */ jsx9(
-          "button",
-          {
-            onClick: onStop,
-            style: {
-              flex: 1,
-              height: touchSize,
-              backgroundColor: "#ef4444",
-              color: "#ffffff",
-              border: "none",
-              borderRadius: "6px",
-              fontSize: "12px",
-              fontWeight: 700,
-              fontFamily: "Arial, sans-serif",
-              letterSpacing: "0.5px",
-              cursor: "pointer",
-              opacity: 1
-            },
-            children: stopPending ? "STOPPING\u2026" : "STOP"
-          }
-        )
-      ] }),
+      startStopRowShown && /* @__PURE__ */ jsxs8(
+        "div",
+        {
+          "data-testid": "start-stop-row",
+          style: { display: "flex", gap: spacing.gap, marginBottom: spacing.marginBottom },
+          children: [
+            /* @__PURE__ */ jsx9(
+              "button",
+              {
+                type: "button",
+                "data-control": "start",
+                "data-enabled": startEnabledNow ? "true" : "false",
+                onClick: () => {
+                  if (startEnabledNow) onStart?.();
+                },
+                disabled: !startEnabledNow,
+                "aria-busy": startPending || void 0,
+                style: startStopButtonStyle(startEnabledNow, "#10b981"),
+                children: startPending ? "STARTING\u2026" : "START"
+              }
+            ),
+            /* @__PURE__ */ jsx9(
+              "button",
+              {
+                type: "button",
+                "data-control": "stop",
+                "data-enabled": stopEnabledNow ? "true" : "false",
+                onClick: () => {
+                  if (stopEnabledNow) onStop?.();
+                },
+                disabled: !stopEnabledNow,
+                "aria-busy": stopPending || void 0,
+                style: startStopButtonStyle(stopEnabledNow, "#ef4444"),
+                children: stopPending ? "STOPPING\u2026" : "STOP"
+              }
+            )
+          ]
+        }
+      ),
       activeCapabilities?.customActions && activeCapabilities.customActions.length > 0 && /* @__PURE__ */ jsx9("div", { style: { display: "flex", flexWrap: "wrap", gap: "8px" }, children: activeCapabilities.customActions.map((action) => {
         const actionDisabled = action.disabled === true;
         return /* @__PURE__ */ jsxs8(