create-newt-app 0.33.3 → 0.34.0

package/dist/index.js

@@ -11,7 +11,7 @@ import { existsSync, promises } from "fs";
 import path from "path";
 import https from "node:https";
 //#region package.json
-var version = "0.33.3";
+var version = "0.34.0";
 var engines = { "node": ">=24.0.0" };
 //#endregion
 //#region src/templates/root/index.ts
@@ -31,7 +31,8 @@ const root$2 = { templates: [
     "db:migrate": "turbo run migrate",
     "db:generate": "turbo run generate"
   },
-  "devDependencies": {
+  "devDependencies": {<% if (shadcn && linter === "oxc") { %>
+    "@shadcn/lint": "<%= versions["@shadcn/lint"] %>",<% } %>
     "@types/node": "<%= versions["@types/node"] %>",
     "turbo": "<%= versions.turbo %>",
     "typescript": "<%= versions.typescript %>"
@@ -219,7 +220,9 @@ BETTER_AUTH_SECRET=generate-with-openssl-rand-base64-32
 # This is NOT the Next.js you know
 
 This version has breaking changes — APIs, conventions, and file structure may all differ from your training data. Read the relevant guide in \`node_modules/next/dist/docs/\` before writing any code. Heed deprecation notices.
-<!-- END:nextjs-agent-rules -->`
+<!-- END:nextjs-agent-rules --><% if (shadcn) { %>
+
+After making changes, run \`pnpm lint:check\` and fix all errors.<% } %>`
 	},
 	{
 		filename: "CLAUDE.md",
@@ -458,7 +461,7 @@ export default function Home() {
   const { data: session, isPending } = authClient.useSession();
 
   const { data: hello } = useQuery({
-    queryKey: ['hello'],
+    queryKey: ['hello', session?.user.id],
     queryFn: () => fetch('/api/hello').then((r) => r.json()),
   });
 
@@ -1495,6 +1498,7 @@ const versions = {
 	"@nestjs/testing": "^11.0.1",
 	"@next/eslint-plugin-next": "^16.3.4",
 	"@oxlint/plugins": "^1.74.0",
+	"@shadcn/lint": "^0.1.0",
 	"@shadcn/react": "^0.2.1",
 	"@stylexjs/babel-plugin": "0.19.0",
 	"@stylexjs/postcss-plugin": "0.19.0",
@@ -1520,6 +1524,7 @@ const versions = {
 	"class-variance-authority": "^0.7.1",
 	clsx: "^2.1.1",
 	cmdk: "^1.1.1",
+	cn: "^0.3.0",
 	"date-fns": "^4.2.1",
 	dotenv: "^17.3.1",
 	"dotenv-cli": "^11.0.0",
@@ -1538,7 +1543,7 @@ const versions = {
 	next: "16.3.4",
 	"next-themes": "^0.4.6",
 	oxfmt: "^0.59.0",
-	oxlint: "^1.74.0",
+	oxlint: "^1.80.0",
 	pg: "^8.14.1",
 	prettier: "^3.7.4",
 	react: "^19.2.4",
@@ -1589,8 +1594,8 @@ const shadcnUi = {
     "@shadcn/react": "<%= versions["@shadcn/react"] %>",
     "shadcn": "<%= versions.shadcn %>",
     "class-variance-authority": "<%= versions["class-variance-authority"] %>",
-    "clsx": "<%= versions.clsx %>",
     "cmdk": "<%= versions.cmdk %>",
+    "cn": "<%= versions.cn %>",
     "date-fns": "<%= versions["date-fns"] %>",
     "embla-carousel-react": "<%= versions["embla-carousel-react"] %>",
     "input-otp": "<%= versions["input-otp"] %>",
@@ -1600,7 +1605,6 @@ const shadcnUi = {
     "react-resizable-panels": "<%= versions["react-resizable-panels"] %>",
     "recharts": "<%= versions.recharts %>",
     "sonner": "<%= versions.sonner %>",
-    "tailwind-merge": "<%= versions["tailwind-merge"] %>",
     "tw-animate-css": "<%= versions["tw-animate-css"] %>"
   },
   "peerDependencies": {
@@ -1621,12 +1625,7 @@ const shadcnUi = {
 		},
 		{
 			filename: "packages/ui/src/lib/utils.ts",
-			template: `import { clsx, type ClassValue } from "clsx"
-import { twMerge } from "tailwind-merge"
-
-export function cn(...inputs: ClassValue[]) {
-  return twMerge(clsx(inputs))
-}
+			template: `export { cn } from "cn"
 `
 		},
 		{
@@ -1818,7 +1817,10 @@ export default config;`
   "extends": "@<%= projectName %>/typescript-config/react-library.json",
   "compilerOptions": {
     "outDir": "dist",
-    "strictNullChecks": true
+    "strictNullChecks": true,
+    "paths": {
+      "@<%= projectName %>/ui/*": ["./src/*"]
+    }
   },
   "include": ["src"],
   "exclude": ["node_modules", "dist"]
@@ -1934,13 +1936,13 @@ import { Button } from '@<%= projectName %>/ui/button';
 import { Link } from '@<%= projectName %>/ui/link';
 import { Logo } from '@<%= projectName %>/ui/logo';
 import { ModeToggle } from '@<%= projectName %>/ui/mode-toggle';
-import { Card, CardContent, CardHeader, CardTitle } from '@<%= projectName %>/ui/card';
+import { Card, CardContent, CardHeader } from '@<%= projectName %>/ui/card';
 
 export default function Home() {
   const { data: session, isPending } = authClient.useSession();
 
   const { data: hello } = useQuery({
-    queryKey: ['hello'],
+    queryKey: ['hello', session?.user.id],
     queryFn: () => fetch('/api/hello').then((r) => r.json()),
   });
 
@@ -1955,7 +1957,7 @@ export default function Home() {
       </div>
 
       <div className="flex items-center gap-3 py-2">
-        <Logo className="w-10 h-auto text-foreground" />
+        <Logo className="w-10 h-auto" />
         <div>
           <h1 className="text-4xl font-black tracking-tight"><%= projectName %></h1>
           <p className="text-sm text-muted-foreground tracking-widest uppercase">
@@ -1966,9 +1968,9 @@ export default function Home() {
 
       <Card>
         <CardHeader>
-          <CardTitle className="text-xs font-mono uppercase tracking-widest text-muted-foreground">
+          <p className="text-xs font-mono uppercase tracking-widest text-muted-foreground">
             next.js
-          </CardTitle>
+          </p>
         </CardHeader>
         <CardContent>
           <p className="font-mono text-sm text-muted-foreground">apps/web/app/layout.tsx</p>
@@ -1978,9 +1980,9 @@ export default function Home() {
 
       <Card>
         <CardHeader>
-          <CardTitle className="text-xs font-mono uppercase tracking-widest text-muted-foreground">
+          <p className="text-xs font-mono uppercase tracking-widest text-muted-foreground">
             nest.js
-          </CardTitle>
+          </p>
         </CardHeader>
         <CardContent>
           <p className="font-mono text-sm text-muted-foreground">GET /api/hello</p>
@@ -1992,9 +1994,9 @@ export default function Home() {
 
       <Card>
         <CardHeader>
-          <CardTitle className="text-xs font-mono uppercase tracking-widest text-muted-foreground">
+          <p className="text-xs font-mono uppercase tracking-widest text-muted-foreground">
             better-auth
-          </CardTitle>
+          </p>
         </CardHeader>
         <CardContent>
           {isPending ? (
@@ -2183,8 +2185,7 @@ export function AuthForm() {
 		{
 			filename: "packages/ui/src/components/accordion.tsx",
 			template: `import { Accordion as AccordionPrimitive } from "@base-ui/react/accordion"
-
-import { cn } from "@<%= projectName %>/ui/lib/utils"
+import { cn } from "cn"
 import { ChevronDownIcon, ChevronUpIcon } from "lucide-react"
 
 function Accordion({ className, ...props }: AccordionPrimitive.Root.Props) {
@@ -2262,8 +2263,8 @@ export { Accordion, AccordionItem, AccordionTrigger, AccordionContent }
 
 import * as React from "react"
 import { AlertDialog as AlertDialogPrimitive } from "@base-ui/react/alert-dialog"
+import { cn } from "cn"
 
-import { cn } from "@<%= projectName %>/ui/lib/utils"
 import { Button } from "@<%= projectName %>/ui/components/button"
 
 function AlertDialog({ ...props }: AlertDialogPrimitive.Root.Props) {
@@ -2451,8 +2452,7 @@ export {
 			filename: "packages/ui/src/components/alert.tsx",
 			template: `import * as React from "react"
 import { cva, type VariantProps } from "class-variance-authority"
-
-import { cn } from "@<%= projectName %>/ui/lib/utils"
+import { cn } from "cn"
 
 const alertVariants = cva(
   "group/alert relative grid w-full gap-0.5 rounded-lg border px-2.5 py-2 text-left text-sm has-data-[slot=alert-action]:relative has-data-[slot=alert-action]:pr-18 has-[>svg]:grid-cols-[auto_1fr] has-[>svg]:gap-x-2 *:[svg]:row-span-2 *:[svg]:translate-y-0.5 *:[svg]:text-current *:[svg:not([class*='size-'])]:size-4",
@@ -2529,7 +2529,7 @@ export { Alert, AlertTitle, AlertDescription, AlertAction }
 		},
 		{
 			filename: "packages/ui/src/components/aspect-ratio.tsx",
-			template: `import { cn } from "@<%= projectName %>/ui/lib/utils"
+			template: `import { cn } from "cn"
 
 function AspectRatio({
   ratio,
@@ -2559,8 +2559,7 @@ export { AspectRatio }
 
 import * as React from "react"
 import { Avatar as AvatarPrimitive } from "@base-ui/react/avatar"
-
-import { cn } from "@<%= projectName %>/ui/lib/utils"
+import { cn } from "cn"
 
 function Avatar({
   className,
@@ -2671,8 +2670,7 @@ export {
 			template: `import { mergeProps } from "@base-ui/react/merge-props"
 import { useRender } from "@base-ui/react/use-render"
 import { cva, type VariantProps } from "class-variance-authority"
-
-import { cn } from "@<%= projectName %>/ui/lib/utils"
+import { cn } from "cn"
 
 const badgeVariants = cva(
   "group/badge inline-flex h-5 w-fit shrink-0 items-center justify-center gap-1 overflow-hidden rounded-4xl border border-transparent px-2 py-0.5 text-xs font-medium whitespace-nowrap transition-all focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 has-data-[icon=inline-end]:pr-1.5 has-data-[icon=inline-start]:pl-1.5 aria-invalid:border-destructive aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 [&>svg]:pointer-events-none [&>svg]:size-3!",
@@ -2727,8 +2725,7 @@ export { Badge, badgeVariants }
 			template: `import * as React from "react"
 import { mergeProps } from "@base-ui/react/merge-props"
 import { useRender } from "@base-ui/react/use-render"
-
-import { cn } from "@<%= projectName %>/ui/lib/utils"
+import { cn } from "cn"
 import { ChevronRightIcon, MoreHorizontalIcon } from "lucide-react"
 
 function Breadcrumb({ className, ...props }: React.ComponentProps<"nav">) {
@@ -2855,8 +2852,7 @@ export {
 			filename: "packages/ui/src/components/button.tsx",
 			template: `import { Button as ButtonPrimitive } from "@base-ui/react/button"
 import { cva, type VariantProps } from "class-variance-authority"
-
-import { cn } from "@<%= projectName %>/ui/lib/utils"
+import { cn } from "cn"
 
 const buttonVariants = cva(
   "group/button inline-flex shrink-0 items-center justify-center rounded-lg border border-transparent bg-clip-padding text-sm font-medium whitespace-nowrap transition-all outline-none select-none focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/50 active:not-aria-[haspopup]:translate-y-px disabled:pointer-events-none disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-3 aria-invalid:ring-destructive/20 dark:aria-invalid:border-destructive/50 dark:aria-invalid:ring-destructive/40 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
@@ -2918,6 +2914,7 @@ export { Button, buttonVariants }
 			template: `"use client"
 
 import * as React from "react"
+import { cn } from "cn"
 import {
   DayPicker,
   getDefaultClassNames,
@@ -2925,7 +2922,6 @@ import {
   type Locale,
 } from "react-day-picker"
 
-import { cn } from "@<%= projectName %>/ui/lib/utils"
 import { Button, buttonVariants } from "@<%= projectName %>/ui/components/button"
 import { ChevronLeftIcon, ChevronRightIcon, ChevronDownIcon } from "lucide-react"
 
@@ -3141,8 +3137,7 @@ export { Calendar, CalendarDayButton }
 		{
 			filename: "packages/ui/src/components/card.tsx",
 			template: `import * as React from "react"
-
-import { cn } from "@<%= projectName %>/ui/lib/utils"
+import { cn } from "cn"
 
 function Card({
   className,
@@ -3250,11 +3245,11 @@ export {
 			template: `"use client"
 
 import * as React from "react"
+import { cn } from "cn"
 import useEmblaCarousel, {
   type UseEmblaCarouselType,
 } from "embla-carousel-react"
 
-import { cn } from "@<%= projectName %>/ui/lib/utils"
 import { Button } from "@<%= projectName %>/ui/components/button"
 import { ChevronLeftIcon, ChevronRightIcon } from "lucide-react"
 
@@ -3496,11 +3491,10 @@ export {
 			template: `"use client"
 
 import * as React from "react"
+import { cn } from "cn"
 import * as RechartsPrimitive from "recharts"
 import type { TooltipValueType } from "recharts"
 
-import { cn } from "@<%= projectName %>/ui/lib/utils"
-
 // Format: { THEME_NAME: CSS_SELECTOR }
 const THEMES = { light: "", dark: ".dark" } as const
 
@@ -3873,8 +3867,7 @@ export {
 			template: `"use client"
 
 import { Checkbox as CheckboxPrimitive } from "@base-ui/react/checkbox"
-
-import { cn } from "@<%= projectName %>/ui/lib/utils"
+import { cn } from "cn"
 import { CheckIcon } from "lucide-react"
 
 function Checkbox({ className, ...props }: CheckboxPrimitive.Root.Props) {
@@ -3932,8 +3925,8 @@ export { Collapsible, CollapsibleTrigger, CollapsibleContent }
 
 import * as React from "react"
 import { Command as CommandPrimitive } from "cmdk"
+import { cn } from "cn"
 
-import { cn } from "@<%= projectName %>/ui/lib/utils"
 import {
   Dialog,
   DialogContent,
@@ -4132,8 +4125,8 @@ export {
 
 import * as React from "react"
 import { Combobox as ComboboxPrimitive } from "@base-ui/react"
+import { cn } from "cn"
 
-import { cn } from "@<%= projectName %>/ui/lib/utils"
 import { Button } from "@<%= projectName %>/ui/components/button"
 import {
   InputGroup,
@@ -4433,8 +4426,7 @@ export {
 
 import * as React from "react"
 import { ContextMenu as ContextMenuPrimitive } from "@base-ui/react/context-menu"
-
-import { cn } from "@<%= projectName %>/ui/lib/utils"
+import { cn } from "cn"
 import { ChevronRightIcon, CheckIcon } from "lucide-react"
 
 function ContextMenu({ ...props }: ContextMenuPrimitive.Root.Props) {
@@ -4708,8 +4700,8 @@ export {
 
 import * as React from "react"
 import { Dialog as DialogPrimitive } from "@base-ui/react/dialog"
+import { cn } from "cn"
 
-import { cn } from "@<%= projectName %>/ui/lib/utils"
 import { Button } from "@<%= projectName %>/ui/components/button"
 import { XIcon } from "lucide-react"
 
@@ -4882,8 +4874,7 @@ export {
 
 import * as React from "react"
 import { Drawer as DrawerPrimitive } from "@base-ui/react/drawer"
-
-import { cn } from "@<%= projectName %>/ui/lib/utils"
+import { cn } from "cn"
 
 type DrawerContextProps = {
   hasSnapPoints: boolean
@@ -5114,8 +5105,7 @@ export {
 
 import * as React from "react"
 import { Menu as MenuPrimitive } from "@base-ui/react/menu"
-
-import { cn } from "@<%= projectName %>/ui/lib/utils"
+import { cn } from "cn"
 import { ChevronRightIcon, CheckIcon } from "lucide-react"
 
 function DropdownMenu({ ...props }: MenuPrimitive.Root.Props) {
@@ -5383,8 +5373,7 @@ export {
 		{
 			filename: "packages/ui/src/components/empty.tsx",
 			template: `import { cva, type VariantProps } from "class-variance-authority"
-
-import { cn } from "@<%= projectName %>/ui/lib/utils"
+import { cn } from "cn"
 
 function Empty({ className, ...props }: React.ComponentProps<"div">) {
   return (
@@ -5494,8 +5483,8 @@ export {
 
 import { useMemo } from "react"
 import { cva, type VariantProps } from "class-variance-authority"
+import { cn } from "cn"
 
-import { cn } from "@<%= projectName %>/ui/lib/utils"
 import { Label } from "@<%= projectName %>/ui/components/label"
 import { Separator } from "@<%= projectName %>/ui/components/separator"
 
@@ -5735,8 +5724,7 @@ export {
 			template: `"use client"
 
 import { PreviewCard as PreviewCardPrimitive } from "@base-ui/react/preview-card"
-
-import { cn } from "@<%= projectName %>/ui/lib/utils"
+import { cn } from "cn"
 
 function HoverCard({ ...props }: PreviewCardPrimitive.Root.Props) {
   return <PreviewCardPrimitive.Root data-slot="hover-card" {...props} />
@@ -5790,8 +5778,8 @@ export { HoverCard, HoverCardTrigger, HoverCardContent }
 			template: `import { mergeProps } from "@base-ui/react/merge-props"
 import { useRender } from "@base-ui/react/use-render"
 import { cva, type VariantProps } from "class-variance-authority"
+import { cn } from "cn"
 
-import { cn } from "@<%= projectName %>/ui/lib/utils"
 import { Separator } from "@<%= projectName %>/ui/components/separator"
 
 const buttonGroupVariants = cva(
@@ -5882,8 +5870,8 @@ export {
 
 import * as React from "react"
 import { cva, type VariantProps } from "class-variance-authority"
+import { cn } from "cn"
 
-import { cn } from "@<%= projectName %>/ui/lib/utils"
 import { Button } from "@<%= projectName %>/ui/components/button"
 import { Input } from "@<%= projectName %>/ui/components/input"
 import { Textarea } from "@<%= projectName %>/ui/components/textarea"
@@ -6044,8 +6032,8 @@ export {
 import { mergeProps } from "@base-ui/react/merge-props"
 import { useRender } from "@base-ui/react/use-render"
 import { cva, type VariantProps } from "class-variance-authority"
+import { cn } from "cn"
 
-import { cn } from "@<%= projectName %>/ui/lib/utils"
 import { Separator } from "@<%= projectName %>/ui/components/separator"
 
 function ItemGroup({ className, ...props }: React.ComponentProps<"div">) {
@@ -6245,7 +6233,7 @@ export {
 		},
 		{
 			filename: "packages/ui/src/components/kbd.tsx",
-			template: `import { cn } from "@<%= projectName %>/ui/lib/utils"
+			template: `import { cn } from "cn"
 
 function Kbd({ className, ...props }: React.ComponentProps<"kbd">) {
   return (
@@ -6276,8 +6264,7 @@ export { Kbd, KbdGroup }
 		{
 			filename: "packages/ui/src/components/native-select.tsx",
 			template: `import * as React from "react"
-
-import { cn } from "@<%= projectName %>/ui/lib/utils"
+import { cn } from "cn"
 import { ChevronDownIcon } from "lucide-react"
 
 type NativeSelectProps = Omit<React.ComponentProps<"select">, "size"> & {
@@ -6340,7 +6327,7 @@ export { NativeSelect, NativeSelectOptGroup, NativeSelectOption }
 		},
 		{
 			filename: "packages/ui/src/components/spinner.tsx",
-			template: `import { cn } from "@<%= projectName %>/ui/lib/utils"
+			template: `import { cn } from "cn"
 import { Loader2Icon } from "lucide-react"
 
 function Spinner({ className, ...props }: React.ComponentProps<"svg">) {
@@ -6357,9 +6344,8 @@ export { Spinner }
 			template: `"use client"
 
 import * as React from "react"
+import { cn } from "cn"
 import { OTPInput, OTPInputContext } from "input-otp"
-
-import { cn } from "@<%= projectName %>/ui/lib/utils"
 import { MinusIcon } from "lucide-react"
 
 function InputOTP({
@@ -6447,8 +6433,7 @@ export { InputOTP, InputOTPGroup, InputOTPSlot, InputOTPSeparator }
 			filename: "packages/ui/src/components/input.tsx",
 			template: `import * as React from "react"
 import { Input as InputPrimitive } from "@base-ui/react/input"
-
-import { cn } from "@<%= projectName %>/ui/lib/utils"
+import { cn } from "cn"
 
 function Input({ className, type, ...props }: React.ComponentProps<"input">) {
   return (
@@ -6472,8 +6457,7 @@ export { Input }
 			template: `"use client"
 
 import * as React from "react"
-
-import { cn } from "@<%= projectName %>/ui/lib/utils"
+import { cn } from "cn"
 
 function Label({ className, ...props }: React.ComponentProps<"label">) {
   return (
@@ -6498,8 +6482,8 @@ export { Label }
 import * as React from "react"
 import { Menu as MenuPrimitive } from "@base-ui/react/menu"
 import { Menubar as MenubarPrimitive } from "@base-ui/react/menubar"
+import { cn } from "cn"
 
-import { cn } from "@<%= projectName %>/ui/lib/utils"
 import {
   DropdownMenu,
   DropdownMenuContent,
@@ -6779,8 +6763,7 @@ export {
 			filename: "packages/ui/src/components/navigation-menu.tsx",
 			template: `import { NavigationMenu as NavigationMenuPrimitive } from "@base-ui/react/navigation-menu"
 import { cva } from "class-variance-authority"
-
-import { cn } from "@<%= projectName %>/ui/lib/utils"
+import { cn } from "cn"
 import { ChevronDownIcon } from "lucide-react"
 
 function NavigationMenu({
@@ -6950,8 +6933,8 @@ export {
 		{
 			filename: "packages/ui/src/components/pagination.tsx",
 			template: `import * as React from "react"
+import { cn } from "cn"
 
-import { cn } from "@<%= projectName %>/ui/lib/utils"
 import { Button } from "@<%= projectName %>/ui/components/button"
 import { ChevronLeftIcon, ChevronRightIcon, MoreHorizontalIcon } from "lucide-react"
 
@@ -7087,8 +7070,7 @@ export {
 
 import * as React from "react"
 import { Popover as PopoverPrimitive } from "@base-ui/react/popover"
-
-import { cn } from "@<%= projectName %>/ui/lib/utils"
+import { cn } from "cn"
 
 function Popover({ ...props }: PopoverPrimitive.Root.Props) {
   return <PopoverPrimitive.Root data-slot="popover" {...props} />
@@ -7180,8 +7162,7 @@ export {
 			template: `"use client"
 
 import { Progress as ProgressPrimitive } from "@base-ui/react/progress"
-
-import { cn } from "@<%= projectName %>/ui/lib/utils"
+import { cn } from "cn"
 
 function Progress({
   className,
@@ -7268,8 +7249,7 @@ export {
 
 import { Radio as RadioPrimitive } from "@base-ui/react/radio"
 import { RadioGroup as RadioGroupPrimitive } from "@base-ui/react/radio-group"
-
-import { cn } from "@<%= projectName %>/ui/lib/utils"
+import { cn } from "cn"
 
 function RadioGroup({ className, ...props }: RadioGroupPrimitive.Props) {
   return (
@@ -7308,10 +7288,9 @@ export { RadioGroup, RadioGroupItem }
 			filename: "packages/ui/src/components/resizable.tsx",
 			template: `"use client"
 
+import { cn } from "cn"
 import * as ResizablePrimitive from "react-resizable-panels"
 
-import { cn } from "@<%= projectName %>/ui/lib/utils"
-
 function ResizablePanelGroup({
   className,
   ...props
@@ -7364,8 +7343,7 @@ export { ResizableHandle, ResizablePanel, ResizablePanelGroup }
 
 import * as React from "react"
 import { ScrollArea as ScrollAreaPrimitive } from "@base-ui/react/scroll-area"
-
-import { cn } from "@<%= projectName %>/ui/lib/utils"
+import { cn } from "cn"
 
 function ScrollArea({
   className,
@@ -7423,8 +7401,7 @@ export { ScrollArea, ScrollBar }
 
 import * as React from "react"
 import { Select as SelectPrimitive } from "@base-ui/react/select"
-
-import { cn } from "@<%= projectName %>/ui/lib/utils"
+import { cn } from "cn"
 import { ChevronDownIcon, CheckIcon, ChevronUpIcon } from "lucide-react"
 
 const Select = SelectPrimitive.Root
@@ -7627,8 +7604,7 @@ export {
 			template: `"use client"
 
 import { Separator as SeparatorPrimitive } from "@base-ui/react/separator"
-
-import { cn } from "@<%= projectName %>/ui/lib/utils"
+import { cn } from "cn"
 
 function Separator({
   className,
@@ -7657,8 +7633,8 @@ export { Separator }
 
 import * as React from "react"
 import { Dialog as SheetPrimitive } from "@base-ui/react/dialog"
+import { cn } from "cn"
 
-import { cn } from "@<%= projectName %>/ui/lib/utils"
 import { Button } from "@<%= projectName %>/ui/components/button"
 import { XIcon } from "lucide-react"
 
@@ -7801,9 +7777,9 @@ import * as React from "react"
 import { mergeProps } from "@base-ui/react/merge-props"
 import { useRender } from "@base-ui/react/use-render"
 import { cva, type VariantProps } from "class-variance-authority"
+import { cn } from "cn"
 
 import { useIsMobile } from "@<%= projectName %>/ui/hooks/use-mobile"
-import { cn } from "@<%= projectName %>/ui/lib/utils"
 import { Button } from "@<%= projectName %>/ui/components/button"
 import { Input } from "@<%= projectName %>/ui/components/input"
 import { Separator } from "@<%= projectName %>/ui/components/separator"
@@ -8522,7 +8498,7 @@ export {
 		},
 		{
 			filename: "packages/ui/src/components/skeleton.tsx",
-			template: `import { cn } from "@<%= projectName %>/ui/lib/utils"
+			template: `import { cn } from "cn"
 
 function Skeleton({ className, ...props }: React.ComponentProps<"div">) {
   return (
@@ -8540,8 +8516,7 @@ export { Skeleton }
 		{
 			filename: "packages/ui/src/components/slider.tsx",
 			template: `import { Slider as SliderPrimitive } from "@base-ui/react/slider"
-
-import { cn } from "@<%= projectName %>/ui/lib/utils"
+import { cn } from "cn"
 
 function Slider({
   className,
@@ -8651,8 +8626,7 @@ export { Toaster }
 			template: `"use client"
 
 import { Switch as SwitchPrimitive } from "@base-ui/react/switch"
-
-import { cn } from "@<%= projectName %>/ui/lib/utils"
+import { cn } from "cn"
 
 function Switch({
   className,
@@ -8687,8 +8661,7 @@ export { Switch }
 			template: `"use client"
 
 import * as React from "react"
-
-import { cn } from "@<%= projectName %>/ui/lib/utils"
+import { cn } from "cn"
 
 function Table({ className, ...props }: React.ComponentProps<"table">) {
   return (
@@ -8808,8 +8781,7 @@ export {
 
 import { Tabs as TabsPrimitive } from "@base-ui/react/tabs"
 import { cva, type VariantProps } from "class-variance-authority"
-
-import { cn } from "@<%= projectName %>/ui/lib/utils"
+import { cn } from "cn"
 
 function Tabs({
   className,
@@ -8891,8 +8863,7 @@ export { Tabs, TabsList, TabsTrigger, TabsContent, tabsListVariants }
 		{
 			filename: "packages/ui/src/components/textarea.tsx",
 			template: `import * as React from "react"
-
-import { cn } from "@<%= projectName %>/ui/lib/utils"
+import { cn } from "cn"
 
 function Textarea({ className, ...props }: React.ComponentProps<"textarea">) {
   return (
@@ -8918,8 +8889,8 @@ import * as React from "react"
 import { Toggle as TogglePrimitive } from "@base-ui/react/toggle"
 import { ToggleGroup as ToggleGroupPrimitive } from "@base-ui/react/toggle-group"
 import { type VariantProps } from "class-variance-authority"
+import { cn } from "cn"
 
-import { cn } from "@<%= projectName %>/ui/lib/utils"
 import { toggleVariants } from "@<%= projectName %>/ui/components/toggle"
 
 const ToggleGroupContext = React.createContext<
@@ -9009,8 +8980,7 @@ export { ToggleGroup, ToggleGroupItem }
 
 import { Toggle as TogglePrimitive } from "@base-ui/react/toggle"
 import { cva, type VariantProps } from "class-variance-authority"
-
-import { cn } from "@<%= projectName %>/ui/lib/utils"
+import { cn } from "cn"
 
 const toggleVariants = cva(
   "group/toggle inline-flex items-center justify-center gap-1 rounded-lg text-sm font-medium whitespace-nowrap transition-all outline-none hover:bg-muted hover:text-foreground focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 disabled:pointer-events-none disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-destructive/20 aria-pressed:bg-muted data-[state=on]:bg-muted dark:aria-invalid:ring-destructive/40 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
@@ -9057,8 +9027,7 @@ export { Toggle, toggleVariants }
 			template: `"use client"
 
 import { Tooltip as TooltipPrimitive } from "@base-ui/react/tooltip"
-
-import { cn } from "@<%= projectName %>/ui/lib/utils"
+import { cn } from "cn"
 
 function TooltipProvider({
   delay = 0,
@@ -9153,8 +9122,8 @@ export function ModeToggle() {
 import { mergeProps } from "@base-ui/react/merge-props"
 import { useRender } from "@base-ui/react/use-render"
 import { cva, type VariantProps } from "class-variance-authority"
+import { cn } from "cn"
 
-import { cn } from "@<%= projectName %>/ui/lib/utils"
 import { Button } from "@<%= projectName %>/ui/components/button"
 
 const attachmentVariants = cva(
@@ -9364,8 +9333,7 @@ export {
 import { mergeProps } from "@base-ui/react/merge-props"
 import { useRender } from "@base-ui/react/use-render"
 import { cva, type VariantProps } from "class-variance-authority"
-
-import { cn } from "@<%= projectName %>/ui/lib/utils"
+import { cn } from "cn"
 
 function BubbleGroup({ className, ...props }: React.ComponentProps<"div">) {
   return (
@@ -9496,8 +9464,7 @@ export { BubbleGroup, Bubble, BubbleContent, BubbleReactions }
 import { mergeProps } from "@base-ui/react/merge-props"
 import { useRender } from "@base-ui/react/use-render"
 import { cva, type VariantProps } from "class-variance-authority"
-
-import { cn } from "@<%= projectName %>/ui/lib/utils"
+import { cn } from "cn"
 
 const markerVariants = cva(
   "group/marker relative flex min-h-4 w-full items-center gap-2 text-left text-sm text-muted-foreground [&_svg:not([class*='size-'])]:size-4 [a]:underline [a]:underline-offset-3 [a]:hover:text-foreground",
@@ -9568,8 +9535,7 @@ export { Marker, MarkerIcon, MarkerContent, markerVariants }
 		{
 			filename: "packages/ui/src/components/message.tsx",
 			template: `import * as React from "react"
-
-import { cn } from "@<%= projectName %>/ui/lib/utils"
+import { cn } from "cn"
 
 function MessageGroup({ className, ...props }: React.ComponentProps<"div">) {
   return (
@@ -9672,8 +9638,8 @@ import {
   useMessageScrollerScrollable,
   useMessageScrollerVisibility,
 } from "@shadcn/react/message-scroller"
+import { cn } from "cn"
 
-import { cn } from "@<%= projectName %>/ui/lib/utils"
 import { Button } from "@<%= projectName %>/ui/components/button"
 import { ArrowDownIcon } from "lucide-react"
 
@@ -9707,7 +9673,7 @@ function MessageScrollerViewport({
     <MessageScrollerPrimitive.Viewport
       data-slot="message-scroller-viewport"
       className={cn(
-        "size-full min-h-0 min-w-0 scroll-fade-b scrollbar-thin scrollbar-gutter-stable overflow-y-auto overscroll-contain contain-content data-autoscrolling:scrollbar-thumb-transparent data-autoscrolling:scrollbar-track-transparent",
+        "size-full min-h-0 min-w-0 scroll-fade-b scrollbar-thin scrollbar-gutter-stable overflow-y-auto overscroll-contain contain-content data-autoscrolling:scrollbar-thumb-transparent data-autoscrolling:scrollbar-track-transparent data-pending-scroll:invisible",
         className
       )}
       {...props}
@@ -10293,7 +10259,7 @@ export default function Home() {
   const { data: session, isPending } = authClient.useSession();
 
   const { data: hello } = useQuery({
-    queryKey: ['hello'],
+    queryKey: ['hello', session?.user.id],
     queryFn: () => fetch('/api/hello').then((r) => r.json()),
   });
 
@@ -10674,7 +10640,8 @@ var package_json_default$1 = {
   },
   "devDependencies": {
     "@eslint/js": "<%= versions["@eslint/js"] %>",
-    "@next/eslint-plugin-next": "<%= versions["@next/eslint-plugin-next"] %>",
+    "@next/eslint-plugin-next": "<%= versions["@next/eslint-plugin-next"] %>",<% if (shadcn) { %>
+    "@shadcn/lint": "<%= versions["@shadcn/lint"] %>",<% } %>
     "eslint": "<%= versions.eslint %>",
     "eslint-config-prettier": "<%= versions["eslint-config-prettier"] %>",
     "eslint-plugin-only-warn": "<%= versions["eslint-plugin-only-warn"] %>",
@@ -10736,7 +10703,8 @@ import pluginReactHooks from "eslint-plugin-react-hooks";
 import pluginReact from "eslint-plugin-react";
 import globals from "globals";
 import pluginNext from "@next/eslint-plugin-next";
-import { config as baseConfig } from "./base.js";
+import { config as baseConfig } from "./base.js";<% if (shadcn) { %>
+import { plugin as shadcn } from "@shadcn/lint";<% } %>
 
 /**
  * A custom ESLint configuration for libraries that use Next.js.
@@ -10784,7 +10752,16 @@ export const nextJsConfig = [
       // React scope no longer necessary with new JSX transform.
       "react/react-in-jsx-scope": "off",
     },
-  },
+  },<% if (shadcn) { %>
+  {
+    plugins: { shadcn },
+    rules: {
+      "shadcn/no-restyle": ["error", { allow: ["layout"] }],
+      "shadcn/no-raw-colors": "error",
+      "shadcn/no-arbitrary-values": ["error", { allow: ["layout"] }],
+      "shadcn/require-static-classes": "error",
+    },
+  },<% } %>
 ];`
 };
 //#endregion
@@ -10797,7 +10774,8 @@ import tseslint from "typescript-eslint";
 import pluginReactHooks from "eslint-plugin-react-hooks";
 import pluginReact from "eslint-plugin-react";
 import globals from "globals";
-import { config as baseConfig } from "./base.js";
+import { config as baseConfig } from "./base.js";<% if (shadcn) { %>
+import { plugin as shadcn } from "@shadcn/lint";<% } %>
 
 /**
  * A custom ESLint configuration for libraries that use React.
@@ -10829,7 +10807,24 @@ export const config = [
       "react/react-in-jsx-scope": "off",
       "react/prop-types": "off",
     },
+  },<% if (shadcn) { %>
+  {
+    plugins: { shadcn },
+    rules: {
+      "shadcn/no-restyle": ["error", { allow: ["layout"] }],
+      "shadcn/no-raw-colors": "error",
+      "shadcn/no-arbitrary-values": ["error", { allow: ["layout"] }],
+      "shadcn/require-static-classes": "error",
+    },
   },
+  {
+    files: ["src/components/**"],
+    rules: {
+      "shadcn/no-restyle": "off",
+      "shadcn/no-arbitrary-values": "off",
+      "shadcn/require-static-classes": "off",
+    },
+  },<% } %>
 ];`
 };
 //#endregion
@@ -10897,6 +10892,13 @@ var prettierrc_default = {
 	template: `{}`
 };
 //#endregion
+//#region src/templates/root/templates/prettierignore.ts
+var prettierignore_default = {
+	filename: ".prettierignore",
+	template: `pnpm-lock.yaml
+`
+};
+//#endregion
 //#region src/templates/eslint-config/index.ts
 const web = "apps/web";
 const api = "apps/api";
@@ -10911,7 +10913,8 @@ const eslintConfig = {
 		eslint_config_default$2,
 		eslint_config_default$1,
 		eslint_config_default,
-		prettierrc_default
+		prettierrc_default,
+		prettierignore_default
 	],
 	packages: [
 		{
@@ -11032,9 +11035,9 @@ var oxlintrc_default = {
   "categories": {
     "correctness": "error"
   }<% if (antiSlop) { %>,
-  "ignorePatterns": ["tools/oxlint/anti-slop/**"],
-  "jsPlugins": [{ "name": "anti-slop", "specifier": "./tools/oxlint/anti-slop/index.ts" }],
-  "rules": {
+  "ignorePatterns": ["tools/oxlint/anti-slop/**"]<% } %><% if (antiSlop || shadcn) { %>,
+  "jsPlugins": [<% if (antiSlop) { %>{ "name": "anti-slop", "specifier": "./tools/oxlint/anti-slop/index.ts" }<% } %><% if (antiSlop && shadcn) { %>, <% } %><% if (shadcn) { %>"@shadcn/lint"<% } %>],
+  "rules": {<% if (antiSlop) { %>
     "anti-slop/no-chained-type-assertions": "error",
     "anti-slop/no-conditional-empty-object-spread": "error",
     "anti-slop/no-known-value-widening": "error",
@@ -11049,12 +11052,16 @@ var oxlintrc_default = {
     "anti-slop/no-unknown-type-aliases": "error",
     "anti-slop/no-unsafe-dictionary-type": "error",
     "anti-slop/no-widen-then-assert": "error",
-    "anti-slop/require-safety-comment-for-type-assertion": "error"
-  }<% if (shadcn) { %>,
+    "anti-slop/require-safety-comment-for-type-assertion": "error"<% if (shadcn) { %>,<% } %><% } %><% if (shadcn) { %>
+    "shadcn/no-restyle": ["error", { "allow": ["layout"] }],
+    "shadcn/no-raw-colors": "error",
+    "shadcn/no-arbitrary-values": ["error", { "allow": ["layout"] }],
+    "shadcn/require-static-classes": "error"<% } %>
+  }<% } %><% if (shadcn) { %>,
   "overrides": [
     {
       "files": ["packages/ui/src/components/**"],
-      "rules": {
+      "rules": {<% if (antiSlop) { %>
         "anti-slop/no-chained-type-assertions": "off",
         "anti-slop/no-conditional-empty-object-spread": "off",
         "anti-slop/no-known-value-widening": "off",
@@ -11069,10 +11076,13 @@ var oxlintrc_default = {
         "anti-slop/no-unknown-type-aliases": "off",
         "anti-slop/no-unsafe-dictionary-type": "off",
         "anti-slop/no-widen-then-assert": "off",
-        "anti-slop/require-safety-comment-for-type-assertion": "off"
+        "anti-slop/require-safety-comment-for-type-assertion": "off",<% } %>
+        "shadcn/no-restyle": "off",
+        "shadcn/no-arbitrary-values": "off",
+        "shadcn/require-static-classes": "off"
       }
     }
-  ]<% } %><% } %>
+  ]<% } %>
 }`
 };
 //#endregion
@@ -12814,7 +12824,7 @@ export default function Home() {
   const { data: session, isPending } = authClient.useSession();
 
   const { data: hello } = useQuery({
-    queryKey: ['hello'],
+    queryKey: ['hello', session?.user.id],
     queryFn: () => fetch('/api/hello').then((r) => r.json()),
   });
 
@@ -13010,9 +13020,8 @@ export function TodoList({
               </span>
               <Button
                 variant="ghost"
-                size="sm"
+                size="icon-sm"
                 onClick={() => deleteMutation.mutate(todo.id)}
-                className="text-muted-foreground hover:text-destructive h-7 w-7 p-0"
               >
                 ×
               </Button>
@@ -13042,13 +13051,13 @@ import { Link } from '@<%= projectName %>/ui/link';
 import { Logo } from '@<%= projectName %>/ui/logo';
 import { TodoList } from '@/app/todo-list';
 import { ModeToggle } from '@<%= projectName %>/ui/mode-toggle';
-import { Card, CardContent, CardHeader, CardTitle } from '@<%= projectName %>/ui/card';
+import { Card, CardContent, CardHeader } from '@<%= projectName %>/ui/card';
 
 export default function Home() {
   const { data: session, isPending } = authClient.useSession();
 
   const { data: hello } = useQuery({
-    queryKey: ['hello'],
+    queryKey: ['hello', session?.user.id],
     queryFn: () => fetch('/api/hello').then((r) => r.json()),
   });
 
@@ -13063,7 +13072,7 @@ export default function Home() {
       </div>
 
       <div className="flex items-center gap-3 py-2">
-        <Logo className="w-10 h-auto text-foreground" />
+        <Logo className="w-10 h-auto" />
         <div>
           <h1 className="text-4xl font-black tracking-tight"><%= projectName %></h1>
           <p className="text-sm text-muted-foreground tracking-widest uppercase">
@@ -13074,9 +13083,9 @@ export default function Home() {
 
       <Card>
         <CardHeader>
-          <CardTitle className="text-xs font-mono uppercase tracking-widest text-muted-foreground">
+          <p className="text-xs font-mono uppercase tracking-widest text-muted-foreground">
             next.js
-          </CardTitle>
+          </p>
         </CardHeader>
         <CardContent>
           <p className="font-mono text-sm text-muted-foreground">apps/web/app/layout.tsx</p>
@@ -13086,9 +13095,9 @@ export default function Home() {
 
       <Card>
         <CardHeader>
-          <CardTitle className="text-xs font-mono uppercase tracking-widest text-muted-foreground">
+          <p className="text-xs font-mono uppercase tracking-widest text-muted-foreground">
             nest.js
-          </CardTitle>
+          </p>
         </CardHeader>
         <CardContent>
           <p className="font-mono text-sm text-muted-foreground">GET /api/hello</p>
@@ -13100,9 +13109,9 @@ export default function Home() {
 
       <Card>
         <CardHeader>
-          <CardTitle className="text-xs font-mono uppercase tracking-widest text-muted-foreground">
+          <p className="text-xs font-mono uppercase tracking-widest text-muted-foreground">
             better-auth
-          </CardTitle>
+          </p>
         </CardHeader>
         <CardContent>
           {isPending ? (
@@ -13396,7 +13405,7 @@ export default function Home() {
   const { data: session, isPending } = authClient.useSession();
 
   const { data: hello } = useQuery({
-    queryKey: ['hello'],
+    queryKey: ['hello', session?.user.id],
     queryFn: () => fetch('/api/hello').then((r) => r.json()),
   });