Updating registry components

Author: SpicyPete

frontend/bun.lock

@@ -76,7 +76,8 @@
     "@base-ui/react": "^1.0.0",
     "@buf/redpandadata_cloud.connectrpc_query-es": "^2.2.0-20251128173054-b9f9fc6e5a70.1",
     "@buf/redpandadata_common.bufbuild_es": "^2.11.0-20260316210807-5d899910f714.1",
-    "@bufbuild/protobuf": "^2.10.0",
+    "@bufbuild/cel": "^0.4.0",
+    "@bufbuild/protobuf": "^2.0.0",
     "@bufbuild/protoc-gen-es": "^2.10.0",
     "@builder.io/sdk-react": "^4.2.4",
     "@chakra-ui/object-utils": "^2.1",
@@ -96,7 +97,7 @@
     "@module-federation/runtime": "^2.3.2",
     "@monaco-editor/react": "^4.7.0",
     "@redpanda-data/ui": "^4.2.0",
-    "@stepperize/react": "^5.1.9",
+    "@stepperize/react": "^5.0.0",
     "@tailwindcss/postcss": "^4.2.4",
     "@tanstack/react-form": "^1.12.3",
     "@tanstack/react-query": "^5.90.7",
@@ -112,17 +113,18 @@
     "class-variance-authority": "^0.7.0",
     "clsx": "^2.0.0",
     "cmdk": "^1.0.0",
+    "date-fns": "^4.0.0",
     "dexie": "^4.2.1",
     "dexie-react-hooks": "^4.2.0",
     "dotenv": "^17.2.3",
     "es-cookie": "^1.5.0",
     "framer-motion": "^7.10.3",
     "hast": "^1.0.0",
-    "hast-util-to-jsx-runtime": "^2.3.6",
+    "hast-util-to-jsx-runtime": "^2.0.0",
     "js-base64": "^3.7.8",
     "json-bigint": "^1.0.0",
     "jwt-decode": "^4.0.0",
-    "lottie-react": "^2.4.1",
+    "lottie-react": "^2.0.0",
     "lucide-react": "^1.0.0",
     "moment": "^2.30.1",
     "monaco-editor": "^0.55.0",
@@ -137,31 +139,31 @@
     "react": "^18.3.1",
     "react-beautiful-dnd": "^13.1.1",
     "react-compiler-runtime": "^1.0.0",
-    "react-day-picker": "^9.11.1",
+    "react-day-picker": "^9.0.0",
     "react-dom": "^18.3.1",
     "react-draggable": "^4.5.0",
-    "react-dropzone": "^14.3.8",
+    "react-dropzone": "^15.0.0",
     "react-highlight-words": "^0.21.0",
-    "react-hook-form": "^7.73.1",
+    "react-hook-form": "^7.0.0",
     "react-markdown": "^10.1.0",
-    "react-resizable-panels": "^3.0.4",
+    "react-resizable-panels": "^3.0.0",
     "react-simple-code-editor": "^0.14.1",
     "react-syntax-highlighter": "^16.0.0",
-    "recharts": "2.15.4",
+    "recharts": "^2.0.0",
     "remark-emoji": "^5.0.2",
     "remark-gfm": "^4.0.1",
-    "shiki": "^3.15.0",
-    "sonner": "^2.0.7",
+    "shiki": "^3.0.0",
+    "sonner": "^2.0.0",
     "stacktrace-js": "^2.0.2",
     "streamdown": "^2.5.0",
     "tailwind-merge": "^3.0.0",
     "tailwindcss": "^4.2.4",
     "tokenlens": "^1.3.1",
     "use-stick-to-bottom": "^1.1.1",
     "uuid": "^13.0.0",
-    "vaul": "^1.1.2",
+    "vaul": "^1.0.0",
     "yaml": "^2.8.3",
-    "zod": "^3.25.76",
+    "zod": "^4.0.0",
     "zustand": "^5.0.8"
   },
   "devDependencies": {

frontend/package.json

@@ -46,7 +46,10 @@ function AlertDialogOverlay({ className, ...props }: React.ComponentProps<typeof
   return (
     <AlertDialogPrimitive.Backdrop
       className={cn(
-        'data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 fixed inset-0 z-50 bg-black/50 data-[state=closed]:animate-out data-[state=open]:animate-in',
+        // fill-mode-forwards keeps opacity 0 applied after the exit animation
+        // ends; otherwise the backdrop flashes back to full opacity for a
+        // frame before Base UI unmounts it.
+        'data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 fixed inset-0 z-50 bg-black/50 fill-mode-forwards data-[state=closed]:animate-out data-[state=open]:animate-in',
         className
       )}
       data-slot="alert-dialog-overlay"
@@ -74,7 +77,7 @@ function AlertDialogContent({
       {showOverlay ? <AlertDialogOverlay /> : null}
       <AlertDialogPrimitive.Popup
         className={cn(
-          'data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 fixed top-[50%] left-[50%] z-50 grid w-full max-w-[calc(100%-2rem)] translate-x-[-50%] translate-y-[-50%] gap-4 rounded-lg border bg-background p-6 shadow-lg duration-200 data-[state=closed]:animate-out data-[state=open]:animate-in sm:max-w-lg',
+          'data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 fixed top-[50%] left-[50%] z-50 flex max-h-[85vh] w-full max-w-[calc(100%-2rem)] translate-x-[-50%] translate-y-[-50%] flex-col gap-4 overflow-hidden rounded-lg border bg-background fill-mode-forwards p-6 shadow-lg duration-200 data-[state=closed]:animate-out data-[state=open]:animate-in sm:max-w-lg',
           className
         )}
         data-slot="alert-dialog-content"
@@ -89,7 +92,7 @@ function AlertDialogContent({
 function AlertDialogHeader({ className, ...props }: React.ComponentProps<'div'>) {
   return (
     <div
-      className={cn('flex flex-col gap-2 text-center sm:text-left', className)}
+      className={cn('flex shrink-0 flex-col gap-2 text-center sm:text-left', className)}
       data-slot="alert-dialog-header"
       {...props}
     />
@@ -99,7 +102,7 @@ function AlertDialogHeader({ className, ...props }: React.ComponentProps<'div'>)
 function AlertDialogFooter({ className, ...props }: React.ComponentProps<'div'>) {
   return (
     <div
-      className={cn('flex flex-col-reverse gap-2 sm:flex-row sm:justify-end', className)}
+      className={cn('flex shrink-0 flex-col-reverse gap-2 sm:flex-row sm:justify-end', className)}
       data-slot="alert-dialog-footer"
       {...props}
     />

frontend/src/components/redpanda-ui/components/alert-dialog.tsx

@@ -1,4 +1,5 @@
 import { cva, type VariantProps } from 'class-variance-authority';
+import { InfoIcon } from 'lucide-react';
 import React from 'react';
 
 import { cn, type SharedProps } from '../lib/utils';
@@ -26,9 +27,7 @@ const alertVariants = cva(
 const Alert = React.forwardRef<
   HTMLDivElement,
   React.ComponentProps<'div'> & VariantProps<typeof alertVariants> & SharedProps & { icon?: React.ReactNode }
->(({ className, variant, testId, icon: iconProp, children, ...props }, ref) => {
-	const icon = iconProp === undefined ? undefined : iconProp;
-	return (
+>(({ className, variant, testId, icon = <InfoIcon />, children, ...props }, ref) => (
   <div
     className={cn(alertVariants({ variant }), className)}
     data-slot="alert"
@@ -40,7 +39,7 @@ const Alert = React.forwardRef<
     {icon}
     {children}
   </div>
-)});
+));
 
 Alert.displayName = 'Alert';