From b22e80ac476be9e9b386614dacc5544710606236 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E9=9B=B7=E7=94=B5=E8=8A=BD=E8=A1=A3?= Date: Wed, 30 Sep 2026 20:02:32 -0400 Subject: [PATCH] =?UTF-8?q?T45a=20Site=20=C2=B7=20Stack:=20reloads=20open?= =?UTF-8?q?=20in=20the=20current=20mode,=20the=20first=20paint=20keeps=20t?= =?UTF-8?q?he=20system's,=20plain=20route=20changes?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- AGENTS.md | 2 +- frontend/index.html | 15 +++++++++------ frontend/src/Live.tsx | 5 +++-- frontend/src/data.ts | 2 -- frontend/src/icons.tsx | 7 +------ frontend/src/main.tsx | 1 - frontend/src/styles.css | 1 - 7 files changed, 14 insertions(+), 19 deletions(-) diff --git a/AGENTS.md b/AGENTS.md index c95bccf..ea82fe4 100644 --- a/AGENTS.md +++ b/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 diff --git a/frontend/index.html b/frontend/index.html index 7044307..2d7187f 100644 --- a/frontend/index.html +++ b/frontend/index.html @@ -4,10 +4,10 @@ Ely · GPUI components - + - + @@ -15,11 +15,14 @@ diff --git a/frontend/src/Live.tsx b/frontend/src/Live.tsx index e9645a6..10305d0 100644 --- a/frontend/src/Live.tsx +++ b/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("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(() => { diff --git a/frontend/src/data.ts b/frontend/src/data.ts index 79e4ced..6e13909 100644 --- a/frontend/src/data.ts +++ b/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. */ diff --git a/frontend/src/icons.tsx b/frontend/src/icons.tsx index 6fa6ace..8469ed4 100644 --- a/frontend/src/icons.tsx +++ b/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 = diff --git a/frontend/src/main.tsx b/frontend/src/main.tsx index a52d731..ee8062c 100644 --- a/frontend/src/main.tsx +++ b/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" { diff --git a/frontend/src/styles.css b/frontend/src/styles.css index 0d60008..0623102 100644 --- a/frontend/src/styles.css +++ b/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; } }