T45a Site · Stack: reloads open in the current mode, the first paint keeps the system's, plain route changes

AGENTS.md

@@ -17,7 +17,7 @@ Ely GPUI Component. A component library for GPUI, in light and dark.
 - Pictures: `image` 0.25 (MIT OR Apache-2.0), the crate gpui decodes with, default features off; it turns decoded frames and rims map tiles.
 - Maps: Natural Earth's 110m countries (public domain). `assets/maps/countries.geojson`, trimmed by `scripts/countries.py` to an ISO code, a name and positions to 0.01°, backs `maps::WorldMap`; the gallery's tiles are cut from the same file, z0 to z3, by `scripts/tiles.py` with Pillow.
 - Web: on wasm32, `web-time` 1.1 (MIT OR Apache-2.0) gives the `Instant` gpui's executor returns, std's own natively; jiff takes `js`, rust-embed `debug-embed`, similar `wasm32_web_time`. The gallery's web entry takes `gpui_web`, `wasm-bindgen`, `js-sys` and `web-sys` as wasm-only dev-dependencies, and a Hebrew cut of Noto Sans Hebrew 2.003 (OFL, `examples/gallery/fonts`): gpui_web asks the browser for emoji and CJK alone. The `wasm-bindgen` CLI at Cargo.lock's version and binaryen's `wasm-opt` finish the bundle.
-- Gallery: `examples/gallery`. Website: `frontend/` (Vite 8.3, pnpm 11, TypeScript, React 19.3, TanStack Router 1.170 in code-based routes, Lenis 1.3), after `frontend-reference/`: heavy titles over thin faint text, hairlines, one accent, full-screen sections, isometric line miniatures on a canvas. Each story runs live from the gallery built for wasm32 through gpui_web, in a same-origin iframe, never as a screenshot. Geist and Geist Mono (OFL, `@fontsource-variable`), Reicon icons (MIT, based on Solar Icons, CC BY 4.0, credited in the footer), simple-icons' GitHub mark (CC0). It deploys to Cloudflare Workers static assets through `npx wrangler` (4.143).
+- Gallery: `examples/gallery`. Website: `frontend/` (Vite 8.3, pnpm 11, TypeScript, React 19.3, TanStack Router 1.170 in code-based routes, Lenis 1.3), after `frontend-reference/`: heavy titles over thin faint text, hairlines, one accent, full-screen sections, isometric line miniatures on a canvas. Each story runs live from the gallery built for wasm32 through gpui_web, in a same-origin iframe, or, where a browser cannot run it, as a native capture. Geist and Geist Mono (OFL, `@fontsource-variable`), Reicon icons (MIT, based on Solar Icons, CC BY 4.0, credited in the footer), simple-icons' GitHub mark (CC0). It deploys to Cloudflare Workers static assets through `npx wrangler` (4.143).
 - Reference site: `frontend-reference/` (Vite 8.3, React 19, TanStack Router 1.170 in code-based routes, `lottie-web` 5.13, pnpm 11). A 1:1 study copy of serro.ai: the SSR DOM and the site's own CSS ported verbatim, Framer custom components replayed from runtime DOM captured at five widths (`RuntimeVariant`), 17 Lottie instances on the original JSONs, and the mock's feed sequence, ROI count-up and hover pills reimplemented from measured timings. Real fonts and assets served locally. Not deployed. `NOTES.md` there documents the pipeline under `RECON/tools/`.
 
 ## Commands

frontend/index.html

@@ -4,10 +4,10 @@
     <meta charset="utf-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1" />
     <title>Ely · GPUI components</title>
-    <meta name="description" content="A component library for GPUI, in light and dark. Every component runs live in the browser." />
+    <meta name="description" content="A component library for GPUI, in light and dark. Its stories run live in the browser, or as native captures where a browser cannot run them." />
     <meta property="og:type" content="website" />
     <meta property="og:title" content="Ely · GPUI components" />
-    <meta property="og:description" content="A component library for GPUI. Every part runs live in the browser, compiled from Rust to WebAssembly." />
+    <meta property="og:description" content="A component library for GPUI, its stories live in the browser, compiled from Rust to WebAssembly." />
     <meta property="og:image" content="https://ely-site.zhangyanghaha0407.workers.dev/og.png" />
     <meta property="og:image:width" content="2400" />
     <meta property="og:image:height" content="1260" />
@@ -15,11 +15,14 @@
     <meta name="twitter:image" content="https://ely-site.zhangyanghaha0407.workers.dev/og.png" />
     <script>
       // The saved mode, or the system's, before first paint.
+      let saved = null;
       try {
-        const saved = localStorage.getItem("ely-theme");
-        const dark = saved ? saved === "dark" : matchMedia("(prefers-color-scheme: dark)").matches;
-        document.documentElement.classList.toggle("dark", dark);
-      } catch {}
+        saved = localStorage.getItem("ely-theme");
+      } catch (error) {
+        console.warn("theme: no saved mode", error);
+      }
+      const dark = saved ? saved === "dark" : matchMedia("(prefers-color-scheme: dark)").matches;
+      document.documentElement.classList.toggle("dark", dark);
     </script>
   </head>
   <body>

frontend/src/Live.tsx

@@ -1,4 +1,4 @@
-import { useEffect, useRef, useState } from "react";
+import { useEffect, useMemo, useRef, useState } from "react";
 import { Icon } from "./icons";
 import { mode, useMode } from "./theme";
 
@@ -14,7 +14,8 @@ export function Live({ page, story, title }: { page: string; story: string; titl
   const [state, setState] = useState<State>("starting");
   const [full, setFull] = useState(false);
   const [run, setRun] = useState(0);
-  const [start] = useState(mode);
+  // Each new frame opens in the mode the site has then.
+  const start = useMemo(() => mode(), [run]);
   const src = (t: string) => `/gallery/?page=${page}&story=${story}&theme=${t}`;
 
   useEffect(() => {

frontend/src/data.ts

@@ -16,8 +16,6 @@ export interface Chapter {
 
 export const chapters: Chapter[] = manifest.pages;
 
-export const storyCount = chapters.reduce((sum, chapter) => sum + chapter.stories.length, 0);
-
 export const componentCount = new Set(chapters.flatMap((c) => c.stories.flatMap((s) => s.components))).size;
 
 /** Every story in reading order, for paging and search. */

frontend/src/icons.tsx

@@ -1,16 +1,11 @@
-import ArrowLeft from "reicon/icons/ArrowLeft";
-import ArrowRight from "reicon/icons/ArrowRight";
 import ArrowRightUp from "reicon/icons/ArrowRightUp";
 import Maximize from "reicon/icons/Maximize";
 import Minimize from "reicon/icons/Minimize";
 import Moon from "reicon/icons/Moon";
 import Refresh from "reicon/icons/Refresh";
-import Search from "reicon/icons/Search";
-import Sound from "reicon/icons/Sound";
 import Sun from "reicon/icons/Sun";
-import VolumeCross from "reicon/icons/VolumeCross";
 
-const set = { ArrowLeft, ArrowRight, ArrowRightUp, Maximize, Minimize, Moon, Refresh, Search, Sound, Sun, VolumeCross };
+const set = { ArrowRightUp, Maximize, Minimize, Moon, Refresh, Sun };
 
 // simple-icons' GitHub mark (CC0); Reicon has none.
 const GITHUB =

frontend/src/main.tsx

@@ -29,7 +29,6 @@ const router = createRouter({
   routeTree: root.addChildren([home, index, chapter, story]),
   trailingSlash: "always",
   scrollRestoration: true,
-  defaultViewTransition: true,
 });
 
 declare module "@tanstack/react-router" {

frontend/src/styles.css

@@ -115,5 +115,4 @@ img.shot { display: block; max-width: 100%; height: auto; }
 
 @media (prefers-reduced-motion: reduce) {
   * { transition: none !important; animation: none !important; }
-  ::view-transition-group(*), ::view-transition-old(*), ::view-transition-new(*) { animation: none !important; }
 }