next-app-router-playground

Update TypeScript target to ES2022 Summary This pull request updates the TypeScript compiler target from to to align with modern Next.js and TypeScript recommendations. Changes Updated from to . Added an explanatory comment documenting the deprecation of the target in TypeScript 5.9+. Preserved all existing compiler options and project behavior. Why TypeScript has deprecated the compilation target and plans to remove support in TypeScript 7. Since this project uses modern versions of Next.js and targets contemporary browsers and Node.js runtimes, is a more appropriate and future-proof compilation target. This change: Eliminates the deprecation warning during development and builds. #132 Option 'target=ES5' is deprecated and will stop functioning in TypeScript 7.0. Specify compilerOption '"ignoreDeprecations": "6.0"' to silence this error. : for :{ "compilerOptions": { "target": "es5", "lib": ["dom", "dom.iterable", "esnext"], "allowJs": true, "skipLibCheck": true, "strict": true, "forceConsistentCasingInFileNames": true, "noEmit": true, "esModuleInterop": true, "module": "esnext", "moduleResolution": "bundler", "resolveJsonModule": true, "isolatedModules": true, "jsx": "react-jsx", "incremental": true, "baseUrl": ".", "paths": { "#/": ["./"] }, "plugins": [{ "name": "next" }] }, "include": [ "next-env.d.ts", "*/.ts", "*/.tsx", ".next/types/*/.ts", ".next/dev/types/*/.ts" ], "exclude": ["node_modules"] } Updated TypeScript target version from ES5 to ES2022 and adjusted paths and plugins configuration.

feat: implement native light/dark mode support via next-themes & Tailwind v4 Description This Pull Request introduces a comprehensive, system-aware light and dark mode architecture. It migrates the application from static, hardcoded dark styling into a dynamic, fluid layout using Tailwind CSS v4 design tokens and ***. With this setup, the application automatically respects user system choices, avoids Layout Flash of Unstyled Content (FOUC), and offers an interactive theme-toggling dashboard mechanism. Key Changes 1. Build and Dependency Configuration () Added () to the project dependencies, ensuring full compilation compatibility with React 19 and Next.js 16. 2. Stylesheet Modernization () Swapped fixed hex and color configurations inside fallback elements to point to a dynamic variable wrapper. Built semantic color abstraction blocks directly into the directive, utilizing Tailwind v4 scoping syntax: : Switches from (light) to (dark). : Switches from (light) to (dark). : Switches from (light) to (dark). Refactored the loading component's hardcoded background from a static value to so it remains optimally visible against variable background planes. 3. Structural Fluid Layout Updates () Wrapped the root component tree with the `attribute="class"suppressHydrationWarningbg-gray-950bg-blackborder-gray-800bg-backgroundtext-foregroundborder-borderui/theme-toggle.tsxuseThememountedapp/page.tsxtext-gray-700text-gray-500 dark:text-gray-400bg-gray-900bg-gray-100 dark:bg-gray-900 border border-border``diff // package.json "dependencies": { + "next-themes": "^0.4.4", "react": "19.2.4", // styles/globals.css @layer base { , ::after, ::before, ::backdrop, ::file-selector-button { border-color: var(--color-gray-200, currentColor); + border-color: var(--color-border, var(--color-gray-200, currentColor)); } } @theme { + --color-background: var(--color-neutral-50); + --color-foreground: var(--color-neutral-900); + --color-border: var(--color-neutral-200); + --color-spinner-track: var(--color-neutral-900); + + @variant dark (&:where(.dark, .dark )) { + --color-background: var(--color-neutral-950); + --color-foreground: var(--color-neutral-50); + --color-border: var(--color-neutral-800); + --color-spinner-track: var(--color-neutral-50); + } } .spinner { background: conic-gradient(transparent 10deg, white, transparent 320deg); + background: conic-gradient(transparent 10deg, var(--color-spinner-track), transparent 320deg); } // app/layout.tsx +import { ThemeProvider } from 'next-themes'; ... + + + + // app/page.tsx +import { ThemeToggle } from '#/ui/theme-toggle'; ... + + + {demos.map((section) => ( + + ))}

feat: add stateful ThemeProvider and ThemeToggle component Description This Pull Request introduces the client-side state machinery necessary to manage, persist, and toggle between light and dark modes. It introduces a React Context-based to synchronize runtime UI state with the layout, exposes a functional action component on the root page, and adapts the static grid link elements to gracefully morph across light and dark color values. Key Changes 1. Created Client-Side () Implemented a standard React Context provider to capture, track, and modify active theme nodes ( vs ). Utilized an initialization hook to inspect active structural settings on the DOM container at boot, keeping state variables fully in sync with the upstream inline blocking script. Added a robust state handler that mutates document class selectors and writes to for cross-session storage memory. 2. Built Action Component () Created a lightweight component displaying context state via semantic emoji indicators (🌙/☀️). Styled using Tailwind v4 fluid utilities (, , ) to guarantee correct look-and-feel variables across layouts. 3. Mounted App Wrapper Layer () Embedded the to enclose the application subtree, allowing components down the tree to tap into the active context stream cleanly. 4. Re-styled Demo Hub Index Page () Embedded the `bg-gray-900text-gray-200text-gray-700bg-gray-100 dark:bg-gray-900text-gray-800 dark:text-gray-200``diff + // #/ui/theme-provider.tsx + export function ThemeProvider({ children }) { ... } + export function useTheme() { ... } + // #/ui/theme-toggle.tsx + export function ThemeToggle() { ... } // #/app/layout.tsx + {children} + // #/app/page.tsx + + + {demos.map((section) => ( + ... + ))