create-nevela 0.1.4 → 0.1.5

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "create-nevela",
-  "version": "0.1.4",
+  "version": "0.1.5",
   "description": "Create a new Nevela app: a Laravel API and a Next.js dashboard from one resource description.",
   "type": "module",
   "bin": {

package/template/laravel/src/Nevela.php

@@ -17,7 +17,7 @@ use Nevela\Laravel\Support\Naming;
 final class Nevela
 {
     /** Written by `pnpm release`; the same number as the repository's git tag. */
-    public const VERSION = '0.1.4';
+    public const VERSION = '0.1.5';
 
     /** @var array<string, Descriptor> */
     private static array $descriptors = [];

package/template/web/components/dashboard/dashboard-header.tsx

@@ -1,6 +1,6 @@
 "use client";
 
-import { useState } from "react";
+import { useState, useSyncExternalStore } from "react";
 import Link from "next/link";
 import { BellIcon, MoonIcon, SunIcon } from "lucide-react";
 import { Button } from "@/components/ui/button";
@@ -30,9 +30,31 @@ function applyTheme(theme: Theme) {
   if (theme !== "system") root.classList.add(theme);
 }
 
+const DARK_QUERY = "(prefers-color-scheme: dark)";
+
+function watchSystemTheme(onChange: () => void) {
+  const query = window.matchMedia(DARK_QUERY);
+  query.addEventListener("change", onChange);
+  return () => query.removeEventListener("change", onChange);
+}
+
+/**
+ * Whether the device prefers dark. The server can't know, so it and the first render in
+ * the browser both say no, and the real answer follows straight after: reading it during
+ * that first render would give the browser a different page from the one the server sent.
+ */
+function useSystemDark() {
+  return useSyncExternalStore(
+    watchSystemTheme,
+    () => window.matchMedia(DARK_QUERY).matches,
+    () => false,
+  );
+}
+
 export function DashboardHeader({ user, initialTheme, notices = [] }: { user: DashboardUser; initialTheme: Theme; notices?: Notice[] }) {
   const [theme, setTheme] = useState<Theme>(initialTheme);
-  const dark = theme === "dark" || (theme === "system" && typeof window !== "undefined" && window.matchMedia("(prefers-color-scheme: dark)").matches);
+  const systemDark = useSystemDark();
+  const dark = theme === "dark" || (theme === "system" && systemDark);
   const needsAttention = notices.some((notice) => notice.tone === "warning");
 
   return (

package/template/web/package.json

@@ -1,6 +1,6 @@
 {
   "name": "nevela-web",
-  "version": "0.1.4",
+  "version": "0.1.5",
   "private": true,
   "type": "module",
   "scripts": {
@@ -22,7 +22,7 @@
     "cmdk": "^1.1.1",
     "date-fns": "^4.4.0",
     "lucide-react": "^1.46.0",
-    "next": "16.0.4",
+    "next": "16.3.8",
     "radix-ui": "^1.6.7",
     "react": "19.3.0",
     "react-day-picker": "^10.0.1",