chore(deps): upgrade major npm packages (Next 16, recharts 3, etc.)

app/(demos)/content-timeline/page.tsx

@@ -64,21 +64,18 @@ const BARS = generateBars();
 
 export default function ContentTimeline() {
   const [sliderValue, setSliderValue] = useState(0);
-  const [activeCheckpoint, setActiveCheckpoint] = useState(CHECKPOINTS[0]);
   const [isDragging, setIsDragging] = useState(false);
   const timelineRef = useRef<HTMLDivElement>(null);
   const [cardRef, cardBounds] = useMeasure();
 
-  // Update active checkpoint based on slider value
-  useEffect(() => {
-    // Find the last checkpoint that we've passed
+  // Derive the active checkpoint from the slider value: the last
+  // checkpoint we've passed (falling back to the first one).
+  const activeCheckpoint = useMemo(() => {
     const passedCheckpoint = [...CHECKPOINTS]
       .reverse()
-      .find(checkpoint => sliderValue >= checkpoint.value);
-
-    if (passedCheckpoint) {
-      setActiveCheckpoint(passedCheckpoint);
-    }
+      .find((checkpoint) => sliderValue >= checkpoint.value);
+
+    return passedCheckpoint ?? CHECKPOINTS[0];
   }, [sliderValue]);
 
   const updateSliderValue = useCallback((clientX: number) => {

app/(demos)/shortcut-button/components/button.tsx

@@ -21,27 +21,27 @@ export function Button({
   const [pressed, setPressed] = useState(false);
   const [hotKeyPressed, setHotKeyPressed] = useState(false);
 
+  const handleClick = useCallback(() => {
+    setTimeout(() => {
+      setPressed(false);
+      setHotKeyPressed(false);
+      onClick?.();
+    }, 150);
+  }, [onClick]);
+
   useHotkeys(
     shortcut,
     () => {
       setPressed(true);
       setHotKeyPressed(true);
       handleClick();
     },
-    [],
+    [handleClick],
     {
       keydown: true,
     }
   );
 
-  const handleClick = useCallback(() => {
-    setTimeout(() => {
-      setPressed(false);
-      setHotKeyPressed(false);
-      onClick?.();
-    }, 150);
-  }, [onClick]);
-
   return (
     <motion.button
       className={cn(

components/ui/chart.tsx

@@ -2,12 +2,15 @@
 
 import * as React from "react"
 import * as RechartsPrimitive from "recharts"
+import type { TooltipValueType } from "recharts"
 
 import { cn } from "@/lib/utils"
 
 // Format: { THEME_NAME: CSS_SELECTOR }
 const THEMES = { light: "", dark: ".dark" } as const
 
+type TooltipNameType = number | string
+
 export type ChartConfig = {
   [k in string]: {
     label?: React.ReactNode
@@ -119,7 +122,13 @@ const ChartTooltipContent = React.forwardRef<
       indicator?: "line" | "dot" | "dashed"
       nameKey?: string
       labelKey?: string
-    }
+    } & Omit<
+      RechartsPrimitive.DefaultTooltipContentProps<
+        TooltipValueType,
+        TooltipNameType
+      >,
+      "accessibilityLayer"
+    >
 >(
   (
     {
@@ -196,11 +205,11 @@ const ChartTooltipContent = React.forwardRef<
           {payload.map((item, index) => {
             const key = `${nameKey || item.name || item.dataKey || "value"}`
             const itemConfig = getPayloadConfigFromPayload(config, item, key)
-            const indicatorColor = color || item.payload.fill || item.color || DEFAULT_COLORS.primary
+            const indicatorColor = color || item.payload?.fill || item.color || DEFAULT_COLORS.primary
 
             return (
               <div
-                key={item.dataKey}
+                key={index}
                 className={cn(
                   "flex w-full flex-wrap items-stretch gap-2 [&>svg]:h-2.5 [&>svg]:w-2.5 [&>svg]:text-foreground",
                   indicator === "dot" && "items-center"
@@ -268,11 +277,10 @@ const ChartLegend = RechartsPrimitive.Legend
 
 const ChartLegendContent = React.forwardRef<
   HTMLDivElement,
-  React.ComponentProps<"div"> &
-    Pick<RechartsPrimitive.LegendProps, "payload" | "verticalAlign"> & {
+  React.ComponentProps<"div"> & {
       hideIcon?: boolean
       nameKey?: string
-    }
+    } & RechartsPrimitive.DefaultLegendContentProps
 >(
   (
     { className, hideIcon = false, payload, verticalAlign = "bottom", nameKey },

eslint.config.mjs

@@ -0,0 +1,5 @@
+import nextCoreWebVitals from "eslint-config-next/core-web-vitals";
+
+const eslintConfig = [...nextCoreWebVitals];
+
+export default eslintConfig;

package.json

@@ -6,38 +6,38 @@
     "dev": "next dev",
     "build": "next build",
     "start": "next start",
-    "lint": "next lint"
+    "lint": "eslint ."
   },
   "dependencies": {
     "@gsap/react": "^2.1.2",
-    "@vercel/analytics": "^1.5.0",
+    "@vercel/analytics": "^2.0.1",
     "class-variance-authority": "^0.7.1",
     "clsx": "^2.1.1",
     "gsap": "^3.13.0",
     "input-otp": "^1.4.2",
-    "lucide-react": "^0.503.0",
+    "lucide-react": "^1.21.0",
     "motion": "^12.23.22",
-    "next": "15.5.9",
+    "next": "16.2.9",
     "next-themes": "^0.4.6",
     "react": "^19.0.0",
     "react-dom": "^19.0.0",
     "react-hotkeys-hook": "^5.1.0",
     "react-use-measure": "^2.1.7",
-    "recharts": "^2.15.4",
-    "sugar-high": "^0.9.3",
-    "tailwind-merge": "^2.6.0",
+    "recharts": "^3.8.1",
+    "sugar-high": "^1.2.1",
+    "tailwind-merge": "^3.6.0",
     "tailwindcss-animate": "^1.0.7"
   },
   "devDependencies": {
     "@tailwindcss/postcss": "^4.1.14",
-    "@types/node": "^20.19.20",
+    "@types/node": "^25.9.3",
     "@types/react": "^19.0.0",
     "@types/react-dom": "^19.0.0",
-    "eslint": "^9.37.0",
-    "eslint-config-next": "^15.5.4",
+    "eslint": "^9.39.4",
+    "eslint-config-next": "^16.2.9",
     "postcss": "^8.5.6",
     "tailwindcss": "^4.1.14",
-    "typescript": "^5.9.3"
+    "typescript": "^6.0.3"
   },
   "packageManager": "pnpm@8.14.1+sha1.d039b38e0b20ad012ed548e44267b8d4c88b447a"
 }