@checkstack/dependency-frontend 0.4.4 → 0.4.5

package/CHANGELOG.md

@@ -1,5 +1,43 @@
 # @checkstack/dependency-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]
+  - @checkstack/common@0.11.0
+  - @checkstack/frontend-api@0.5.2
+  - @checkstack/dashboard-frontend@0.7.5
+  - @checkstack/gitops-frontend@0.4.5
+  - @checkstack/ui@1.10.0
+  - @checkstack/catalog-common@2.2.2
+  - @checkstack/dependency-common@1.1.2
+  - @checkstack/gitops-common@0.4.1
+  - @checkstack/healthcheck-common@1.1.2
+  - @checkstack/signal-frontend@0.1.4
+
 ## 0.4.4
 
 ### Patch Changes

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@checkstack/dependency-frontend",
-  "version": "0.4.4",
+  "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/catalog-common": "2.2.0",
+    "@checkstack/catalog-common": "2.2.1",
     "@checkstack/common": "0.10.0",
-    "@checkstack/dashboard-frontend": "0.7.3",
-    "@checkstack/dependency-common": "1.1.0",
+    "@checkstack/dashboard-frontend": "0.7.4",
+    "@checkstack/dependency-common": "1.1.1",
     "@checkstack/frontend-api": "0.5.1",
     "@checkstack/gitops-common": "0.4.0",
-    "@checkstack/gitops-frontend": "0.4.3",
-    "@checkstack/healthcheck-common": "1.1.0",
+    "@checkstack/gitops-frontend": "0.4.4",
+    "@checkstack/healthcheck-common": "1.1.1",
     "@checkstack/signal-frontend": "0.1.3",
-    "@checkstack/ui": "1.8.3",
+    "@checkstack/ui": "1.9.0",
     "@xyflow/react": "^12.10.2",
     "lucide-react": "^0.344.0",
     "react": "^18.2.0",

package/src/components/DependencyMapPage.tsx

@@ -27,6 +27,8 @@ import {
   Badge,
   LoadingSpinner,
   useToast,
+  usePerformance,
+  cn,
 } from "@checkstack/ui";
 import { Maximize2, Save, RefreshCw, Trash2 } from "lucide-react";
 import type { ImpactType } from "@checkstack/dependency-common";
@@ -83,6 +85,7 @@ function autoLayout(
 }
 
 function DependencyMapContent() {
+  const { isLowPower } = usePerformance();
   const depClient = usePluginClient(DependencyApi);
   const catalogClient = usePluginClient(CatalogApi);
   const healthCheckClient = usePluginClient(HealthCheckApi);
@@ -469,7 +472,10 @@ function DependencyMapContent() {
         {/* Top-right panel with actions */}
         <Panel position="top-right" className="flex gap-2">
           {hasUnsaved && (
-            <Badge variant="warning" className="animate-pulse">
+            <Badge
+              variant="warning"
+              className={cn(!isLowPower && "animate-pulse")}
+            >
               Unsaved
             </Badge>
           )}
@@ -478,7 +484,7 @@ function DependencyMapContent() {
             size="sm"
             onClick={handleSave}
             disabled={saveMutation.isPending || !hasUnsaved}
-            className="bg-card/90 backdrop-blur-sm"
+            className={cn(isLowPower ? "bg-card" : "bg-card/90 backdrop-blur-sm")}
           >
             <Save className="h-4 w-4 mr-1" />
             {saveMutation.isPending ? "Saving..." : "Save Layout"}
@@ -491,7 +497,7 @@ function DependencyMapContent() {
               void refetchWarnings();
               void refetchPositions();
             }}
-            className="bg-card/90 backdrop-blur-sm"
+            className={cn(isLowPower ? "bg-card" : "bg-card/90 backdrop-blur-sm")}
           >
             <RefreshCw className="h-4 w-4 mr-1" />
             Refresh
@@ -500,7 +506,7 @@ function DependencyMapContent() {
             variant="outline"
             size="sm"
             onClick={() => fitView({ padding: 0.3 })}
-            className="bg-card/90 backdrop-blur-sm"
+            className={cn(isLowPower ? "bg-card" : "bg-card/90 backdrop-blur-sm")}
           >
             <Maximize2 className="h-4 w-4 mr-1" />
             Fit
@@ -509,7 +515,12 @@ function DependencyMapContent() {
 
         {/* Bottom-left legend */}
         <Panel position="bottom-left">
-          <div className="bg-card/90 backdrop-blur-sm border border-border rounded-lg p-3 shadow-lg max-w-64">
+          <div
+            className={cn(
+              "border border-border rounded-lg p-3 shadow-lg max-w-64",
+              isLowPower ? "bg-card" : "bg-card/90 backdrop-blur-sm",
+            )}
+          >
             <p className="text-xs font-semibold text-muted-foreground mb-2 uppercase tracking-wider">
               Legend
             </p>
@@ -590,7 +601,12 @@ function DependencyMapContent() {
           }).isLocked;
           return (
           <Panel position="top-left">
-            <div className="bg-card/95 backdrop-blur-sm border border-border rounded-lg shadow-lg p-4 w-72 space-y-3">
+            <div
+              className={cn(
+                "border border-border rounded-lg shadow-lg p-4 w-72 space-y-3",
+                isLowPower ? "bg-card" : "bg-card/95 backdrop-blur-sm",
+              )}
+            >
               <div className="space-y-1">
                 <p className="text-sm font-semibold text-foreground">
                   {edgeSourceLocked ? "Dependency (GitOps)" : "Edit Dependency"}

package/src/components/canvas/SystemNode.tsx

@@ -1,5 +1,6 @@
 import { memo } from "react";
 import { Handle, Position, type NodeProps, type Node } from "@xyflow/react";
+import { cn, usePerformance } from "@checkstack/ui";
 
 export interface SystemNodeData extends Record<string, unknown> {
   label: string;
@@ -59,6 +60,7 @@ export const SystemNodeComponent = memo(function SystemNodeComponent({
   data,
   selected,
 }: NodeProps<SystemNode>) {
+  const { isLowPower } = usePerformance();
   const effectiveStatus = combineStatus(data.status, data.derivedState);
   const styles = statusStyles[effectiveStatus];
   const hasConnections = data.upstreamCount > 0 || data.downstreamCount > 0;
@@ -73,14 +75,16 @@ export const SystemNodeComponent = memo(function SystemNodeComponent({
       />
 
       <div
-        className={`
-          rounded-xl border-2 shadow-lg backdrop-blur-sm
-          transition-all duration-200
-          ${styles.border} ${styles.bg} ${styles.glow}
-          ${selected ? "ring-2 ring-primary ring-offset-2 ring-offset-background" : ""}
-          hover:scale-[1.02] cursor-grab active:cursor-grabbing
-          min-w-[140px] max-w-[220px] overflow-hidden
-        `}
+        className={cn(
+          "rounded-xl border-2 shadow-lg",
+          !isLowPower && "backdrop-blur-sm transition-all duration-200",
+          styles.border,
+          styles.bg,
+          styles.glow,
+          selected && "ring-2 ring-primary ring-offset-2 ring-offset-background",
+          !isLowPower && "hover:scale-[1.02]",
+          "cursor-grab active:cursor-grabbing min-w-[140px] max-w-[220px] overflow-hidden",
+        )}
       >
         {/* Main body */}
         <div className="px-4 py-3">
@@ -90,7 +94,7 @@ export const SystemNodeComponent = memo(function SystemNodeComponent({
               <div
                 className={`w-2.5 h-2.5 rounded-full ${styles.dot}`}
               />
-              {effectiveStatus !== "operational" && (
+              {effectiveStatus !== "operational" && !isLowPower && (
                 <div
                   className={`absolute inset-0 w-2.5 h-2.5 rounded-full ${styles.dot} animate-ping opacity-75`}
                 />