feat: setup full Next.js toolchain and core dependencies

- Add runtime deps: react-query, react-hook-form+zod, zustand, ky, openapi-fetch,
  better-auth, react-markdown, shiki, recharts, next-themes, nuqs, sonner, cmdk,
  vaul, embla-carousel-react, motion, date-fns, tailwind-merge, clsx, cva
- Add dev tooling: vitest, testing-library, playwright, prettier(+tailwind plugin),
  husky, lint-staged, jsdom
- Wire providers (QueryClient, Theme, NuqsAdapter, Tooltip, Sonner) into layout
- Add vitest/playwright/prettier configs + lint-staged pre-commit hook
- Add lib/query-client + lib/http (ky) helpers and sample unit test
- Fix react-hooks/set-state-in-effect lint errors (use-mobile useSyncExternalStore,
  carousel async init)
- Remove committed Next-generated types/ duplicates (regenerated under .next/types)

app/page.tsx

@@ -2,10 +2,10 @@ import Image from "next/image";
 
 export default function Home() {
   return (
-    <div className="flex flex-col flex-1 items-center justify-center bg-zinc-50 font-sans dark:bg-black">
-      <main className="flex flex-1 w-full max-w-3xl flex-col items-center justify-between py-32 px-16 bg-white dark:bg-black sm:items-start">
+    <div className="flex flex-1 flex-col items-center justify-center bg-zinc-50 font-sans dark:bg-black">
+      <main className="flex w-full max-w-3xl flex-1 flex-col items-center justify-between bg-white px-16 py-32 sm:items-start dark:bg-black">
         <Image
-          className="dark:invert h-5 w-[100px]"
+          className="h-5 w-[100px] dark:invert"
           src="/next.svg"
           alt="Next.js logo"
           width={100}
@@ -13,7 +13,7 @@ export default function Home() {
           priority
         />
         <div className="flex flex-col items-center gap-6 text-center sm:items-start sm:text-left">
-          <h1 className="max-w-xs text-3xl font-semibold leading-10 tracking-tight text-black dark:text-zinc-50">
+          <h1 className="max-w-xs text-3xl leading-10 font-semibold tracking-tight text-black dark:text-zinc-50">
             To get started, edit the{" "}
             <code className="rounded bg-black/[.06] px-1.5 py-0.5 font-mono text-[0.9em] dark:bg-white/[.08]">
               page.tsx
@@ -40,13 +40,13 @@ export default function Home() {
         </div>
         <div className="flex flex-col gap-4 text-base font-medium sm:flex-row">
           <a
-            className="flex h-12 w-full items-center justify-center gap-2 rounded-full bg-foreground px-5 text-background transition-colors hover:bg-[#383838] dark:hover:bg-[#ccc] md:w-[158px]"
+            className="flex h-12 w-full items-center justify-center gap-2 rounded-full bg-foreground px-5 text-background transition-colors hover:bg-[#383838] md:w-[158px] dark:hover:bg-[#ccc]"
             href="https://vercel.com/new?utm_source=create-next-app&utm_medium=appdir-template-tw&utm_campaign=create-next-app"
             target="_blank"
             rel="noopener noreferrer"
           >
             <Image
-              className="dark:invert h-[14px] w-4"
+              className="h-[14px] w-4 dark:invert"
               src="/vercel.svg"
               alt="Vercel logomark"
               width={16}
@@ -55,7 +55,7 @@ export default function Home() {
             Deploy Now
           </a>
           <a
-            className="flex h-12 w-full items-center justify-center rounded-full border border-solid border-black/[.08] px-5 transition-colors hover:border-transparent hover:bg-black/[.04] dark:border-white/[.145] dark:hover:bg-[#1a1a1a] md:w-[158px]"
+            className="flex h-12 w-full items-center justify-center rounded-full border border-solid border-black/[.08] px-5 transition-colors hover:border-transparent hover:bg-black/[.04] md:w-[158px] dark:border-white/[.145] dark:hover:bg-[#1a1a1a]"
             href="https://nextjs.org/docs?utm_source=create-next-app&utm_medium=appdir-template-tw&utm_campaign=create-next-app"
             target="_blank"
             rel="noopener noreferrer"