@procaaso/alphinity-ui-components 1.15.0 → 1.17.0

package/dist/index.d.cts

@@ -510,8 +510,23 @@ interface CustomAction {
     label: string;
     /** Optional leading icon / emoji. */
     icon?: string;
-    /** Visual variant (reserved for future styling). */
-    variant?: 'primary' | 'secondary' | 'alarm' | 'warning';
+    /**
+     * Visual variant. The ramp variants give the button a colour that shows its
+     * function:
+     * - `start`: green, the same green as START (for example START RAMP).
+     * - `hold`: amber (for example HOLD).
+     * - `cancel`: slate grey. Red stays only on STOP, so an operator cannot
+     *   confuse "cancel the ramp" with "stop the device".
+     * - `complete`: a status, not a command. A pale green fill, a solid green
+     *   border, and a check mark. The operator cannot press it, and it never
+     *   fires onCustomAction.
+     * When `disabled` is true, `start` / `hold` / `cancel` use the same hatched,
+     * dashed-border look as a disabled START.
+     *
+     * `primary` / `secondary` / `alarm` / `warning` are reserved and render as a
+     * plain button.
+     */
+    variant?: 'primary' | 'secondary' | 'alarm' | 'warning' | 'start' | 'hold' | 'cancel' | 'complete';
     /**
      * When true, the button renders disabled and does NOT fire onCustomAction.
      * Use for actions that are only conditionally available (e.g. a Tare that is
@@ -698,6 +713,15 @@ interface DeviceControlBinding {
         style?: React.CSSProperties;
         /** Group parameters by category */
         groupParameters?: boolean;
+        /**
+         * Layout of the custom action buttons.
+         * - 'wrap' (default): each action has a 120px minimum width and the
+         *   actions wrap onto more rows when the panel is narrow.
+         * - 'row': all actions share ONE row with no minimum width and a small
+         *   side padding, so several actions fit in a narrow faceplate. A long
+         *   label can wrap onto two lines inside its button.
+         */
+        customActionsLayout?: 'wrap' | 'row';
     };
     /** Styling overrides */
     theme?: {

package/dist/index.d.ts

@@ -510,8 +510,23 @@ interface CustomAction {
     label: string;
     /** Optional leading icon / emoji. */
     icon?: string;
-    /** Visual variant (reserved for future styling). */
-    variant?: 'primary' | 'secondary' | 'alarm' | 'warning';
+    /**
+     * Visual variant. The ramp variants give the button a colour that shows its
+     * function:
+     * - `start`: green, the same green as START (for example START RAMP).
+     * - `hold`: amber (for example HOLD).
+     * - `cancel`: slate grey. Red stays only on STOP, so an operator cannot
+     *   confuse "cancel the ramp" with "stop the device".
+     * - `complete`: a status, not a command. A pale green fill, a solid green
+     *   border, and a check mark. The operator cannot press it, and it never
+     *   fires onCustomAction.
+     * When `disabled` is true, `start` / `hold` / `cancel` use the same hatched,
+     * dashed-border look as a disabled START.
+     *
+     * `primary` / `secondary` / `alarm` / `warning` are reserved and render as a
+     * plain button.
+     */
+    variant?: 'primary' | 'secondary' | 'alarm' | 'warning' | 'start' | 'hold' | 'cancel' | 'complete';
     /**
      * When true, the button renders disabled and does NOT fire onCustomAction.
      * Use for actions that are only conditionally available (e.g. a Tare that is
@@ -698,6 +713,15 @@ interface DeviceControlBinding {
         style?: React.CSSProperties;
         /** Group parameters by category */
         groupParameters?: boolean;
+        /**
+         * Layout of the custom action buttons.
+         * - 'wrap' (default): each action has a 120px minimum width and the
+         *   actions wrap onto more rows when the panel is narrow.
+         * - 'row': all actions share ONE row with no minimum width and a small
+         *   side padding, so several actions fit in a narrow faceplate. A long
+         *   label can wrap onto two lines inside its button.
+         */
+        customActionsLayout?: 'wrap' | 'row';
     };
     /** Styling overrides */
     theme?: {

package/dist/index.js

@@ -1143,6 +1143,20 @@ 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)";
+var START_BUTTON_BG = "#10b981";
+var STOP_BUTTON_BG = "#ef4444";
+var COMMAND_VARIANT_STYLES = {
+  start: { backgroundColor: START_BUTTON_BG, color: "#ffffff" },
+  hold: { backgroundColor: "#f59e0b", color: "#1f1300" },
+  cancel: { backgroundColor: "#64748b", color: "#ffffff" }
+};
+var COMPLETE_VARIANT_STYLE = {
+  backgroundColor: "#d1fae5",
+  color: "#065f46",
+  border: `2px solid ${START_BUTTON_BG}`,
+  cursor: "default",
+  opacity: 1
+};
 function DeviceControlPanelImpl({
   binding,
   onClose,
@@ -1224,6 +1238,7 @@ function DeviceControlPanelImpl({
   const statusColor = statusEntry.bg;
   const isUnknownStatus = normalizeDeviceStatus(binding.state.status) === "unknown";
   const startStopRowShown = binding.display?.showStartStop !== false && (activeCapabilities?.canStart === true || activeCapabilities?.canStop === true);
+  const customActionsInRow = binding.display?.customActionsLayout === "row";
   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));
@@ -2041,7 +2056,7 @@ function DeviceControlPanelImpl({
                 },
                 disabled: !startEnabledNow,
                 "aria-busy": startPending || void 0,
-                style: startStopButtonStyle(startEnabledNow, "#10b981"),
+                style: startStopButtonStyle(startEnabledNow, START_BUTTON_BG),
                 children: startPending ? "STARTING\u2026" : "START"
               }
             ),
@@ -2056,48 +2071,86 @@ function DeviceControlPanelImpl({
                 },
                 disabled: !stopEnabledNow,
                 "aria-busy": stopPending || void 0,
-                style: startStopButtonStyle(stopEnabledNow, "#ef4444"),
+                style: startStopButtonStyle(stopEnabledNow, STOP_BUTTON_BG),
                 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(
-          "button",
-          {
-            onClick: () => {
-              if (!actionDisabled) onCustomAction?.(action.id);
-            },
-            disabled: actionDisabled,
-            title: actionDisabled ? action.disabledReason : void 0,
-            style: {
-              flex: 1,
-              minWidth: "120px",
-              height: touchSize,
-              backgroundColor: surfaceColor,
-              color: textColor,
-              border: `1px solid ${borderColor}`,
-              borderRadius: "6px",
-              fontSize: "11px",
-              fontWeight: 600,
-              fontFamily: "monospace",
-              letterSpacing: "0.5px",
-              textTransform: "uppercase",
-              cursor: actionDisabled ? "not-allowed" : "pointer",
-              opacity: actionDisabled ? 0.4 : 1,
-              transition: "all 0.15s"
-            },
-            children: [
-              action.icon && /* @__PURE__ */ jsx9("span", { style: { marginRight: "6px" }, children: action.icon }),
-              action.label
-            ]
+      activeCapabilities?.customActions && activeCapabilities.customActions.length > 0 && /* @__PURE__ */ jsx9(
+        "div",
+        {
+          style: {
+            display: "flex",
+            flexWrap: customActionsInRow ? "nowrap" : "wrap",
+            gap: "8px"
           },
-          action.id
-        );
-      }) })
+          children: activeCapabilities.customActions.map((action) => {
+            const isComplete = action.variant === "complete";
+            const actionDisabled = action.disabled === true || isComplete;
+            const commandStyle = action.variant === "start" || action.variant === "hold" || action.variant === "cancel" ? COMMAND_VARIANT_STYLES[action.variant] : void 0;
+            let variantStyle;
+            if (isComplete) {
+              variantStyle = COMPLETE_VARIANT_STYLE;
+            } else if (commandStyle && actionDisabled) {
+              variantStyle = {
+                backgroundColor: DISABLED_BUTTON_BG,
+                backgroundImage: DISABLED_BUTTON_HATCH,
+                color: DISABLED_BUTTON_TEXT,
+                border: `2px dashed ${DISABLED_BUTTON_BORDER}`,
+                cursor: "not-allowed",
+                opacity: 1
+              };
+            } else if (commandStyle) {
+              variantStyle = {
+                ...commandStyle,
+                border: "2px solid transparent",
+                cursor: "pointer",
+                opacity: 1
+              };
+            } else {
+              variantStyle = {
+                backgroundColor: surfaceColor,
+                color: textColor,
+                border: `1px solid ${borderColor}`,
+                cursor: actionDisabled ? "not-allowed" : "pointer",
+                opacity: actionDisabled ? 0.4 : 1
+              };
+            }
+            return /* @__PURE__ */ jsxs8(
+              "button",
+              {
+                type: "button",
+                "data-variant": action.variant,
+                onClick: () => {
+                  if (!actionDisabled) onCustomAction?.(action.id);
+                },
+                disabled: actionDisabled,
+                title: action.disabled === true ? action.disabledReason : void 0,
+                style: {
+                  ...customActionsInRow ? { flex: "1 1 0px", minWidth: 0, paddingLeft: "4px", paddingRight: "4px" } : { flex: 1, minWidth: "120px" },
+                  height: touchSize,
+                  borderRadius: "6px",
+                  fontSize: "11px",
+                  fontWeight: 600,
+                  fontFamily: "monospace",
+                  letterSpacing: "0.5px",
+                  textTransform: "uppercase",
+                  transition: "all 0.15s",
+                  ...variantStyle
+                },
+                children: [
+                  isComplete && !action.icon && /* @__PURE__ */ jsx9("span", { "aria-hidden": "true", style: { marginRight: "6px" }, children: "\u2713" }),
+                  action.icon && /* @__PURE__ */ jsx9("span", { style: { marginRight: "6px" }, children: action.icon }),
+                  action.label
+                ]
+              },
+              action.id
+            );
+          })
+        }
+      )
     ] }),
     binding.state.lastCommandResult && showToast && showBuiltInToast && /* @__PURE__ */ jsx9(
       "div",