From b4ad8545082286eb6ed3d9152b9e9b4915cf25ca 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 00:03:23 -0400 Subject: [PATCH] T45 Website: native captures stand in where a browser cannot run, an OG image, no web notes --- AGENTS.md | 4 +- README.md | 3 + examples/gallery/main.rs | 41 ++++---- examples/gallery/pages/account/access.rs | 3 +- examples/gallery/pages/chat/compose.rs | 3 +- examples/gallery/pages/data/people.rs | 3 +- examples/gallery/pages/files/actions.rs | 3 +- examples/gallery/pages/forms/files.rs | 3 +- examples/gallery/pages/forms/rich.rs | 3 +- examples/gallery/pages/media/edit.rs | 6 +- examples/gallery/pages/menus/more.rs | 6 +- examples/gallery/pages/navigation/palettes.rs | 10 +- examples/gallery/pages/settings/pages.rs | 3 +- examples/gallery/pages/shell/chrome.rs | 18 +--- examples/gallery/pages/shell/status.rs | 44 ++++---- examples/gallery/pages/shell/system.rs | 10 +- examples/gallery/pages/shell/windows.rs | 34 ++++--- examples/gallery/pages/terminal/mod.rs | 7 +- examples/gallery/pages/theme/importing.rs | 3 +- examples/gallery/pages/theme/platform.rs | 10 +- examples/gallery/ui.rs | 28 ++---- frontend/e2e/site.spec.ts | 20 +++- frontend/index.html | 8 ++ frontend/public/og.png | Bin 0 -> 178067 bytes .../shots/files--dragdropfiles-dark.jpg | Bin 0 -> 28415 bytes .../shots/files--dragdropfiles-light.jpg | Bin 0 -> 28559 bytes .../shots/forms--fileinput-dropzone-dark.jpg | Bin 0 -> 51163 bytes .../shots/forms--fileinput-dropzone-light.jpg | Bin 0 -> 52142 bytes .../public/shots/forms--pathinput-dark.jpg | Bin 0 -> 13806 bytes .../public/shots/forms--pathinput-light.jpg | Bin 0 -> 14170 bytes .../public/shots/media--imageupload-dark.jpg | Bin 0 -> 77747 bytes .../public/shots/media--imageupload-light.jpg | Bin 0 -> 77728 bytes .../public/shots/navigation-launcher-dark.jpg | Bin 0 -> 22202 bytes .../shots/navigation-launcher-light.jpg | Bin 0 -> 25397 bytes .../public/shots/shell--dockbadge-dark.jpg | Bin 0 -> 14786 bytes .../public/shots/shell--dockbadge-light.jpg | Bin 0 -> 14584 bytes .../shots/shell--trayicon-traymenu-dark.jpg | Bin 0 -> 18825 bytes .../shots/shell--trayicon-traymenu-light.jpg | Bin 0 -> 18540 bytes .../shots/shell--windowdragregion-dark.jpg | Bin 0 -> 23907 bytes .../shots/shell--windowdragregion-light.jpg | Bin 0 -> 24059 bytes .../shots/shell--windowresizeborder-dark.jpg | Bin 0 -> 27877 bytes .../shots/shell--windowresizeborder-light.jpg | Bin 0 -> 27648 bytes .../public/shots/shell-about-window-dark.jpg | Bin 0 -> 31472 bytes .../public/shots/shell-about-window-light.jpg | Bin 0 -> 31784 bytes .../public/shots/shell-crash-window-dark.jpg | Bin 0 -> 34541 bytes .../public/shots/shell-crash-window-light.jpg | Bin 0 -> 35023 bytes .../shots/shell-managed-window-dark.jpg | Bin 0 -> 16818 bytes .../shots/shell-managed-window-light.jpg | Bin 0 -> 16913 bytes .../public/shots/shell-mini-window-dark.jpg | Bin 0 -> 9273 bytes .../public/shots/shell-mini-window-light.jpg | Bin 0 -> 9970 bytes .../public/shots/shell-pip-window-dark.jpg | Bin 0 -> 54263 bytes .../public/shots/shell-pip-window-light.jpg | Bin 0 -> 54109 bytes .../public/shots/shell-splash-window-dark.jpg | Bin 0 -> 12476 bytes .../shots/shell-splash-window-light.jpg | Bin 0 -> 13354 bytes .../public/shots/shell-update-window-dark.jpg | Bin 0 -> 53063 bytes .../shots/shell-update-window-light.jpg | Bin 0 -> 52583 bytes ...ector-terminalsearch-terminallink-dark.jpg | Bin 0 -> 73380 bytes ...ctor-terminalsearch-terminallink-light.jpg | Bin 0 -> 74098 bytes ...theme--themeimporter-syntaxthemes-dark.jpg | Bin 0 -> 88133 bytes ...heme--themeimporter-syntaxthemes-light.jpg | Bin 0 -> 88966 bytes .../shots/theme-frosted-window-dark.jpg | Bin 0 -> 26218 bytes .../shots/theme-frosted-window-light.jpg | Bin 0 -> 25388 bytes frontend/scripts/og.mjs | 17 ++++ frontend/src/components.ts | 8 +- frontend/src/native.ts | 33 ++++++ frontend/src/shots.json | 41 ++++++++ frontend/src/style.css | 4 + scripts/shots.py | 94 ++++++++++++++++++ 68 files changed, 315 insertions(+), 155 deletions(-) create mode 100644 frontend/public/og.png create mode 100644 frontend/public/shots/files--dragdropfiles-dark.jpg create mode 100644 frontend/public/shots/files--dragdropfiles-light.jpg create mode 100644 frontend/public/shots/forms--fileinput-dropzone-dark.jpg create mode 100644 frontend/public/shots/forms--fileinput-dropzone-light.jpg create mode 100644 frontend/public/shots/forms--pathinput-dark.jpg create mode 100644 frontend/public/shots/forms--pathinput-light.jpg create mode 100644 frontend/public/shots/media--imageupload-dark.jpg create mode 100644 frontend/public/shots/media--imageupload-light.jpg create mode 100644 frontend/public/shots/navigation-launcher-dark.jpg create mode 100644 frontend/public/shots/navigation-launcher-light.jpg create mode 100644 frontend/public/shots/shell--dockbadge-dark.jpg create mode 100644 frontend/public/shots/shell--dockbadge-light.jpg create mode 100644 frontend/public/shots/shell--trayicon-traymenu-dark.jpg create mode 100644 frontend/public/shots/shell--trayicon-traymenu-light.jpg create mode 100644 frontend/public/shots/shell--windowdragregion-dark.jpg create mode 100644 frontend/public/shots/shell--windowdragregion-light.jpg create mode 100644 frontend/public/shots/shell--windowresizeborder-dark.jpg create mode 100644 frontend/public/shots/shell--windowresizeborder-light.jpg create mode 100644 frontend/public/shots/shell-about-window-dark.jpg create mode 100644 frontend/public/shots/shell-about-window-light.jpg create mode 100644 frontend/public/shots/shell-crash-window-dark.jpg create mode 100644 frontend/public/shots/shell-crash-window-light.jpg create mode 100644 frontend/public/shots/shell-managed-window-dark.jpg create mode 100644 frontend/public/shots/shell-managed-window-light.jpg create mode 100644 frontend/public/shots/shell-mini-window-dark.jpg create mode 100644 frontend/public/shots/shell-mini-window-light.jpg create mode 100644 frontend/public/shots/shell-pip-window-dark.jpg create mode 100644 frontend/public/shots/shell-pip-window-light.jpg create mode 100644 frontend/public/shots/shell-splash-window-dark.jpg create mode 100644 frontend/public/shots/shell-splash-window-light.jpg create mode 100644 frontend/public/shots/shell-update-window-dark.jpg create mode 100644 frontend/public/shots/shell-update-window-light.jpg create mode 100644 frontend/public/shots/terminal--terminal-terminaltabs-terminalsplit-terminaltoolbar-shellselector-terminalsearch-terminallink-dark.jpg create mode 100644 frontend/public/shots/terminal--terminal-terminaltabs-terminalsplit-terminaltoolbar-shellselector-terminalsearch-terminallink-light.jpg create mode 100644 frontend/public/shots/theme--themeimporter-syntaxthemes-dark.jpg create mode 100644 frontend/public/shots/theme--themeimporter-syntaxthemes-light.jpg create mode 100644 frontend/public/shots/theme-frosted-window-dark.jpg create mode 100644 frontend/public/shots/theme-frosted-window-light.jpg create mode 100644 frontend/scripts/og.mjs create mode 100644 frontend/src/native.ts create mode 100644 frontend/src/shots.json create mode 100644 scripts/shots.py diff --git a/AGENTS.md b/AGENTS.md index c91d3eb..203dd55 100644 --- a/AGENTS.md +++ b/AGENTS.md @@ -26,7 +26,7 @@ Ely GPUI Component. A component library for GPUI, in light and dark. - `cargo run --example gallery -- --narrow 280 --capture ` lays each page, header and body, at that width in a padded card and shoots it without its script, whose aims are measured at full width. Demos that set their own width run past the card. - `RUSTC_BOOTSTRAP=1 cargo check --lib --target wasm32-unknown-unknown` checks the web build; gpui_web's `wasm_thread` needs the bootstrap, as Zed's web examples do. - `ELY_GALLERY_ASSETS=
scripts/web.sh ` builds the gallery for the browser, profile `web`, and fails past Cloudflare's 25 MiB. It opens at `?page=&story=&theme=light|dark`; the host page calls `gallery.setTheme(mode)` or posts `{ ely: "theme", theme }`, before the wasm runs or after, and the page posts `{ ely: "ready" }` to its parent once it runs. -- In `frontend/`: `ELY_GALLERY_ASSETS=<site>/gallery/assets/ pnpm gallery` builds the gallery into `public/gallery`, `pnpm dev` serves the site, `pnpm build` checks types and writes `dist`, `pnpm deploy` runs `wrangler deploy`. The site reads `examples/gallery/stories.json` for its chapters, stories and search. +- In `frontend/`: `ELY_GALLERY_ASSETS=<site>/gallery/assets/ pnpm gallery` builds the gallery into `public/gallery`, `pnpm dev` serves the site, `pnpm build` checks types and writes `dist`, `pnpm deploy` runs `wrangler deploy`. `node scripts/og.mjs`, with `pnpm preview` up, renders `public/og.png` from the hero. The site reads `examples/gallery/stories.json` for its chapters, stories and search. - `python3 scripts/stories.py` writes `examples/gallery/stories.json`, every page's sections in drawing order with their components, for the site: the names in a title, and in its `SHOWN` table what a story draws beyond them. It fails on a section opened inside another and on a ticked entry with a home of its own that no story names. `scripts/check.sh` refuses a stale one. - `cargo test --lib --features test-support`, `cargo clippy --all-targets --features test-support -- -D warnings`, `cargo fmt --check`. `scripts/check.sh` runs them with the house rules and lints the gallery for wasm32. - `rm -rf target/debug/incremental` and `cargo clean -p ely-gpui-component` after each task item keep the disk lean. Cargo keeps every old build of the crate and its tests under a new hash; by T25 they had filled the disk. @@ -180,7 +180,7 @@ Ely GPUI Component. A component library for GPUI, in light and dark. - gpui clears `debug_bounds` each frame: a test sees an element leave as well as appear. - Time reads `web_time::Instant`: std's compiles for wasm32 and panics in the browser. `scripts/check.sh` refuses std's in `src` and the gallery. - What cannot build for wasm32 is absent there through `cfg(not(target_family = "wasm"))`, never faked: the live terminal, `Terminal` and `Launch` with their grid, keys and search, and the gallery's capture harness. -- A gallery demo a browser cannot run says why on the web through `ui::web_note`, in the blocked style: a second window (`own_window`), files from the dialog or a drop (`NO_FILES`), the menu bar, window moves. +- What a browser cannot run draws natively alone: `ui::native_only` leaves a window's opener out on the web, and the web's menu bar keeps View alone. The site shows native captures instead, light and dark: a story whose demo needs the desktop (files, the terminal's shell, the tray, the Dock, window moves) as its capture, and a live story that opens windows with those windows below. `python3 scripts/shots.py` takes them with the native gallery, window in front, into `frontend/public/shots` and `frontend/src/shots.json`. - A story is a gallery section: its title is a literal, one per page. Under `ui::Story` the one asked for draws without its title; the rest drop their demos (`ui::Section`), so nothing of theirs lays out, loads or moves. Their builders still run, so a demo that starts work on its own, a clock, a load or a shell, starts it through `ui::live`, which a story grants its own section alone and fails on a title no section has. A story the page lacks fails in the page. - Embedded in a page, the web gallery keeps gpui_web's hidden text field from taking focus, and hands focus back to the host, until a press or a key reaches it (`examples/gallery/index.html`); gpui_web focuses that field whenever its window is active. The host shows its own state until `{ ely: "ready" }`, sends the mode on ready and on every turn, and puts a skip link before the frame, since Tab inside gpui cycles within it. - The gallery's pictures go through `asset!` and `ui::picture` or `ui::resource`: a file natively, on the web an address under `ELY_GALLERY_ASSETS`, since gpui reads no files there. diff --git a/README.md b/README.md index 52aff55..49ee55e 100644 --- a/README.md +++ b/README.md @@ -3,6 +3,8 @@ A component library for [GPUI](https://www.gpui.rs), the Rust UI framework behind Zed. Every component ships in light and dark. The palette is warm and quiet. Color carries meaning, not decoration. +Every component runs live at https://ely-site.zhangyanghaha0407.workers.dev, compiled to WebAssembly. + Status: early. `TASKS.md` tracks every component, chapter by chapter. ## Use @@ -46,6 +48,7 @@ cd frontend pnpm install ELY_GALLERY_ASSETS=https://<site>/gallery/assets/ pnpm gallery # the wasm gallery, into public/gallery pnpm dev # or: pnpm build && pnpm preview +node scripts/og.mjs # with pnpm preview up: public/og.png from the hero pnpm deploy # Cloudflare, through wrangler ``` diff --git a/examples/gallery/main.rs b/examples/gallery/main.rs index 06e119c..a50dae6 100644 --- a/examples/gallery/main.rs +++ b/examples/gallery/main.rs @@ -53,25 +53,28 @@ actions!(gallery, [Quit, About, LightMode, DarkMode, NewWindow]); /// The gallery's menu bar, drawn natively and by MenuBar. pub fn app_menus() -> Vec<Menu> { - vec![ - Menu { - name: "Ely".into(), - items: vec![ - MenuItem::action("About Ely", About), - MenuItem::separator(), - MenuItem::action("Quit Ely", Quit), - ], - disabled: false, - }, - Menu { - name: "View".into(), - items: vec![ - MenuItem::action("Light", LightMode), - MenuItem::action("Dark", DarkMode), - ], - disabled: false, - }, - ] + let view = Menu { + name: "View".into(), + items: vec![ + MenuItem::action("Light", LightMode), + MenuItem::action("Dark", DarkMode), + ], + disabled: false, + }; + // A page opens no second window and cannot quit. + if cfg!(target_family = "wasm") { + return vec![view]; + } + let ely = Menu { + name: "Ely".into(), + items: vec![ + MenuItem::action("About Ely", About), + MenuItem::separator(), + MenuItem::action("Quit Ely", Quit), + ], + disabled: false, + }; + vec![ely, view] } /// Menu bar and Dock menu, set before the window opens. diff --git a/examples/gallery/pages/account/access.rs b/examples/gallery/pages/account/access.rs index 99e0be3..adaf485 100644 --- a/examples/gallery/pages/account/access.rs +++ b/examples/gallery/pages/account/access.rs @@ -12,7 +12,7 @@ use gpui::{App, IntoElement, ParentElement, SharedString, Styled, Window, div, p use crate::{ probe::probe, - ui::{NO_FILES, change, keep, section, web_note}, + ui::{change, keep, section}, }; /// The switchers' demo: the account and workspace in use. @@ -115,7 +115,6 @@ pub fn profile(window: &mut Window, cx: &mut App) -> impl IntoElement + use<> { "Someone at a glance, and their profile to edit: Save waits for a change, a name and an email that reads; Discard puts the saved profile back.", cx, ) - .children(web_note(NO_FILES, cx)) .child( div() .flex() diff --git a/examples/gallery/pages/chat/compose.rs b/examples/gallery/pages/chat/compose.rs index 80383e2..f2223b4 100644 --- a/examples/gallery/pages/chat/compose.rs +++ b/examples/gallery/pages/chat/compose.rs @@ -15,7 +15,7 @@ use web_time::Instant; use crate::{ probe::probe, - ui::{NO_FILES, keep, noise, section, set, web_note}, + ui::{keep, noise, section, set}, }; const SYSTEM: &str = "You answer about color in plain words. Cite sources."; @@ -160,7 +160,6 @@ pub fn composer( "Where a message is written: attachments and context above the field, tools below, send at the end; Enter sends and Shift-Enter breaks the line. A slash at the start offers commands, an at sign offers context, and files dropped on it attach.", cx, ) - .children(web_note(NO_FILES, cx)) .child(probe( "chat-composer", div() diff --git a/examples/gallery/pages/data/people.rs b/examples/gallery/pages/data/people.rs index 8511f71..e4b1d0b 100644 --- a/examples/gallery/pages/data/people.rs +++ b/examples/gallery/pages/data/people.rs @@ -15,7 +15,7 @@ use gpui::{App, IntoElement, ParentElement, SharedString, Styled, Window, div}; use crate::{ probe::probe, - ui::{NO_FILES, keep, picture, row, section, set, specimen, specimens, web_note}, + ui::{keep, picture, row, section, set, specimen, specimens}, }; const DUNES: &str = asset!("dunes-square.jpg"); @@ -119,7 +119,6 @@ pub fn avatars(window: &mut Window, cx: &mut App) -> impl IntoElement + use<> { "A picture, or initials on a tone the name keeps, or an icon. Presence sits on the corner. Hover the last one, then press it to choose a picture, or drop one on it.", cx, ) - .children(web_note(NO_FILES, cx)) .child(specimens().children(sizes.map(|(size, name)| { specimen(name, Avatar::new(SharedString::from(format!("avatar-{name}")), "Kofi Mensah").size(size), cx) }))) diff --git a/examples/gallery/pages/files/actions.rs b/examples/gallery/pages/files/actions.rs index d3ebd66..5271fe1 100644 --- a/examples/gallery/pages/files/actions.rs +++ b/examples/gallery/pages/files/actions.rs @@ -10,7 +10,7 @@ use jiff::Timestamp; use crate::{ probe::probe, - ui::{NO_FILES, change, keep, section, web_note}, + ui::{change, keep, section}, }; pub fn context_menu(cx: &mut App) -> impl IntoElement + use<> { @@ -84,7 +84,6 @@ pub fn drop_files(window: &mut Window, cx: &mut App) -> impl IntoElement + use<> "Files dropped in, as forms::DropZone takes them; each lands in the list below.", cx, ) - .children(web_note(NO_FILES, cx)) .child(probe( "files-drop", div() diff --git a/examples/gallery/pages/forms/files.rs b/examples/gallery/pages/forms/files.rs index e88dc4b..ed39b96 100644 --- a/examples/gallery/pages/forms/files.rs +++ b/examples/gallery/pages/forms/files.rs @@ -5,7 +5,7 @@ use gpui::{App, IntoElement, ParentElement, Styled, Window, div, px}; use crate::{ probe::probe, - ui::{NO_FILES, keep, section, set, specimen, specimens, web_note}, + ui::{keep, section, set, specimen, specimens}, }; fn names(paths: &[PathBuf]) -> String { @@ -44,7 +44,6 @@ pub fn files(window: &mut Window, cx: &mut App) -> impl IntoElement + use<> { "Click a field or Browse for the system's dialog, or drop files from Finder. A folder, or two files on a one-file target, turns it red.", cx, ) - .children(web_note(NO_FILES, cx)) .child( specimens() .child(specimen( diff --git a/examples/gallery/pages/forms/rich.rs b/examples/gallery/pages/forms/rich.rs index 07839bc..478b8d7 100644 --- a/examples/gallery/pages/forms/rich.rs +++ b/examples/gallery/pages/forms/rich.rs @@ -10,7 +10,7 @@ use gpui::{App, IntoElement, Keystroke, ParentElement, SharedString, Styled, Win use super::text::field; use crate::{ probe::probe, - ui::{NO_FILES, code, section, web_note}, + ui::{code, section}, }; pub fn mention(window: &mut Window, cx: &mut App) -> impl IntoElement + use<> { @@ -99,7 +99,6 @@ pub fn path(window: &mut Window, cx: &mut App) -> impl IntoElement + use<> { "Type a path, or Browse with the system's dialog.", cx, ) - .children(web_note(NO_FILES, cx)) .child(probe( "path", div() diff --git a/examples/gallery/pages/media/edit.rs b/examples/gallery/pages/media/edit.rs index d2b06de..655a635 100644 --- a/examples/gallery/pages/media/edit.rs +++ b/examples/gallery/pages/media/edit.rs @@ -9,7 +9,7 @@ use gpui::{App, IntoElement, ParentElement, SharedString, Styled, Window, div, p use crate::{ probe::probe, - ui::{keep, picture, section, set, web_note}, + ui::{keep, picture, section, set}, }; const ATRIUM: &str = asset!("atrium.jpg"); @@ -106,10 +106,6 @@ pub fn upload(window: &mut Window, cx: &mut App) -> impl IntoElement + use<> { "A picture to send: drop one or browse for it, then crop it. Replace picks another; Remove empties it.", cx, ) - .children(web_note( - "A browser hands gpui no files: on the web the file dialog fails, drops never arrive, and the picture this starts with, a file on disk, cannot be read.", - cx, - )) .child(probe( "media-upload", div().w(px(420.)).child( diff --git a/examples/gallery/pages/menus/more.rs b/examples/gallery/pages/menus/more.rs index 1b7621d..7e85f0f 100644 --- a/examples/gallery/pages/menus/more.rs +++ b/examples/gallery/pages/menus/more.rs @@ -9,7 +9,7 @@ use gpui::{App, IntoElement, ParentElement, Styled, Window, div, px}; use super::rows::{ran, run}; use crate::{ probe::probe, - ui::{section, specimen, web_note}, + ui::{section, specimen}, }; pub fn menu_bar(cx: &mut App) -> impl IntoElement + use<> { @@ -26,10 +26,6 @@ pub fn menu_bar(cx: &mut App) -> impl IntoElement + use<> { "The app's own menus, the ones cx.set_menus gave the system, drawn in the window. Picking a row dispatches its action.", cx, ) - .children(web_note( - "A browser page has no menu bar, and gpui on the web keeps no cx.set_menus: this bar draws the gallery's own list of the same menus. About Ely would open a second window and Quit would end the app, neither of which a page can, so both only log.", - cx, - )) .child(specimen( "hover moves between menus while one is open", probe("menubar", MenuBar::new("app-bar", menus)), diff --git a/examples/gallery/pages/navigation/palettes.rs b/examples/gallery/pages/navigation/palettes.rs index 53286f2..038a4a4 100644 --- a/examples/gallery/pages/navigation/palettes.rs +++ b/examples/gallery/pages/navigation/palettes.rs @@ -8,7 +8,7 @@ use gpui::{App, Entity, IntoElement, ParentElement, SharedString, Window}; use crate::{ probe::{Opened, probe}, - ui::{keep, own_window, row, section, set, specimen}, + ui::{keep, native_only, row, section, set, specimen}, }; /// Moves `value` to the front of a recent list, keeping `size` entries. @@ -396,9 +396,9 @@ pub fn search_palette(window: &mut Window, cx: &mut App) -> impl IntoElement + u ), cx, )) - .child(specimen( + .child(native_only(specimen( "a window above all others", - own_window(probe( + probe( "launcher", Button::new("launcher-button", "Open the launcher") .variant(ButtonVariant::Ghost) @@ -415,9 +415,9 @@ pub fn search_palette(window: &mut Window, cx: &mut App) -> impl IntoElement + u Err(error) => log::error!("gallery: launcher: {error:#}"), } }), - ), cx), + ), cx, - )), + ))), ) .children(palette) } diff --git a/examples/gallery/pages/settings/pages.rs b/examples/gallery/pages/settings/pages.rs index 6a06777..0caacef 100644 --- a/examples/gallery/pages/settings/pages.rs +++ b/examples/gallery/pages/settings/pages.rs @@ -11,7 +11,7 @@ use ely_gpui_component::{ use gpui::{AnyElement, App, Entity, IntoElement, ParentElement, Styled, div, px}; use super::window::{Fields, Prefs, SIZE}; -use crate::ui::{NO_FILES, change, web_note}; +use crate::ui::change; /// The open section's page. pub(super) fn page(prefs: &Entity<Prefs>, fields: &Fields, section: &str, cx: &App) -> AnyElement { @@ -198,7 +198,6 @@ fn storage(prefs: &Entity<Prefs>, cx: &App) -> AnyElement { }), ), ) - .children(web_note(NO_FILES, cx)) .child( SettingsSection::new("Defaults") .description("A larger font size shows here.") diff --git a/examples/gallery/pages/shell/chrome.rs b/examples/gallery/pages/shell/chrome.rs index 414fd54..b9749fb 100644 --- a/examples/gallery/pages/shell/chrome.rs +++ b/examples/gallery/pages/shell/chrome.rs @@ -7,7 +7,7 @@ use ely_gpui_component::{ }; use gpui::{App, Div, IntoElement, ParentElement, Styled, Window, div, px}; -use crate::ui::{code, row, section, specimen, specimens, web_note}; +use crate::ui::{code, row, section, specimen, specimens}; /// A window drawn inside the page. pub fn window_frame(width: f32, height: f32, cx: &App) -> Div { @@ -116,10 +116,6 @@ pub fn window_controls(cx: &App) -> impl IntoElement + use<> { "Minimize and zoom act on this window. Close here only logs.", cx, )) - .children(web_note( - "A browser owns the page's window: gpui on the web only logs minimize and zoom.", - cx, - )) } pub fn drag_area(window: &mut Window, cx: &mut App) -> impl IntoElement + use<> { @@ -146,10 +142,6 @@ pub fn drag_area(window: &mut Window, cx: &mut App) -> impl IntoElement + use<> .child("Double-click to zoom this window"), ) .child(code("drag_region(id, window, cx)", cx)) - .children(web_note( - "A browser owns the page's window: gpui on the web neither moves nor zooms it.", - cx, - )) } pub fn resize_border(cx: &App) -> impl IntoElement + use<> { @@ -162,10 +154,6 @@ pub fn resize_border(cx: &App) -> impl IntoElement + use<> { "Linux draws its own edges. This macOS window keeps the system's, so the border lays out only.", )) .child(code("ResizeBorder::new().child(app)", cx)) - .children(web_note( - "A browser sizes the page's canvas itself: gpui on the web resizes no window from its edges.", - cx, - )) } pub fn menus(cx: &App) -> impl IntoElement + use<> { @@ -189,8 +177,4 @@ pub fn menus(cx: &App) -> impl IntoElement + use<> { .child(Caption::new( "MenuBar draws the same menus inside the window. It lands with Menus, chapter 8.", )) - .children(web_note( - "A browser page has no menu bar and no Dock: gpui on the web keeps neither cx.set_menus nor cx.set_dock_menu.", - cx, - )) } diff --git a/examples/gallery/pages/shell/status.rs b/examples/gallery/pages/shell/status.rs index d1a364a..045a19e 100644 --- a/examples/gallery/pages/shell/status.rs +++ b/examples/gallery/pages/shell/status.rs @@ -11,7 +11,7 @@ use gpui::{App, IntoElement, ParentElement, Styled, Window, div}; use super::chrome::window_frame; use crate::{ probe::{Opened, probe}, - ui::{own_window, row, section, specimen}, + ui::{native_only, row, section, specimen}, }; fn log_action(name: &'static str) -> impl Fn(&mut Window, &mut App) + 'static { @@ -59,18 +59,15 @@ pub fn update_window(cx: &App) -> impl IntoElement + use<> { .child(update_dialog().on_later(log_action("later"))), cx, )) - .child(own_window( - probe( - "update-open", - Button::new("update-open", "Open update window") - .variant(ButtonVariant::Outline) - .on_click(|_, _, cx| match update_dialog().open(cx) { - Ok(handle) => Opened::insert("update", handle.into(), cx), - Err(error) => log::error!("gallery: update window failed: {error:#}"), - }), - ), - cx, - )) + .child(native_only(probe( + "update-open", + Button::new("update-open", "Open update window") + .variant(ButtonVariant::Outline) + .on_click(|_, _, cx| match update_dialog().open(cx) { + Ok(handle) => Opened::insert("update", handle.into(), cx), + Err(error) => log::error!("gallery: update window failed: {error:#}"), + }), + ))) } const REPORT: &str = "Exception Type: EXC_BAD_ACCESS (SIGSEGV) @@ -104,18 +101,15 @@ pub fn crash_reporter(cx: &App) -> impl IntoElement + use<> { .child(reporter(true)), cx, )) - .child(own_window( - probe( - "crash-open", - Button::new("crash-open", "Open crash window") - .variant(ButtonVariant::Outline) - .on_click(move |_, _, cx| match reporter(false).open(cx) { - Ok(handle) => Opened::insert("crash", handle.into(), cx), - Err(error) => log::error!("gallery: crash window failed: {error:#}"), - }), - ), - cx, - )) + .child(native_only(probe( + "crash-open", + Button::new("crash-open", "Open crash window") + .variant(ButtonVariant::Outline) + .on_click(move |_, _, cx| match reporter(false).open(cx) { + Ok(handle) => Opened::insert("crash", handle.into(), cx), + Err(error) => log::error!("gallery: crash window failed: {error:#}"), + }), + ))) } pub fn offline(window: &mut Window, cx: &mut App) -> impl IntoElement + use<> { diff --git a/examples/gallery/pages/shell/system.rs b/examples/gallery/pages/shell/system.rs index 60cbc35..e3f5e6d 100644 --- a/examples/gallery/pages/shell/system.rs +++ b/examples/gallery/pages/shell/system.rs @@ -7,7 +7,7 @@ use gpui::{App, IntoElement, ParentElement, SharedString, Window}; use crate::{ probe::probe, - ui::{blocked, row, section, web_note}, + ui::{blocked, row, section}, }; const ITEMS: [&str; 3] = ["Open gallery", "Toggle theme", "Quit"]; @@ -23,10 +23,6 @@ pub fn tray(window: &mut Window, cx: &mut App) -> impl IntoElement + use<> { "An SF Symbol in the menu bar with a menu. macOS only.", cx, ) - .children(web_note( - "A browser page has no menu bar to hold an icon, so showing one fails and logs why.", - cx, - )) .child( row() .child(probe( @@ -117,10 +113,6 @@ pub fn dock(cx: &mut App) -> impl IntoElement + use<> { "A count on the app's Dock icon. macOS only.", cx, ) - .children(web_note( - "A browser page has no Dock icon to badge, so setting one fails and logs why.", - cx, - )) .child( row() .child(probe( diff --git a/examples/gallery/pages/shell/windows.rs b/examples/gallery/pages/shell/windows.rs index cc198cb..dff95e8 100644 --- a/examples/gallery/pages/shell/windows.rs +++ b/examples/gallery/pages/shell/windows.rs @@ -15,7 +15,7 @@ use gpui::{ use super::chrome::window_frame; use crate::{ probe::{Opened, probe}, - ui::{code, own_window, picture, row, section, specimen}, + ui::{code, native_only, picture, row, section, specimen}, }; const DUNES: &str = asset!("dunes.jpg"); @@ -80,13 +80,14 @@ pub fn splash_screen(cx: &App) -> impl IntoElement + use<> { .child(splash().progress(Some(0.62))), cx, )) - .child(own_window( - trigger("splash-open", "Show splash window", |cx| { + .child(native_only(trigger( + "splash-open", + "Show splash window", + |cx| { let result = splash().open(cx); opened("splash", result, cx) - }), - cx, - )) + }, + ))) } pub fn open_about(cx: &mut App) { @@ -108,10 +109,11 @@ pub fn about_dialog(cx: &App) -> impl IntoElement + use<> { .child(about()), cx, )) - .child(own_window( - trigger("about-open", "Open About window", open_about), - cx, - )) + .child(native_only(trigger( + "about-open", + "Open About window", + open_about, + ))) } struct Managed { @@ -192,10 +194,11 @@ pub fn window_manager(cx: &mut App) -> impl IntoElement + use<> { "Each new window cascades from the last; the manager knows them by name.", cx, ) - .child(own_window( - trigger("managed-open", "New window", open_managed), - cx, - )) + .child(native_only(trigger( + "managed-open", + "New window", + open_managed, + ))) .child( row().children(open.into_iter().enumerate().map(|(ix, (handle, title))| { Button::new(("managed-focus", ix), title) @@ -335,7 +338,7 @@ pub fn mini_windows(cx: &App) -> impl IntoElement + use<> { "Small windows above the rest. Hover for the bar; expand returns to the app.", cx, ) - .child(own_window( + .child(native_only( row() .child(trigger("mini-open", "Mini player", |cx| { let view = cx.new(|_| Player { playing: true }); @@ -359,7 +362,6 @@ pub fn mini_windows(cx: &App) -> impl IntoElement + use<> { ); opened("pip", result, cx) })), - cx, )) .child(code( "AlwaysOnTop is gpui's WindowOptions { kind: WindowKind::PopUp, .. }", diff --git a/examples/gallery/pages/terminal/mod.rs b/examples/gallery/pages/terminal/mod.rs index 2ef19a5..baa35af 100644 --- a/examples/gallery/pages/terminal/mod.rs +++ b/examples/gallery/pages/terminal/mod.rs @@ -37,7 +37,7 @@ const SCRIPT: &[Step] = &[ Step::Rest, ]; -/// A live shell natively; on the web, why not. +/// A live shell natively; on the web, its header alone. fn live(window: &mut Window, cx: &mut App) -> impl IntoElement + use<> { let section = section( "Terminal / TerminalTabs / TerminalSplit / TerminalToolbar / ShellSelector / TerminalSearch / TerminalLink", @@ -56,10 +56,7 @@ fn live(window: &mut Window, cx: &mut App) -> impl IntoElement + use<> { #[cfg(target_family = "wasm")] { let _ = window; - section.child(crate::ui::blocked( - "A browser starts no processes and has no pseudo-terminal, so no shell runs here, and alacritty's grid, which draws the build's output, does not build for the web. The page's other stories, command blocks, colored output, logs and processes, draw without one.", - cx, - )) + section } } diff --git a/examples/gallery/pages/theme/importing.rs b/examples/gallery/pages/theme/importing.rs index 571ff1f..33da772 100644 --- a/examples/gallery/pages/theme/importing.rs +++ b/examples/gallery/pages/theme/importing.rs @@ -4,7 +4,7 @@ use ely_gpui_component::{ }; use gpui::{App, IntoElement, ParentElement, SharedString, Styled, Window, div, px}; -use crate::ui::{NO_FILES, change, keep, section, specimen, specimens, web_note}; +use crate::ui::{change, keep, section, specimen, specimens}; /// Which code palette the demo last chose. struct Chosen(SharedString); @@ -17,7 +17,6 @@ pub fn importing(window: &mut Window, cx: &mut App) -> impl IntoElement + use<> "A VS Code color theme dropped here reads into Ely's palette, the colors it leaves out kept from Ely's; Apply sets it on the whole gallery. Code palettes choose the colors of code for the mode shown.", cx, ) - .children(web_note(NO_FILES, cx)) .child( specimens() .child(specimen( diff --git a/examples/gallery/pages/theme/platform.rs b/examples/gallery/pages/theme/platform.rs index 0520203..f24d9f8 100644 --- a/examples/gallery/pages/theme/platform.rs +++ b/examples/gallery/pages/theme/platform.rs @@ -36,19 +36,15 @@ pub fn platform(window: &mut Window, cx: &mut App) -> impl IntoElement + use<> { specimens() .child(specimen("Platform", platforms(cx), cx)) .child(specimen("IconTheme", icons(window, cx), cx)) - .child(specimen( + .child(native_only(specimen( "Vibrancy", - native_only( - probe( + probe( "frosted-open", Button::new("frosted-open", "Open a frosted window") .on_click(|_, _, cx| frosted(cx)), ), - "A browser page is a single window, and gpui leaves what lies behind it to the browser, so no frosted window opens and nothing blurs through.", - cx, - ), cx, - )), + ))), ) } diff --git a/examples/gallery/ui.rs b/examples/gallery/ui.rs index ee7d8d6..6390ce7 100644 --- a/examples/gallery/ui.rs +++ b/examples/gallery/ui.rs @@ -208,31 +208,15 @@ pub const UNREAD: &str = if cfg!(target_family = "wasm") { "gpui builds an AccessKit tree from elements with an id and a role, and no screen reader here reads it" }; -/// Why a demo takes no files on the web. -pub const NO_FILES: &str = "A browser hands gpui no files: on the web the file dialog fails and dropped files never arrive, so nothing is taken here."; - -/// On the web, what a browser cannot do. -pub fn web_note(text: &'static str, cx: &App) -> Option<AnyElement> { - cfg!(target_family = "wasm").then(|| blocked(text, cx).into_any_element()) -} - -/// A demo browsers cannot run; there, its note instead. -pub fn native_only(element: impl IntoElement, note: &'static str, cx: &App) -> AnyElement { - match web_note(note, cx) { - Some(note) => note, - None => element.into_any_element(), +/// A demo browsers cannot run draws natively alone; the site shows its capture. +pub fn native_only(element: impl IntoElement) -> AnyElement { + if cfg!(target_family = "wasm") { + div().into_any_element() + } else { + element.into_any_element() } } -/// A button opening its own window, which browsers cannot. -pub fn own_window(button: impl IntoElement, cx: &App) -> AnyElement { - native_only( - button, - "A browser page is a single window: gpui opens no second window or popup on the web, so this one cannot open here.", - cx, - ) -} - /// A demo's state, kept across frames under `key`. pub fn keep<T: 'static>( key: &'static str, diff --git a/frontend/e2e/site.spec.ts b/frontend/e2e/site.spec.ts index 22848c9..dc1b04f 100644 --- a/frontend/e2e/site.spec.ts +++ b/frontend/e2e/site.spec.ts @@ -13,7 +13,8 @@ test("the home page shows the pitch, the scene and the credits", async ({ page } const errors = watch(page); await page.goto("/"); await expect(page.getByRole("heading", { level: 1 })).toContainText("component library for GPUI"); - await expect(page.locator(".hero canvas")).toBeVisible(); + await expect(page.locator("canvas.iso")).toBeAttached(); + await expect(page.locator(".hero-iso")).toBeVisible(); await expect(page.locator("#foot")).toContainText("Solar Icons by 480 Design"); expect(errors).toEqual([]); }); @@ -83,3 +84,20 @@ test("an unknown chapter says so", async ({ page }) => { await expect(page.getByRole("heading", { level: 1 })).toHaveText("Not found"); expect(errors.join()).toContain("No chapter"); }); + +test("a story the web cannot run shows its native capture, in the site's mode", async ({ page }) => { + await page.emulateMedia({ colorScheme: "light" }); + await page.goto("/components/forms/pathinput/"); + const shot = page.locator("img.shot"); + await expect(shot).toHaveAttribute("srcset", /pathinput-light\.jpg/); + await expect(page.locator(".stage iframe")).toHaveCount(0); + await page.locator("[data-mode]").click(); + await expect(shot).toHaveAttribute("srcset", /pathinput-dark\.jpg/); + await expect.poll(() => shot.evaluate((img: HTMLImageElement) => img.naturalWidth)).toBeGreaterThan(0); +}); + +test("a live story that opens a window shows that window natively", async ({ page }) => { + await page.goto("/components/shell/aboutdialog/"); + await expect(page.locator(".stage iframe")).toHaveCount(1); + await expect(page.locator(".native img.shot")).toHaveAttribute("srcset", /shell-about-window/); +}); diff --git a/frontend/index.html b/frontend/index.html index 225d945..972e1cc 100644 --- a/frontend/index.html +++ b/frontend/index.html @@ -5,6 +5,14 @@ <meta name="viewport" content="width=device-width, initial-scale=1" /> <title>Ely · GPUI components + + + + + + + +