@procaaso/alphinity-ui-components 1.7.0 → 1.8.1

package/dist/index.cjs

@@ -1859,33 +1859,41 @@ function DeviceControlPanel({
           }
         )
       ] }),
-      activeCapabilities?.customActions && activeCapabilities.customActions.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("div", { style: { display: "flex", flexWrap: "wrap", gap: "8px" }, children: activeCapabilities.customActions.map((action) => /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(
-        "button",
-        {
-          onClick: () => onCustomAction?.(action.id),
-          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: "pointer",
-            transition: "all 0.15s"
+      activeCapabilities?.customActions && activeCapabilities.customActions.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("div", { style: { display: "flex", flexWrap: "wrap", gap: "8px" }, children: activeCapabilities.customActions.map((action) => {
+        const actionDisabled = action.disabled === true;
+        return /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(
+          "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__ */ (0, import_jsx_runtime8.jsx)("span", { style: { marginRight: "6px" }, children: action.icon }),
+              action.label
+            ]
           },
-          children: [
-            action.icon && /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("span", { style: { marginRight: "6px" }, children: action.icon }),
-            action.label
-          ]
-        },
-        action.id
-      )) })
+          action.id
+        );
+      }) })
     ] }),
     binding.state.lastCommandResult && showToast && /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
       "div",
@@ -4925,6 +4933,30 @@ function PipeRenderer({
 
 // src/components/PIDCanvas/DataOverlay.tsx
 var import_jsx_runtime18 = require("react/jsx-runtime");
+var PULSE_KEYFRAME_ID = "pid-data-overlay-pulse-keyframes";
+var PULSE_ANIMATION = "pid-data-overlay-pulse 1.5s ease-in-out infinite";
+function ensurePulseKeyframes() {
+  if (typeof document === "undefined") return;
+  if (document.getElementById(PULSE_KEYFRAME_ID)) return;
+  const style = document.createElement("style");
+  style.id = PULSE_KEYFRAME_ID;
+  style.textContent = "@keyframes pid-data-overlay-pulse{0%{opacity:.9}50%{opacity:.3}100%{opacity:.9}}";
+  document.head.appendChild(style);
+}
+function renderStatusDot(cx, cy, scale, fill) {
+  ensurePulseKeyframes();
+  return /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
+    "circle",
+    {
+      className: "pid-data-overlay-status-dot",
+      cx: cx + 35 * scale,
+      cy: cy - 18 * scale,
+      r: 3 * scale,
+      fill,
+      style: { animation: PULSE_ANIMATION }
+    }
+  );
+}
 function DataOverlay({
   nodeId,
   x,
@@ -5029,25 +5061,7 @@ function DataOverlay({
         children: displayText
       }
     ),
-    showStatus && value.status !== "normal" && /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
-      "circle",
-      {
-        cx: displayX + 35 * scale,
-        cy: displayY - 18 * scale,
-        r: 3 * scale,
-        fill: finalTextColor,
-        opacity: "0.9",
-        children: /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
-          "animate",
-          {
-            attributeName: "opacity",
-            values: "0.9;0.3;0.9",
-            dur: "1.5s",
-            repeatCount: "indefinite"
-          }
-        )
-      }
-    ),
+    showStatus && value.status !== "normal" && renderStatusDot(displayX, displayY, scale, finalTextColor),
     value.quality !== void 0 && value.quality < 100 && /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)(
       "text",
       {
@@ -8713,14 +8727,17 @@ function DeviceConfigPanel({
     const currentTimestamp = binding?.state.lastSaved || 0;
     if (binding?.state.lastSaveResult && currentTimestamp !== lastResultTimestampRef.current) {
       lastResultTimestampRef.current = currentTimestamp;
+      let hideTimer;
       const showTimer = setTimeout(() => {
         setShowToast(true);
-        const hideTimer = setTimeout(() => {
+        hideTimer = setTimeout(() => {
           setShowToast(false);
         }, toastDuration);
-        return () => clearTimeout(hideTimer);
       }, 0);
-      return () => clearTimeout(showTimer);
+      return () => {
+        clearTimeout(showTimer);
+        if (hideTimer) clearTimeout(hideTimer);
+      };
     }
   }, [binding?.state.lastSaveResult, binding?.state.lastSaved, toastDuration]);
   const parametersBySection = (0, import_react21.useMemo)(() => {