chore(web): update deps

apps/web/src/app/(home)/_components/navbar.tsx

@@ -1,261 +0,0 @@
-"use client";
-import { Github, Heart, Maximize2, Menu, X } from "lucide-react";
-import { AnimatePresence, motion } from "motion/react";
-import Image from "next/image";
-import Link from "next/link";
-import { useEffect, useState } from "react";
-import { ThemeToggle } from "@/components/theme-toggle";
-import { cn } from "@/lib/utils";
-import PackageIcon from "./icons";
-
-export default function Navbar() {
-	const [scrolled, setScrolled] = useState(false);
-	const [mobileMenuOpen, setMobileMenuOpen] = useState(false);
-
-	useEffect(() => {
-		const handleScroll = () => {
-			setScrolled(window.scrollY > 10);
-		};
-
-		window.addEventListener("scroll", handleScroll);
-		handleScroll();
-
-		return () => window.removeEventListener("scroll", handleScroll);
-	}, []);
-
-	useEffect(() => {
-		if (mobileMenuOpen) {
-			document.body.style.overflow = "hidden";
-		} else {
-			document.body.style.overflow = "";
-		}
-		return () => {
-			document.body.style.overflow = "";
-		};
-	}, [mobileMenuOpen]);
-
-	const closeMobileMenu = () => setMobileMenuOpen(false);
-
-	const desktopNavLinks = [
-		{
-			href: "/",
-			label: "Home",
-			icon: <span className="text-primary">~/</span>,
-		},
-		{
-			href: "https://my-better-t-app-client.pages.dev/",
-			label: "Demo",
-			target: "_blank",
-		},
-		{ href: "/showcase", label: "Showcase" },
-		{
-			href: "/analytics",
-			label: "Analytics",
-		},
-		{ href: "/docs", label: "Docs" },
-		{
-			href: "https://www.npmjs.com/package/create-better-t-stack",
-			label: "NPM",
-			icon: <PackageIcon pm="npm" className="h-4 w-4" />,
-			target: "_blank",
-		},
-	];
-
-	const mobileNavLinks = [
-		{
-			href: "/",
-			label: "Home",
-			icon: <span className="text-primary">~/</span>,
-		},
-		{
-			href: "https://my-better-t-app-client.pages.dev/",
-			label: "Demo",
-			target: "_blank",
-		},
-		{ href: "/showcase", label: "Showcase" },
-		{
-			href: "/analytics",
-			label: "Analytics",
-		},
-		{ href: "/docs", label: "Docs" },
-		{
-			href: "https://www.npmjs.com/package/create-better-t-stack",
-			label: "NPM",
-			icon: <PackageIcon pm="npm" className="h-4 w-4" />,
-			target: "_blank",
-		},
-		{
-			href: "https://www.github.com/AmanVarshney01/create-better-t-stack",
-			label: "GitHub",
-			icon: <Github className="size-4" />,
-			target: "_blank",
-		},
-	];
-
-	return (
-		<>
-			<nav
-				className={cn(
-					"fixed top-0 z-[100] w-full transition-all duration-300 ease-in-out",
-					scrolled
-						? "border- border-border shadow-sm backdrop-blur-md"
-						: "border-transparent border-b bg-transparent",
-				)}
-			>
-				<div className="mx-auto flex h-16 items-center justify-between px-4 sm:px-6 lg:px-8">
-					<Link href="/" className="flex flex-shrink-0 items-center gap-2">
-						<Image
-							src="/logo.svg"
-							alt="Better-T Stack"
-							width={32}
-							height={32}
-							unoptimized
-						/>
-						<span className="hidden font-semibold text-foreground text-md sm:inline-block">
-							Better-T Stack
-						</span>
-					</Link>
-
-					<div className="hidden items-center gap-4 lg:flex">
-						<div className="flex items-center gap-1">
-							{desktopNavLinks.map((link) => (
-								<Link
-									key={link.href}
-									href={link.href}
-									target={link.target}
-									className="relative flex items-center gap-1.5 rounded-md px-3 py-1.5 text-muted-foreground text-sm transition-colors hover:bg-muted hover:text-primary"
-								>
-									{link.icon}
-									<span>{link.label}</span>
-								</Link>
-							))}
-						</div>
-
-						<div className="h-5 w-px bg-border" />
-
-						<div className="flex items-center gap-2">
-							<Link
-								href="https://github.com/sponsors/AmanVarshney01"
-								target="_blank"
-								className="inline-flex items-center gap-1.5 rounded-md border border-border bg-muted/90 px-3 py-1.5 text-muted-foreground text-xs backdrop-blur-sm transition-colors hover:bg-muted hover:text-foreground"
-								title="Sponsor on GitHub"
-							>
-								<Heart className="size-3.5" />
-								Sponsor
-							</Link>
-							<Link
-								href="/new"
-								className="inline-flex items-center gap-1.5 rounded-md border border-primary/50 bg-primary/10 px-3 py-1.5 text-primary text-xs transition-colors hover:bg-primary/20"
-								title="Stack Builder"
-							>
-								<Maximize2 className="size-3.5" />
-								Builder
-							</Link>
-						</div>
-
-						<ThemeToggle />
-					</div>
-
-					<div className="flex items-center gap-2 lg:hidden">
-						<ThemeToggle />
-						<button
-							type="button"
-							onClick={() => setMobileMenuOpen(!mobileMenuOpen)}
-							className="flex items-center justify-center rounded-md p-1.5 text-foreground transition-colors hover:bg-muted"
-							aria-expanded={mobileMenuOpen}
-							aria-label="Toggle menu"
-						>
-							{mobileMenuOpen ? (
-								<X className="size-5" />
-							) : (
-								<Menu className="size-5" />
-							)}
-						</button>
-					</div>
-				</div>
-			</nav>
-
-			<AnimatePresence>
-				{mobileMenuOpen && (
-					<>
-						<motion.div
-							initial={{ opacity: 0 }}
-							animate={{ opacity: 1 }}
-							exit={{ opacity: 0 }}
-							transition={{ duration: 0.2, ease: "easeInOut" }}
-							className="fixed inset-0 z-[98 backdrop-blur-sm lg:hidden"
-							onClick={closeMobileMenu}
-							aria-hidden="true"
-						/>
-
-						<motion.div
-							initial={{ x: "100%" }}
-							animate={{ x: 0 }}
-							exit={{ x: "100%" }}
-							transition={{ type: "spring", stiffness: 300, damping: 30 }}
-							className="fixed top-0 right-0 bottom-0 z-[99] h-full w-full max-w-xs overflow-y-auto border-border border-l shadow-lg lg:hidden"
-							aria-modal="true"
-						>
-							<div className="flex h-16 items-center justify-between border-border border-b px-4">
-								<span className="font-semibold text-foreground text-md">
-									Navigation
-								</span>
-								<button
-									type="button"
-									onClick={closeMobileMenu}
-									className="rounded-md p-1.5 text-muted-foreground transition-colors hover:bg-muted hover:text-foreground"
-									aria-label="Close menu"
-								>
-									<X className="size-5" />
-								</button>
-							</div>
-
-							<div className="flex flex-col p-4">
-								<nav className="flex flex-col space-y-1">
-									{mobileNavLinks.map((link) => (
-										<Link
-											key={link.href}
-											href={link.href}
-											target={link.target}
-											onClick={closeMobileMenu}
-											className="flex items-center gap-3 rounded-md px-3 py-3 text-base text-muted-foreground transition-colors hover:bg-muted hover:text-primary"
-										>
-											{link.icon ? (
-												<span className="flex w-5 items-center justify-center">
-													{link.icon}
-												</span>
-											) : (
-												<span className="w-5" />
-											)}
-											<span>{link.label}</span>
-										</Link>
-									))}
-								</nav>
-
-								<div className="mt-6 space-y-3 border-border border-t pt-6">
-									<Link
-										href="/new"
-										onClick={closeMobileMenu}
-										className="flex w-full items-center justify-center gap-2 rounded-md border border-primary/50 bg-primary/10 px-4 py-2.5 text-primary text-sm transition-colors hover:bg-primary/20"
-									>
-										<Maximize2 className="size-4" />
-										Stack Builder
-									</Link>
-									<Link
-										href="https://github.com/sponsors/AmanVarshney01"
-										target="_blank"
-										onClick={closeMobileMenu}
-										className="flex w-full items-center justify-center gap-2 rounded-md border border-border bg-muted/90 px-4 py-2.5 text-muted-foreground text-sm backdrop-blur-sm transition-colors hover:bg-muted hover:text-foreground"
-									>
-										<Heart className="size-4" />
-										Sponsor on GitHub
-									</Link>
-								</div>
-							</div>
-						</motion.div>
-					</>
-				)}
-			</AnimatePresence>
-		</>
-	);
-}

apps/web/src/app/(home)/page.tsx

@@ -1,3 +1,5 @@
+export const dynamic = "force-static";
+
 import { api } from "@better-t-stack/backend/convex/_generated/api";
 import { fetchQuery } from "convex/nextjs";
 import CommandSection from "./_components/command-section";

apps/web/src/app/(home)/showcase/_components/ShowcaseItem.tsx

@@ -1,19 +1,10 @@
 "use client";
 
 import { ExternalLink, File, Github, Monitor } from "lucide-react";
+import type { Route } from "next";
 import Image from "next/image";
 import Link from "next/link";
 
-export interface ShowcaseItemProps {
-	title: string;
-	description: string;
-	imageUrl: string;
-	liveUrl?: string;
-	sourceUrl?: string;
-	tags: string[];
-	index?: number;
-}
-
 export default function ShowcaseItem({
 	title,
 	description,
@@ -22,7 +13,15 @@ export default function ShowcaseItem({
 	sourceUrl,
 	tags,
 	index = 0,
-}: ShowcaseItemProps) {
+}: {
+	title: string;
+	description: string;
+	imageUrl: string;
+	liveUrl?: string;
+	sourceUrl?: string;
+	tags: string[];
+	index?: number;
+}) {
 	const projectId = `PROJECT_${String(index + 1).padStart(3, "0")}`;
 
 	return (
@@ -78,7 +77,7 @@ export default function ShowcaseItem({
 					<div className="grid gap-2">
 						{liveUrl && (
 							<Link
-								href={liveUrl}
+								href={liveUrl as Route}
 								target="_blank"
 								rel="noopener noreferrer"
 								className="flex items-center gap-2 rounded border border-border bg-primary/10 px-3 py-2 text-primary text-sm transition-all hover:bg-primary/20 hover:text-primary"
@@ -90,7 +89,7 @@ export default function ShowcaseItem({
 						)}
 						{sourceUrl && (
 							<Link
-								href={sourceUrl}
+								href={sourceUrl as Route}
 								target="_blank"
 								rel="noopener noreferrer"
 								className="flex items-center gap-2 rounded border border-border px-3 py-2 text-muted-foreground text-sm transition-all hover:bg-muted/40 hover:text-foreground"

apps/web/src/app/(home)/showcase/page.tsx

@@ -1,3 +1,5 @@
+export const dynamic = "force-static";
+
 import { api } from "@better-t-stack/backend/convex/_generated/api";
 import { fetchQuery } from "convex/nextjs";
 import ShowcasePage from "./_components/showcase-page";

apps/web/src/components/ui/button.tsx

@@ -1,6 +1,6 @@
 import { cva, type VariantProps } from "class-variance-authority";
 import { Slot as SlotPrimitive } from "radix-ui";
-import type * as React from "react";
+import * as React from "react";
 
 import { cn } from "@/lib/utils";
 
@@ -35,25 +35,25 @@ const buttonVariants = cva(
 	},
 );
 
-function Button({
-	className,
-	variant,
-	size,
-	asChild = false,
-	...props
-}: React.ComponentProps<"button"> &
-	VariantProps<typeof buttonVariants> & {
-		asChild?: boolean;
-	}) {
+const Button = React.forwardRef<
+	HTMLButtonElement,
+	React.ComponentProps<"button"> &
+		VariantProps<typeof buttonVariants> & {
+			asChild?: boolean;
+		}
+>(({ className, variant, size, asChild = false, ...props }, ref) => {
 	const Comp = asChild ? SlotPrimitive.Slot : "button";
 
 	return (
 		<Comp
 			data-slot="button"
 			className={cn(buttonVariants({ variant, size, className }))}
+			ref={ref}
 			{...props}
 		/>
 	);
-}
+});
+
+Button.displayName = "Button";
 
 export { Button, buttonVariants };

apps/web/src/components/ui/chart.tsx

@@ -80,7 +80,7 @@ const ChartStyle = ({ id, config }: { id: string; config: ChartConfig }) => {
 
 	return (
 		<style
-			// biome-ignore lint/security/noDangerouslySetInnerHtml: This is safe as we control the content.
+			// biome-ignore lint/security/noDangerouslySetInnerHtml: its fine
 			dangerouslySetInnerHTML={{
 				__html: Object.entries(THEMES)
 					.map(

apps/web/src/components/ui/dialog.tsx

@@ -1,7 +1,8 @@
 "use client";
 
+import * as DialogPrimitive from "@radix-ui/react-dialog";
 import { XIcon } from "lucide-react";
-import { Dialog as DialogPrimitive } from "radix-ui";
+import type * as React from "react";
 
 import { cn } from "@/lib/utils";
 
@@ -48,8 +49,11 @@ function DialogOverlay({
 function DialogContent({
 	className,
 	children,
+	showCloseButton = true,
 	...props
-}: React.ComponentProps<typeof DialogPrimitive.Content>) {
+}: React.ComponentProps<typeof DialogPrimitive.Content> & {
+	showCloseButton?: boolean;
+}) {
 	return (
 		<DialogPortal data-slot="dialog-portal">
 			<DialogOverlay />
@@ -62,10 +66,15 @@ function DialogContent({
 				{...props}
 			>
 				{children}
-				<DialogPrimitive.Close className="absolute top-4 right-4 rounded-xs opacity-70 ring-offset-background transition-opacity hover:opacity-100 focus:outline-hidden focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:pointer-events-none data-[state=open]:bg-accent data-[state=open]:text-muted-foreground [&_svg:not([class*='size-'])]:size-4 [&_svg]:pointer-events-none [&_svg]:shrink-0">
-					<XIcon />
-					<span className="sr-only">Close</span>
-				</DialogPrimitive.Close>
+				{showCloseButton && (
+					<DialogPrimitive.Close
+						data-slot="dialog-close"
+						className="absolute top-4 right-4 rounded-xs opacity-70 ring-offset-background transition-opacity hover:opacity-100 focus:outline-hidden focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:pointer-events-none data-[state=open]:bg-accent data-[state=open]:text-muted-foreground [&_svg:not([class*='size-'])]:size-4 [&_svg]:pointer-events-none [&_svg]:shrink-0"
+					>
+						<XIcon />
+						<span className="sr-only">Close</span>
+					</DialogPrimitive.Close>
+				)}
 			</DialogPrimitive.Content>
 		</DialogPortal>
 	);

apps/web/src/components/ui/scroll-area.tsx

@@ -1,6 +1,6 @@
 "use client";
 
-import { ScrollArea as ScrollAreaPrimitive } from "radix-ui";
+import * as ScrollAreaPrimitive from "@radix-ui/react-scroll-area";
 import type * as React from "react";
 
 import { cn } from "@/lib/utils";

apps/web/src/components/ui/switch.tsx

@@ -1,6 +1,6 @@
 "use client";
 
-import { Switch as SwitchPrimitive } from "radix-ui";
+import * as SwitchPrimitive from "@radix-ui/react-switch";
 import type * as React from "react";
 
 import { cn } from "@/lib/utils";

apps/web/src/components/ui/tooltip.tsx

@@ -1,6 +1,6 @@
 "use client";
 
-import { Tooltip as TooltipPrimitive } from "radix-ui";
+import * as TooltipPrimitive from "@radix-ui/react-tooltip";
 import type * as React from "react";
 
 import { cn } from "@/lib/utils";