@checkstack/ui 1.5.0 → 1.6.0

package/CHANGELOG.md

@@ -1,5 +1,31 @@
 # @checkstack/ui
 
+## 1.6.0
+
+### Minor Changes
+
+- 8d1ef12: Added Categorical Anomaly Detection (Dominance Drift) support for non-numeric healthcheck values, and introduced Slider UI components for sensitivity and confirmation window anomaly settings.
+
+### Patch Changes
+
+- Updated dependencies [8d1ef12]
+  - @checkstack/common@0.7.0
+  - @checkstack/frontend-api@0.3.11
+
+## 1.5.1
+
+### Patch Changes
+
+- c4e7560: Fix data integrity, cache invalidation, and mobile UI issues
+
+  - **Centralized mutation cache invalidation**: Every mutation now automatically invalidates its plugin's query cache on success via the shared `createProcedureHook` in `orpc-query.tsx`. This ensures all views stay in sync without requiring individual components to remember manual `invalidateQueries` calls.
+  - **Fixed oRPC query key matching**: Query keys use nested arrays (`[["pluginId"]]`) to correctly match oRPC's `[pathArray, options]` key structure. Fixed the broken flat-string pattern in `SystemBadgeDataProvider`.
+  - **Fixed hourly aggregation duplication**: Added `NULLS NOT DISTINCT` to the `health_check_aggregates` unique constraint so local runs (`source_id = NULL`) correctly conflict-match instead of creating duplicate hourly buckets. Includes a migration to clean up existing duplicates.
+  - **Fixed modal scrolling on mobile**: Added `max-height` + `overflow-y-auto` to `ConfirmationModal`, and refactored `Dialog` from translate-centering to flex-centering with `dvh` units for reliable mobile scroll containment.
+
+- Updated dependencies [c4e7560]
+  - @checkstack/frontend-api@0.3.10
+
 ## 1.5.0
 
 ### Minor Changes

package/package.json

@@ -1,16 +1,17 @@
 {
   "name": "@checkstack/ui",
-  "version": "1.5.0",
+  "version": "1.6.0",
   "type": "module",
   "main": "src/index.ts",
   "dependencies": {
     "@checkstack/common": "0.6.5",
-    "@checkstack/frontend-api": "0.3.9",
+    "@checkstack/frontend-api": "0.3.10",
     "@monaco-editor/react": "^4.7.0",
     "@radix-ui/react-accordion": "^1.2.12",
     "@radix-ui/react-dialog": "^1.1.15",
     "@radix-ui/react-popover": "^1.1.15",
     "@radix-ui/react-select": "^2.2.6",
+    "@radix-ui/react-slider": "^1.2.1",
     "@radix-ui/react-slot": "^1.2.4",
     "ajv": "^8.18.0",
     "ajv-formats": "^3.0.1",

package/src/components/ConfirmationModal.tsx

@@ -65,7 +65,7 @@ export const ConfirmationModal: React.FC<ConfirmationModalProps> = ({
       onClick={handleBackdropClick}
     >
       <div
-        className="bg-background rounded-lg shadow-xl max-w-md w-full mx-4 animate-in fade-in zoom-in duration-200 pointer-events-auto"
+        className="bg-background rounded-lg shadow-xl max-w-md w-full mx-4 my-4 max-h-[calc(100dvh-2rem)] overflow-y-auto animate-in fade-in zoom-in duration-200 pointer-events-auto"
         role="dialog"
         aria-modal="true"
         aria-labelledby="modal-title"

package/src/components/Dialog.tsx

@@ -32,7 +32,7 @@ const DialogOverlay = React.forwardRef<
 DialogOverlay.displayName = DialogPrimitive.Overlay.displayName;
 
 const dialogContentVariants = cva(
-  "fixed left-[50%] top-[50%] z-50 grid w-full translate-x-[-50%] translate-y-[-50%] gap-4 border border-border bg-background text-foreground p-6 shadow-lg sm:rounded-lg max-h-[85vh] overflow-y-auto overflow-x-visible",
+  "w-full gap-4 border border-border bg-background text-foreground p-6 shadow-lg sm:rounded-lg max-h-[85dvh] overflow-y-auto overflow-x-visible",
   {
     variants: {
       size: {
@@ -65,14 +65,21 @@ const DialogContent = React.forwardRef<
       <DialogPrimitive.Content
         ref={ref}
         className={cn(
-          dialogContentVariants({ size }),
-          !isLowPower && "duration-200 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-[48%] data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-[48%]",
-          className
+          "fixed inset-0 z-50 flex items-center justify-center p-4",
+          !isLowPower && "duration-200 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0",
         )}
         {...props}
       >
-      {/* Wrapper with negative margin and positive padding to allow focus rings to extend */}
-      <div className="-mx-2 px-2">{children}</div>
+        <div
+          className={cn(
+            dialogContentVariants({ size }),
+            !isLowPower && "data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95",
+            className,
+          )}
+        >
+          {/* Wrapper with negative margin and positive padding to allow focus rings to extend */}
+          <div className="-mx-2 px-2">{children}</div>
+        </div>
     </DialogPrimitive.Content>
     </DialogPortal>
   );

package/src/components/Slider.tsx

@@ -0,0 +1,26 @@
+import * as React from "react"
+import * as SliderPrimitive from "@radix-ui/react-slider"
+
+import { cn } from "../utils"
+
+const Slider = React.forwardRef<
+  React.ElementRef<typeof SliderPrimitive.Root>,
+  React.ComponentPropsWithoutRef<typeof SliderPrimitive.Root>
+>(({ className, ...props }, ref) => (
+  <SliderPrimitive.Root
+    ref={ref}
+    className={cn(
+      "relative flex w-full touch-none select-none items-center",
+      className
+    )}
+    {...props}
+  >
+    <SliderPrimitive.Track className="relative h-1.5 w-full grow overflow-hidden rounded-full bg-primary/20">
+      <SliderPrimitive.Range className="absolute h-full bg-primary" />
+    </SliderPrimitive.Track>
+    <SliderPrimitive.Thumb className="block h-4 w-4 rounded-full border border-primary/50 bg-background shadow transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50" />
+  </SliderPrimitive.Root>
+))
+Slider.displayName = SliderPrimitive.Root.displayName
+
+export { Slider }

package/src/index.ts

@@ -43,6 +43,7 @@ export * from "./components/DateTimePicker";
 export * from "./components/DateRangeFilter";
 export * from "./components/BackLink";
 export * from "./components/StatusUpdateTimeline";
+export * from "./components/Slider";
 export * from "./components/DynamicIcon";
 export * from "./components/StrategyConfigCard";
 export * from "./components/Markdown";