Update dependencies and fix what the new lint rules caught

Every package moves to its newest in-major version, plus React 19.3, @convex-dev/auth 0.0.96 and next-plausible 4. The backend declares @auth/core and generates sign-in codes without oslo, which @convex-dev/auth no longer pulls in. The UseSend patch now actually removes the crypto import Convex refuses to bundle. The stricter react-hooks and typescript-eslint rules flagged the carousel, chart, image crop and mobile hook, which now pass.

packages/ui/package.json

@@ -18,38 +18,38 @@
     "ui-add": "bunx --bun shadcn@latest add && prettier src --write --list-different"
   },
   "dependencies": {
-    "@base-ui/react": "^1.3.0",
-    "@hookform/resolvers": "^5.2.2",
-    "@radix-ui/react-avatar": "^1.1.11",
-    "@radix-ui/react-checkbox": "^1.3.3",
-    "@radix-ui/react-dialog": "^1.1.15",
-    "@radix-ui/react-dropdown-menu": "^2.1.16",
+    "@base-ui/react": "^1.8.0",
+    "@hookform/resolvers": "^5.9.1",
+    "@radix-ui/react-avatar": "^1.2.6",
+    "@radix-ui/react-checkbox": "^1.3.11",
+    "@radix-ui/react-dialog": "^1.1.23",
+    "@radix-ui/react-dropdown-menu": "^2.1.24",
     "@radix-ui/react-icons": "^1.3.2",
-    "@radix-ui/react-label": "^2.1.8",
-    "@radix-ui/react-progress": "^1.1.8",
-    "@radix-ui/react-scroll-area": "^1.2.10",
-    "@radix-ui/react-separator": "^1.1.8",
-    "@radix-ui/react-slot": "^1.2.4",
-    "@radix-ui/react-switch": "^1.2.6",
-    "@radix-ui/react-tabs": "^1.1.13",
-    "@tabler/icons-react": "^3.41.0",
+    "@radix-ui/react-label": "^2.1.15",
+    "@radix-ui/react-progress": "^1.1.16",
+    "@radix-ui/react-scroll-area": "^1.2.18",
+    "@radix-ui/react-separator": "^1.1.15",
+    "@radix-ui/react-slot": "^1.3.3",
+    "@radix-ui/react-switch": "^1.3.7",
+    "@radix-ui/react-tabs": "^1.1.21",
+    "@tabler/icons-react": "^3.48.0",
     "class-variance-authority": "^0.7.1",
     "clsx": "^2.1.1",
     "cmdk": "^1.1.1",
-    "date-fns": "^4.1.0",
+    "date-fns": "^4.4.0",
     "embla-carousel-react": "^8.6.0",
-    "input-otp": "^1.4.2",
+    "input-otp": "^1.5.0",
     "lucide-react": "^0.577.0",
-    "motion": "^12.38.0",
+    "motion": "^12.43.0",
     "next-themes": "^0.4.6",
-    "radix-ui": "^1.4.3",
+    "radix-ui": "^1.6.7",
     "react-day-picker": "^9.14.0",
-    "react-hook-form": "^7.72.0",
-    "react-image-crop": "^11.0.10",
-    "react-resizable-panels": "^4.7.6",
-    "recharts": "^3.8.1",
-    "sonner": "^2.0.7",
-    "tailwind-merge": "^3.5.0",
+    "react-hook-form": "^7.89.0",
+    "react-image-crop": "^11.1.2",
+    "react-resizable-panels": "^4.14.1",
+    "recharts": "^3.10.1",
+    "sonner": "^2.0.8",
+    "tailwind-merge": "^3.7.0",
     "vaul": "^1.1.2"
   },
   "devDependencies": {

packages/ui/src/carousel.tsx

@@ -93,6 +93,9 @@ const Carousel = ({
 
   React.useEffect(() => {
     if (!api) return;
+    // Embla is the source of truth for scroll state; read it once on mount,
+    // then follow its events.
+    // eslint-disable-next-line react-hooks/set-state-in-effect
     onSelect(api);
     api.on('reInit', onSelect);
     api.on('select', onSelect);

packages/ui/src/chart.tsx

@@ -105,6 +105,10 @@ ${colorConfig
 
 const ChartTooltip = RechartsPrimitive.Tooltip;
 
+// Recharts injects `payload`/`label`/`active` into tooltip and legend content
+// at render time, but (as of recharts v3) does not expose them on the public
+// prop types, and the payload items are loosely typed. Model the fields we use
+// explicitly so the component is type-safe.
 type ChartPayloadItem = {
   name?: string | number;
   value?: number | string;
@@ -356,15 +360,13 @@ const getPayloadConfigFromPayload = (
     key in payload &&
     typeof payload[key as keyof typeof payload] === 'string'
   ) {
-    configLabelKey = payload[key as keyof typeof payload] as string;
+    configLabelKey = payload[key as keyof typeof payload];
   } else if (
     payloadPayload &&
     key in payloadPayload &&
     typeof payloadPayload[key as keyof typeof payloadPayload] === 'string'
   ) {
-    configLabelKey = payloadPayload[
-      key as keyof typeof payloadPayload
-    ] as string;
+    configLabelKey = payloadPayload[key as keyof typeof payloadPayload];
   }
 
   return configLabelKey in config ? config[configLabelKey] : config[key];

packages/ui/src/hooks/use-mobile.ts

@@ -1,21 +1,19 @@
 import * as React from 'react';
 
 const MOBILE_BREAKPOINT = 768;
+const MOBILE_QUERY = `(max-width: ${MOBILE_BREAKPOINT - 1}px)`;
 
-export const useIsMobile = () => {
-  const [isMobile, setIsMobile] = React.useState<boolean | undefined>(
-    undefined,
-  );
-
-  React.useEffect(() => {
-    const mql = window.matchMedia(`(max-width: ${MOBILE_BREAKPOINT - 1}px)`);
-    const onChange = () => {
-      setIsMobile(window.innerWidth < MOBILE_BREAKPOINT);
-    };
-    mql.addEventListener('change', onChange);
-    setIsMobile(window.innerWidth < MOBILE_BREAKPOINT);
-    return () => mql.removeEventListener('change', onChange);
-  }, []);
-
-  return !!isMobile;
+const subscribe = (onChange: () => void) => {
+  const mql = window.matchMedia(MOBILE_QUERY);
+  mql.addEventListener('change', onChange);
+  return () => mql.removeEventListener('change', onChange);
 };
+
+// True below the mobile breakpoint. Server renders and hydration assume
+// desktop, then the browser's media query takes over.
+export const useIsMobile = () =>
+  React.useSyncExternalStore(
+    subscribe,
+    () => window.matchMedia(MOBILE_QUERY).matches,
+    () => false,
+  );

packages/ui/src/image-crop.tsx

@@ -294,10 +294,7 @@ export const ImageCropApply = ({
 
   if (asChild) {
     return (
-      <Slot.Root
-        onClick={handleClick}
-        {...(props as ComponentProps<typeof Slot.Root>)}
-      >
+      <Slot.Root onClick={handleClick} {...props}>
         {children}
       </Slot.Root>
     );
@@ -329,10 +326,7 @@ export const ImageCropReset = ({
 
   if (asChild) {
     return (
-      <Slot.Root
-        onClick={handleClick}
-        {...(props as ComponentProps<typeof Slot.Root>)}
-      >
+      <Slot.Root onClick={handleClick} {...props}>
         {children}
       </Slot.Root>
     );