@checkstack/anomaly-frontend 0.4.3 → 0.4.5

package/CHANGELOG.md

@@ -1,5 +1,61 @@
 # @checkstack/anomaly-frontend
 
+## 0.4.5
+
+### Patch Changes
+
+- f23f3c9: Gate decorative motion and blur effects behind
+  `usePerformance().isLowPower` on a focused set of high-traffic plugin
+  pages (Dashboard, Dependency map, System node, Notification bell,
+  Announcement banner / cards, Anomaly field overrides editor, SLO
+  attribution chart, Catalog droppable group). Hover scales, backdrop
+  blurs, `animate-pulse`/`animate-ping` accents, and entry transitions
+  now drop to static states on low-power devices; functional UX
+  transitions (Drawer/Dialog open-close, colour transitions) are left
+  alone.
+
+  Standardise the post-mutation error-toast voice on plugin pages by
+  migrating multi-clause `toast.error(extractErrorMessage(error, "Failed
+to X"))` call sites onto the `toastError(toast, "Failed to X", error)`
+  helper from `@checkstack/ui`. The helper applies the canonical
+  `"action: message"` prefix and 100-character truncation in one place,
+  and the now-orphaned `extractErrorMessage` imports are dropped from
+  the affected files. No business logic or component APIs changed.
+
+- Updated dependencies [f23f3c9]
+- Updated dependencies [f23f3c9]
+- Updated dependencies [f23f3c9]
+- Updated dependencies [f23f3c9]
+- Updated dependencies [f23f3c9]
+- Updated dependencies [f23f3c9]
+- Updated dependencies [f23f3c9]
+- Updated dependencies [f23f3c9]
+  - @checkstack/common@0.11.0
+  - @checkstack/healthcheck-frontend@0.19.5
+  - @checkstack/notification-common@1.2.0
+  - @checkstack/notification-frontend@0.4.5
+  - @checkstack/frontend-api@0.5.2
+  - @checkstack/ui@1.10.0
+  - @checkstack/anomaly-common@1.2.2
+  - @checkstack/catalog-common@2.2.2
+  - @checkstack/healthcheck-common@1.1.2
+  - @checkstack/signal-frontend@0.1.4
+
+## 0.4.4
+
+### Patch Changes
+
+- Updated dependencies [a06b899]
+- Updated dependencies [a06b899]
+- Updated dependencies [a06b899]
+  - @checkstack/notification-common@1.1.1
+  - @checkstack/healthcheck-frontend@0.19.4
+  - @checkstack/ui@1.9.0
+  - @checkstack/anomaly-common@1.2.1
+  - @checkstack/catalog-common@2.2.1
+  - @checkstack/healthcheck-common@1.1.1
+  - @checkstack/notification-frontend@0.4.4
+
 ## 0.4.3
 
 ### Patch Changes

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@checkstack/anomaly-frontend",
-  "version": "0.4.3",
+  "version": "0.4.5",
   "license": "Elastic-2.0",
   "type": "module",
   "main": "src/index.tsx",
@@ -13,16 +13,16 @@
     "lint:code": "eslint . --max-warnings 0"
   },
   "dependencies": {
-    "@checkstack/anomaly-common": "1.2.0",
-    "@checkstack/catalog-common": "2.2.0",
+    "@checkstack/anomaly-common": "1.2.1",
+    "@checkstack/catalog-common": "2.2.1",
     "@checkstack/common": "0.10.0",
     "@checkstack/frontend-api": "0.5.1",
-    "@checkstack/healthcheck-common": "1.1.0",
-    "@checkstack/healthcheck-frontend": "0.19.2",
-    "@checkstack/notification-common": "1.1.0",
-    "@checkstack/notification-frontend": "0.4.2",
+    "@checkstack/healthcheck-common": "1.1.1",
+    "@checkstack/healthcheck-frontend": "0.19.4",
+    "@checkstack/notification-common": "1.1.1",
+    "@checkstack/notification-frontend": "0.4.4",
     "@checkstack/signal-frontend": "0.1.3",
-    "@checkstack/ui": "1.8.2",
+    "@checkstack/ui": "1.9.0",
     "date-fns": "^4.1.0",
     "lucide-react": "^0.344.0",
     "react": "^18.2.0",

package/src/components/AnomalyFieldOverridesEditor.tsx

@@ -24,6 +24,8 @@ import {
   Slider,
   Input,
   Tooltip,
+  cn,
+  usePerformance,
 } from "@checkstack/ui";
 import type {
   AnomalyFieldConfig,
@@ -362,6 +364,7 @@ function FieldAccordionItem({
   onResetField,
   applyPreset,
 }: FieldAccordionItemProps) {
+  const { isLowPower } = usePerformance();
   const [advancedOpen, setAdvancedOpen] = useState(preset === "custom");
   // Tracks an explicit "Custom" click — needed because clicking Custom doesn't
   // change values, so `detectPreset` still resolves to whatever the prior
@@ -400,10 +403,13 @@ function FieldAccordionItem({
   return (
     <AccordionItem
       value={field}
-      className={`
-        rounded-xl border bg-card text-card-foreground shadow-sm transition-all duration-200 overflow-hidden
-        ${isOverridden ? "border-primary/40 shadow-md" : "border-border/40 opacity-80 hover:opacity-100"}
-      `}
+      className={cn(
+        "rounded-xl border bg-card text-card-foreground shadow-sm overflow-hidden",
+        !isLowPower && "transition-all duration-200",
+        isOverridden
+          ? "border-primary/40 shadow-md"
+          : "border-border/40 opacity-80 hover:opacity-100",
+      )}
     >
       <AccordionTrigger className="px-5 py-4 hover:no-underline">
         <div className="flex items-center justify-between flex-1 gap-4 mr-4">
@@ -544,6 +550,7 @@ interface PresetSelectorProps {
 }
 
 function PresetSelector({ value, onChange, disabled }: PresetSelectorProps) {
+  const { isLowPower } = usePerformance();
   const options: Preset[] = ["strict", "balanced", "relaxed", "custom"];
   const description =
     value === "custom"
@@ -567,16 +574,14 @@ function PresetSelector({ value, onChange, disabled }: PresetSelectorProps) {
               type="button"
               onClick={() => onChange(opt)}
               disabled={disabled}
-              className={`
-                px-4 py-1.5 text-xs font-semibold rounded-md transition-all
-                ${
-                  selected
-                    ? "bg-background text-foreground shadow-sm"
-                    : "text-muted-foreground hover:text-foreground"
-                }
-                disabled:opacity-50 disabled:cursor-not-allowed
-                capitalize
-              `}
+              className={cn(
+                "px-4 py-1.5 text-xs font-semibold rounded-md",
+                !isLowPower && "transition-all",
+                selected
+                  ? "bg-background text-foreground shadow-sm"
+                  : "text-muted-foreground hover:text-foreground",
+                "disabled:opacity-50 disabled:cursor-not-allowed capitalize",
+              )}
             >
               {opt}
             </button>
@@ -667,6 +672,7 @@ function AdvancedDisclosure({
   onToggle,
   children,
 }: AdvancedDisclosureProps) {
+  const { isLowPower } = usePerformance();
   return (
     <div className="border border-border/40 rounded-md bg-background/30">
       <button
@@ -676,7 +682,11 @@ function AdvancedDisclosure({
       >
         <span>Advanced</span>
         <ChevronDown
-          className={`w-4 h-4 transition-transform ${open ? "rotate-180" : ""}`}
+          className={cn(
+            "w-4 h-4",
+            !isLowPower && "transition-transform",
+            open && "rotate-180",
+          )}
         />
       </button>
       {open && (