create-next-pro-cli 0.1.32 → 0.1.34

package/README.md

@@ -126,6 +126,8 @@ Every page belongs to an explicit route area. Use `--area public` for routes ren
 
 `addpage` creates `layout`, `page`, and `loading` files by default. Available long options are `--layout`, `--page`, `--loading`, `--not-found`, `--error`, `--global-error`, `--route`, `--template`, and `--default`. The historical short forms remain available.
 
+Generated page-level layouts accept only `children` because they do not read route parameters. If a customized Next.js 16 layout needs the locale, make the component asynchronous, type `params` as `Promise<{ locale: string }>` and await it before use. Projects generated with `create-next-pro-cli@0.1.32` may contain the obsolete synchronous `params: { locale: string }` signature: remove that property when it is unused, or migrate it to the asynchronous contract.
+
 `rmpage` only lists routes that contain an actual `page.tsx` in the `(public)` or `(user)` route group. Technical directories remain hidden. Removal is confined to the selected area and project, and it preserves shared parent directories and unrelated files.
 
 ## Generated project architecture

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "create-next-pro-cli",
-  "version": "0.1.32",
+  "version": "0.1.34",
   "description": "Advanced Next.js project scaffolder with i18n, Tailwind, App Router and more.",
   "repository": {
     "type": "git",

package/templates/Page/layout.tsx

@@ -1,11 +1,5 @@
-import React from "react";
+import type { ReactNode } from "react";
 
-export default function templateLayout({
-  children,
-  params,
-}: {
-  children: React.ReactNode;
-  params: { locale: string };
-}) {
+export default function templateLayout({ children }: { children: ReactNode }) {
   return children;
 }

package/templates/Projects/default/.agents/skills/create-next-pro-addpage/SKILL.md

@@ -47,6 +47,8 @@ For `Account.Security --area user`, expect resources under:
 
 The route area affects only the App Router path and layout. UI and message paths remain area-independent. Public page UI uses its own `<main>` landmark; user page UI uses `<section>` because the user layout already provides `<main>`.
 
+The generated page-level `layout.tsx` accepts only `children` because it does not read route parameters. If you customize it to read the locale under Next.js 16, make the component asynchronous, type `params` as `Promise<{ locale: string }>` and await it before use.
+
 The command creates only missing code files and preserves existing ones as `unchanged`. Repeating the command in the same area is idempotent and can add requested missing route files. Requesting the same logical page in the other area fails with `TARGET_EXISTS`. Flat historical routes or ambiguous route definitions fail with `INCONSISTENT_ROUTE` before any write.
 
 ## Workflow
@@ -87,3 +89,5 @@ bun run check
 ```
 
 Confirm every `created` or `updated` event path exists. A repeated command should preserve existing code and normally report those resources as `unchanged`.
+
+When a generated or customized layout reads route parameters, include `next build` in validation so Next.js checks the inferred `LayoutProps` contract.

package/templates/Projects/default/README.md

@@ -107,6 +107,12 @@ interactive page flows expose the same area-aware catalog. Areas select a route
 layout without changing the public URL; see the linked command skills for the
 complete contract.
 
+Page-level layouts generated by the CLI accept only `children` when they do not
+read route parameters. A customized Next.js 16 layout that reads the locale must
+type `params` as `Promise<{ locale: string }>` and await it. Projects created
+with `create-next-pro-cli@0.1.32` should remove the obsolete synchronous
+`params` property when unused, or migrate it to this asynchronous contract.
+
 ## Template Features
 
 - Next.js 16 App Router

package/templates/Projects/default/src/app/[locale]/layout.tsx

@@ -4,7 +4,6 @@ import { setRequestLocale } from "next-intl/server";
 import { hasLocale } from "next-intl";
 import type { Metadata } from "next";
 import { notFound } from "next/navigation";
-import Script from "next/script";
 import React from "react";
 import "@/app/styles/globals.css";
 import { routing } from "@/lib/i18n/routing";
@@ -37,18 +36,11 @@ export default async function LocaleLayout({
   setRequestLocale(locale);
   const messages = getMessages(locale);
   return (
-    <html lang={locale} className="light" suppressHydrationWarning>
+    <html lang={locale} className="light">
       <body>
         <NextIntlClientProvider locale={locale} messages={messages}>
           {children}
         </NextIntlClientProvider>
-        <Script
-          id="theme-initializer"
-          strategy="beforeInteractive"
-          dangerouslySetInnerHTML={{
-            __html: `try{var t=localStorage.getItem("theme");var d=t?t==="dark":window.matchMedia("(prefers-color-scheme: dark)").matches;document.documentElement.classList.toggle("dark",d);document.documentElement.classList.toggle("light",!d);}catch{document.documentElement.classList.add("light");}`,
-          }}
-        />
       </body>
     </html>
   );

package/templates/Projects/default/src/ui/_global/ThemeToggle.tsx

@@ -4,30 +4,81 @@ import { Moon, Sun } from "lucide-react";
 import { Button } from "./Button";
 import { useLocale, useTranslations } from "next-intl";
 
+type Theme = "dark" | "light";
+
 const themeChangeEvent = "template-theme-change";
 
-function getThemeSnapshot() {
+function getThemeSnapshot(): Theme {
   return document.documentElement.classList.contains("dark") ? "dark" : "light";
 }
 
-function getServerThemeSnapshot() {
+function getServerThemeSnapshot(): Theme {
   return "light";
 }
 
+function isTheme(value: string | null): value is Theme {
+  return value === "dark" || value === "light";
+}
+
+function readStoredTheme(): Theme | null {
+  try {
+    const theme = localStorage.getItem("theme");
+    return isTheme(theme) ? theme : null;
+  } catch {
+    return null;
+  }
+}
+
+function getSystemTheme(): Theme {
+  return window.matchMedia("(prefers-color-scheme: dark)").matches
+    ? "dark"
+    : "light";
+}
+
+function setDocumentTheme(theme: Theme) {
+  const isDark = theme === "dark";
+  document.documentElement.classList.toggle("dark", isDark);
+  document.documentElement.classList.toggle("light", !isDark);
+}
+
+function persistTheme(theme: Theme) {
+  try {
+    localStorage.setItem("theme", theme);
+  } catch {
+    // The active document theme still works when storage is unavailable.
+  }
+}
+
 function subscribeToThemeChange(onStoreChange: () => void) {
+  const handleStorage = (event: StorageEvent) => {
+    if (event.key !== null && event.key !== "theme") return;
+
+    setDocumentTheme(readStoredTheme() ?? getSystemTheme());
+    onStoreChange();
+  };
+
+  const colorScheme = window.matchMedia("(prefers-color-scheme: dark)");
+  const handleSystemThemeChange = (event: MediaQueryListEvent) => {
+    if (readStoredTheme() !== null) return;
+
+    setDocumentTheme(event.matches ? "dark" : "light");
+    onStoreChange();
+  };
+
   window.addEventListener(themeChangeEvent, onStoreChange);
-  window.addEventListener("storage", onStoreChange);
+  window.addEventListener("storage", handleStorage);
+  colorScheme.addEventListener("change", handleSystemThemeChange);
 
   return () => {
     window.removeEventListener(themeChangeEvent, onStoreChange);
-    window.removeEventListener("storage", onStoreChange);
+    window.removeEventListener("storage", handleStorage);
+    colorScheme.removeEventListener("change", handleSystemThemeChange);
   };
 }
 
-function applyTheme(dark: boolean) {
-  document.documentElement.classList.toggle("dark", dark);
-  document.documentElement.classList.toggle("light", !dark);
-  localStorage.setItem("theme", dark ? "dark" : "light");
+function applyTheme(theme: Theme, persist: boolean) {
+  setDocumentTheme(theme);
+  if (persist) persistTheme(theme);
   window.dispatchEvent(new Event(themeChangeEvent));
 }
 
@@ -42,17 +93,12 @@ export default function ThemeToggle() {
   const isDark = theme === "dark";
 
   useEffect(() => {
-    const storedTheme = localStorage.getItem("theme");
-    const shouldUseDark = storedTheme
-      ? storedTheme === "dark"
-      : window.matchMedia("(prefers-color-scheme: dark)").matches;
-
-    applyTheme(shouldUseDark);
+    applyTheme(readStoredTheme() ?? getSystemTheme(), false);
   }, [locale]);
 
   return (
     <Button
-      onClick={() => applyTheme(!isDark)}
+      onClick={() => applyTheme(isDark ? "light" : "dark", true)}
       className="rounded-full p-0 dark:hover:bg-white/10 light:hover:bg-black/10 transition-colors"
       aria-label={t("toggle_theme")}
       variant="ghost"

package/templates/Projects/default/tests/e2e/template-remediation.playwright.ts

@@ -1,10 +1,14 @@
 import { expect, test } from "@playwright/test";
+import path from "node:path";
 
 const captureByProject: Record<string, string> = {
   desktop: "artifacts/captures/phase-2-11-template-reconciliation-desktop.png",
   mobile: "artifacts/captures/phase-2-11-template-reconciliation-mobile.png",
 };
 
+const themeCaptureDirectory =
+  process.env.CNP_CAPTURE_DIRECTORY ?? "artifacts/captures";
+
 test("public template routes render in both locales", async ({
   page,
 }, testInfo) => {
@@ -107,32 +111,108 @@ test("security headers and disabled auth are explicit", async ({ request }) => {
   });
 });
 
-test("theme is initialized before hydration without a React warning", async ({
+test("ThemeToggle restores and persists the active theme without scripts", async ({
   page,
-}) => {
-  const hydrationWarnings: string[] = [];
+}, testInfo) => {
+  const themeConsoleIssues: string[] = [];
   page.on("console", (message) => {
     if (
-      message.type() === "warning" &&
-      (message.text().includes("hydrated") ||
+      (message.type() === "warning" || message.type() === "error") &&
+      (message.text().toLowerCase().includes("hydrat") ||
         message.text().includes("Encountered a script tag"))
     ) {
-      hydrationWarnings.push(message.text());
+      themeConsoleIssues.push(message.text());
     }
   });
 
-  await page.addInitScript(() => localStorage.setItem("theme", "dark"));
+  await page.addInitScript(() => {
+    if (localStorage.getItem("theme") === null) {
+      localStorage.setItem("theme", "dark");
+    }
+  });
   await page.goto("/en", { waitUntil: "domcontentloaded" });
-  await expect(page.locator("#theme-initializer")).toHaveCount(1);
+  await expect(page.locator("#theme-initializer")).toHaveCount(0);
+  await expect(page.locator("html")).toHaveClass(/dark/);
+  await expect
+    .poll(() => page.evaluate(() => localStorage.getItem("theme")))
+    .toBe("dark");
+
+  if (testInfo.project.name === "desktop") {
+    await page.screenshot({
+      path: path.join(
+        themeCaptureDirectory,
+        "phase-2-16-theme-dark-desktop.png",
+      ),
+      fullPage: true,
+    });
+  }
+
+  await page.getByLabel("Select language").selectOption("fr");
+  await expect(page).toHaveURL(/\/fr$/);
   await expect(page.locator("html")).toHaveClass(/dark/);
-  expect(hydrationWarnings).toEqual([]);
+
+  await page.getByLabel("Changer de thème").click();
+  await expect(page.locator("html")).toHaveClass(/light/);
+  await expect
+    .poll(() => page.evaluate(() => localStorage.getItem("theme")))
+    .toBe("light");
+
+  await page.reload({ waitUntil: "domcontentloaded" });
+  await expect(page.locator("html")).toHaveClass(/light/);
+
+  await page.goto("/fr/dashboard", { waitUntil: "domcontentloaded" });
+  await expect(page).toHaveURL(/\/fr\/login/);
+  await expect(page.locator("html")).toHaveClass(/light/);
+
+  if (testInfo.project.name === "desktop") {
+    await page.screenshot({
+      path: path.join(
+        themeCaptureDirectory,
+        "phase-2-16-theme-light-desktop.png",
+      ),
+      fullPage: true,
+    });
+  }
+
+  expect(themeConsoleIssues).toEqual([]);
+});
+
+test("ThemeToggle follows the system preference without persisting it", async ({
+  page,
+}) => {
+  await page.emulateMedia({ colorScheme: "dark" });
+  await page.addInitScript(() => localStorage.removeItem("theme"));
+  await page.goto("/en", { waitUntil: "domcontentloaded" });
+
+  await expect(page.locator("html")).toHaveClass(/dark/);
+  await expect
+    .poll(() => page.evaluate(() => localStorage.getItem("theme")))
+    .toBeNull();
+
+  await page.emulateMedia({ colorScheme: "light" });
+  await expect(page.locator("html")).toHaveClass(/light/);
+  await expect
+    .poll(() => page.evaluate(() => localStorage.getItem("theme")))
+    .toBeNull();
 });
 
-test("theme falls back to the system preference", async ({ page }) => {
+test("ThemeToggle remains usable when browser storage is unavailable", async ({
+  page,
+}) => {
   await page.emulateMedia({ colorScheme: "dark" });
+  await page.addInitScript(() => {
+    Object.defineProperty(window, "localStorage", {
+      configurable: true,
+      get() {
+        throw new DOMException("Storage is unavailable", "SecurityError");
+      },
+    });
+  });
   await page.goto("/en", { waitUntil: "domcontentloaded" });
 
   await expect(page.locator("html")).toHaveClass(/dark/);
+  await page.getByLabel("Toggle theme").click();
+  await expect(page.locator("html")).toHaveClass(/light/);
 });
 
 test("mobile navigation supports keyboard dismissal", async ({

package/templates/Projects/default/tests/unit/template-baseline.test.ts

@@ -58,4 +58,23 @@ describe("updated template baseline", () => {
     ].filter(Boolean);
     expect(configuredAuthValues).toHaveLength(3);
   });
+
+  test("delegates theme initialization to ThemeToggle without inline scripts", async () => {
+    const [layout, themeToggle] = await Promise.all([
+      source("src/app/[locale]/layout.tsx"),
+      source("src/ui/_global/ThemeToggle.tsx"),
+    ]);
+
+    expect(layout).toContain('className="light"');
+    expect(layout).not.toContain("next/script");
+    expect(layout).not.toContain("theme-initializer");
+    expect(layout).not.toContain("dangerouslySetInnerHTML");
+    expect(layout).not.toContain("suppressHydrationWarning");
+
+    expect(themeToggle).toContain('localStorage.getItem("theme")');
+    expect(themeToggle).toContain('localStorage.setItem("theme", theme)');
+    expect(themeToggle).toContain("prefers-color-scheme: dark");
+    expect(themeToggle).toContain('classList.toggle("dark", isDark)');
+    expect(themeToggle).toContain('classList.toggle("light", !isDark)');
+  });
 });