From ef9d44f7d345d1a3e3a9a48322f0f29838e9461b Mon Sep 17 00:00:00 2001 From: dvorakmortonxd Date: Mon, 5 Oct 2026 09:41:04 +0200 Subject: [PATCH] fix hydration mismatch: sync html data-scheme default to dark and suppress body attribute warnings --- README.md | 2 +- agents.md | 11 ++++++++--- package-lock.json | 4 ++-- package.json | 2 +- src/app/components/WebLayout.tsx | 2 +- src/app/layout.tsx | 4 ++-- 6 files changed, 15 insertions(+), 10 deletions(-) diff --git a/README.md b/README.md index 0af5324..2def698 100644 --- a/README.md +++ b/README.md @@ -72,7 +72,7 @@ more. - **Fonts:** the web theme uses the system sans stack; Monocraft (self-hosted in `public/`) is used by the desktop theme's SMP menu and the in-desktop terminal. - **Images:** `next/image` -- **Version:** `2.2.7` (see `package.json`) +- **Version:** `2.2.8` (see `package.json`) - **Dependencies:** `npm audit` reports **0 vulnerabilities**. `next` is kept at a patched release (`>=16.3.6`) for the `next/og` RCE, and `brace-expansion` is force-upgraded via `overrides`. `braces` (a transitive ESLint/`fast-glob` dependency) has **no upstream fix**, diff --git a/agents.md b/agents.md index 3104709..7e82d9e 100644 --- a/agents.md +++ b/agents.md @@ -34,7 +34,7 @@ When in doubt, prefer updating. A stale README **or** agents.md is treated as a ## Bump the version on EVERY prompt — also do this every time Another standing requirement: increment the **patch** version (`x.x.+1`, so -`2.2.6` → `2.2.7` → …) as part of every task, even the small ones. Keep all of +`2.2.7` → `2.2.8` → …) as part of every task, even the small ones. Keep all of these in sync: - `package.json` → `"version"` @@ -56,7 +56,7 @@ frosted-glass **web** site, and an alternate KDE/Plasma **desktop simulation** utilities in the components (Tailwind is present via PostCSS but the look is hand-written CSS). - Path alias: `@/*` → `src/*`. -- Version: `2.2.7` (see `package.json`). +- Version: `2.2.8` (see `package.json`). ### Scripts ```bash @@ -124,6 +124,11 @@ scripts/ `localStorage.scheme` and sets `data-scheme` (`light` | `dark`), defaulting to `dark` (only an explicit stored `light` overrides it). There is no device sniff anymore. + **Keep `layout.tsx`'s server-rendered `` defaults in sync** (`data-theme="web"`, + `data-scheme="dark"`) with this script's defaults, or React 19 logs a hydration + attribute mismatch ("A tree hydrated but some attributes… didn't match"). `` + and `` both carry `suppressHydrationWarning` (the theme script mutates `` + before hydration, and browser extensions mutate ``). 2. `useTheme()` (in `useTheme.ts`) reads `data-theme` via `useSyncExternalStore` and dispatches a `theme-change` event on toggle. `useColorScheme()` does the same for `data-scheme` via a `scheme-change` event. @@ -454,7 +459,7 @@ knows about icon ids, via `APP_BY_ID`. - There is **no test suite**. Verification is `tsc --noEmit`, `eslint`, and `next build`. - The default shell is the web theme: `curl -s http://localhost:3000/` should - contain `data-theme="web"` / `data-scheme="light"` and the `.web-root` markup. + contain `data-theme="web"` / `data-scheme="dark"` and the `.web-root` markup. Theme + scheme are read pre-paint from `localStorage.theme` / `.scheme`, so a quick check is to set those in devtools and reload. - `next/image` is lazy by default, so a headless full-page screenshot shows the diff --git a/package-lock.json b/package-lock.json index 575536f..6100b1e 100644 --- a/package-lock.json +++ b/package-lock.json @@ -1,12 +1,12 @@ { "name": "dvorakmortonxd", - "version": "2.2.7", + "version": "2.2.8", "lockfileVersion": 3, "requires": true, "packages": { "": { "name": "dvorakmortonxd", - "version": "2.2.7", + "version": "2.2.8", "dependencies": { "next": "^16.3.8", "react": "^19.3.0", diff --git a/package.json b/package.json index 99a2835..ea775ee 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "dvorakmortonxd", - "version": "2.2.7", + "version": "2.2.8", "private": true, "scripts": { "dev": "node scripts/dev-server.mjs", diff --git a/src/app/components/WebLayout.tsx b/src/app/components/WebLayout.tsx index 3772dfb..30b7e19 100644 --- a/src/app/components/WebLayout.tsx +++ b/src/app/components/WebLayout.tsx @@ -345,7 +345,7 @@ export default function WebLayout() { diff --git a/src/app/layout.tsx b/src/app/layout.tsx index 4f7880c..f3ff3ec 100644 --- a/src/app/layout.tsx +++ b/src/app/layout.tsx @@ -25,8 +25,8 @@ export default function RootLayout({ children: React.ReactNode; }>) { return ( - - + + {children}