T44d Web · What a browser cannot do says why; fonts resolve; the bundle builds

Demos that open a second window, take files, move the window, read the
clipboard or set native menus show a note on the web in the blocked style.
IBM Plex Sans Regular joins the assets, unmodified, where gpui's svg
renderer loads it: gpui_web answers .SystemUIFont with it. The gallery's
web entry registers a Hebrew cut of Noto Sans Hebrew. scripts/web.sh builds
the bundle with wasm-bindgen and wasm-opt -Oz, 20.0 MB, and fails past 25 MiB.

AGENTS.md

@@ -6,7 +6,7 @@ Ely GPUI Component. A component library for GPUI, in light and dark.
 
 - Rust 1.95, edition 2024. One crate: `ely-gpui-component`.
 - gpui and gpui_platform from Zed's repo by git at 1a28cff, the code gpui-pre 0.3.7 republishes. gpui takes `stacker`, which keeps deep layouts off the stack's end; gpui_platform takes `font-kit`, without which macOS draws no text. Feature `runtime_shaders`, on by default, turns on gpui_platform's: machines without Xcode lack the Metal compiler.
-- Assets, embedded with `rust-embed`: Lucide 1.48.0 icons (ISC), Inter 4.1 (regular, medium, semibold, italic) and JetBrains Mono 2.304 (OFL).
+- Assets, embedded with `rust-embed`: Lucide 1.48.0 icons (ISC), Inter 4.1 (regular, medium, semibold, italic), JetBrains Mono 2.304 and IBM Plex Sans Regular (OFL). Plex sits unmodified, its name reserved, where gpui's svg renderer loads it: gpui_web answers `.SystemUIFont` with it, and svg text falls back to it on the web.
 - Catalog data: `emojis` (Unicode emoji), `isolang` (ISO 639, native names), `isocountry` (ISO 3166), `iso_currency` (ISO 4217, also minor units for money).
 - Codes: `qrcode` (QR) and `barcoders` (Code 128, EAN-13), both MIT OR Apache-2.0, default features off. `rqrr` 0.11 ((MIT OR Apache-2.0) AND ISC, default features off) reads QR codes from the host's frames.
 - macOS extras (tray icon, Dock badge) call AppKit through `cocoa` 0.26 and `objc` 0.2, the crates gpui already links.
@@ -16,15 +16,17 @@ Ely GPUI Component. A component library for GPUI, in light and dark.
 - Markdown: `pulldown-cmark` 0.13 (MIT, default features off) for CommonMark with tables, tasks, strikethrough, footnotes and math.
 - 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`.
+- 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, pnpm), built after the components: a home page in motion with three.js and smooth scroll, and a components page with categories on the left and the chosen component on the right, after astryx.atmeta.com and gpui-kit.com. Each component runs live from the gallery built for wasm32 through gpui_web, in an iframe, never as a screenshot. It deploys to Cloudflare through `npx wrangler`.
 
 ## Commands
 
-- `cargo run --example gallery` opens the gallery. `-- --page <slug>` starts on a page.
+- `cargo run --example gallery` opens the gallery. `-- --page <slug>` starts on a page; `--story <title or slug>` with it draws that section alone.
 - `cargo run --example gallery -- --capture <dir>` writes PNGs of every page, light and dark, top to bottom, then each page's scripted states, including windows the demos open. macOS only.
 - `cargo run --example gallery -- --narrow 280 --capture <dir>` 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=<address of out/assets/> scripts/web.sh <out>` builds the gallery for the browser, profile `web`, and fails past Cloudflare's 25 MiB. It opens at `?page=<slug>&story=<title or slug>&theme=light|dark`; the host page calls `gallery.setTheme(mode)` or posts `{ ely: "theme", theme }` later.
+- `python3 scripts/stories.py` writes `examples/gallery/stories.json`, every page's sections in drawing order with their components, for the site. `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.
 - `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.
 - `scripts/icons.sh <lucide-name>...` adds icons. Then add a line to `IconName` in `src/primitives/icon.rs`.
@@ -142,7 +144,7 @@ Ely GPUI Component. A component library for GPUI, in light and dark.
 - Badges, tags and avatars live in `data_display`; forms and shell draw theirs from there, and `data_display` imports neither. A hue worn in a row, a label's or an event's, is `data_display::color_mark`, and `Palette::hue` gives the chart color by index. A tag is never wider than its container; a long label ends in an ellipsis beside its remove mark.
 - A picture drawn in code reaches gpui as a `RenderImage`. A host that replaces one frees the old through `App::drop_image`, or every frame stays in the sprite atlas (the gallery's model).
 - `img()` keeps loading state, and moves an animated picture's frames, only with an id; the frames hold still while its window is inactive or gpui's own `reduce_motion` is on, which the theme's reduced motion does not set. Content masks are rectangles, but `img()` draws only the part of its picture inside its box and rounds that part with its own radius, so a `Cover` crop keeps its corners.
-- gpui reads a `&str` picture source with a scheme as a web address, and any other as an embedded asset. A file goes through `Path` (`documents::source` in the crate, `Path::new` in the gallery).
+- gpui reads a `&str` picture source with a scheme as a web address, and any other as an embedded asset. A file goes through `Path` (`documents::source` in the crate, `ui::picture` in the gallery).
 - Taffy sizes a flex column by the height a ratio box has at its set width, before its cap, so chat's `shaped` pictures sit in a block inside such a column (`chat::ImageMessage`, `VideoMessage`, `ImageGrid`).
 - Taffy 0.13 collapses a child's vertical margin through a block parent with no padding or border on that side, and its size cache keeps only that block's size, so a box that measures it again leaves the margin out. A component moves a box with a relative offset, or with padding where what follows moves too, not with such a margin: `layout::Drawer` pulls and snaps its panel, and a fullscreen `overlays::Dialog` slides its card, with `top`; `motion::Stagger`, `Transition`, a centered Dialog and the palette's card rise with padding, so the box a scrim centers grows with them; the gallery's inspector sample is its probe's own child. A margin that stops at its parent is safe: a flex or grid item's own, or a child's of a flex item or of a box with padding or a border on that side. A flex wrapper stops the collapse but gives its items a definite height, so percent heights inside start to resolve (the Drawer's `max_h(relative(0.85))`).
 - Tiles in a picture's shape sit in flex rows of `flex_1` cells (`generative::GenerationGrid`). A cell's padding counts in its flex base, so a row of fewer cells gives each more width; cells that match across rows keep their inset on a box inside (`messaging::VideoCallGrid`).
@@ -175,8 +177,12 @@ Ely GPUI Component. A component library for GPUI, in light and dark.
 - A component built on `lists::Tree` fills its box; the host gives it a height. A fixed-width column beside a `flex_1` one takes `flex_none`, or it shrinks.
 - Editor rows read their text through `CodeEditor::row_text`: a multi-line ghost cuts its line, and the rest follows the ghost's last line.
 - 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`.
-- 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.
+- 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, a clipboard read.
+- 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 and the rest hide, which skips their prepaint and paint; a story the page lacks fails in the page.
+- 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.
+- The first frame wears the host's mode through `Theme::set_mode_now`; `set_mode` fades from the colors on screen.
 - The system time zone comes from `typography::format::system_zone`, which fails loud; jiff's `TimeZone::system()` falls back to UTC in silence.
 - A Select with nothing to pick stays shut: disabled, it shows its placeholder; open, it fails (`media::DeviceSelector` says no device was found).
 - A list opens with its cursor on the current choice: Select on the chosen row, Combobox on its value, MultiSelect on the first one ticked, SelectableList on its first selected row. A selection the owner makes, not the echo of the list's own pick, moves SelectableList's cursor there.
@@ -241,3 +247,4 @@ Ely GPUI Component. A component library for GPUI, in light and dark.
 - 2026-09-28: gpui builds an AccessKit tree on macOS, Windows and Linux, not the web, from elements with an id and a `role`, so the accessibility entries turn from `blocked` to `prove`. It still has no tray or badge API, so TrayIcon and DockBadge call AppKit.
 - 2026-09-28: SystemNotification is `prove`: gpui's `show_system_notification` posts only from an app bundle; unbundled, as `cargo run` starts the gallery, it logs and drops the call, and the web posts nothing.
 - 2026-09-29: the ported debug gallery draws its heaviest page about 1.6 times slower than on gpui 0.2.2 (tooling: 9 fps, worst frame 117 ms, against 14 fps and 72 ms), with gpui's accessibility tree on or off (`Application::new_inaccessible` measured the same). Ely's code did not change there; the frame cost is gpui's.
+- 2026-09-29: the web gallery runs on one thread, since a static site sends no cross-origin isolation, and draws through WebGL2 where WebGPU is missing. Its pictures are served beside the wasm, not embedded: the wasm stays under Cloudflare's 25 MiB, and a story fetches only its own. `wasm-opt -Oz` takes the wasm from 23.0 to 20.0 MB; gzip and brotli stay near 7.9 and 5.5 MB.

README.md

@@ -34,8 +34,11 @@ fn main() {
 cargo run --example gallery
 cargo run --example gallery -- --page buttons
 cargo run --example gallery -- --capture shots   # macOS: PNG of every page, light and dark
+ELY_GALLERY_ASSETS=https://example.com/gallery/assets/ scripts/web.sh dist   # for the browser
 ```
 
+In a browser, `?page=buttons&story=icon-button&theme=dark` draws one section alone; `examples/gallery/stories.json` lists them all.
+
 ## Build notes
 
 - gpui compiles its Metal shaders at runtime here (`runtime_shaders`, on by default), so a full Xcode install is not required. gpui_platform needs `font-kit`, or macOS draws no text.
@@ -43,5 +46,5 @@ cargo run --example gallery -- --capture shots   # macOS: PNG of every page, lig
 
 ## License
 
-MIT or Apache-2.0, at your option. Lucide icons: ISC. Inter and JetBrains Mono: SIL Open Font License 1.1.
+MIT or Apache-2.0, at your option. Lucide icons: ISC. Inter, JetBrains Mono, IBM Plex Sans and the gallery's Noto Sans Hebrew: SIL Open Font License 1.1.
 The gallery photos in `examples/gallery/assets` were generated for this project with gpt-image-2.

assets/fonts/ibm-plex-sans/IBMPlexSans-LICENSE.txt

@@ -0,0 +1,92 @@
+Copyright © 2017 IBM Corp. with Reserved Font Name "Plex"
+
+This Font Software is licensed under the SIL Open Font License, Version 1.1.
+This license is copied below, and is also available with a FAQ at:
+http://scripts.sil.org/OFL
+
+-----------------------------------------------------------
+SIL OPEN FONT LICENSE Version 1.1 - 26 February 2007
+-----------------------------------------------------------
+
+PREAMBLE
+The goals of the Open Font License (OFL) are to stimulate worldwide
+development of collaborative font projects, to support the font creation
+efforts of academic and linguistic communities, and to provide a free and
+open framework in which fonts may be shared and improved in partnership
+with others.
+
+The OFL allows the licensed fonts to be used, studied, modified and
+redistributed freely as long as they are not sold by themselves. The
+fonts, including any derivative works, can be bundled, embedded, 
+redistributed and/or sold with any software provided that any reserved
+names are not used by derivative works. The fonts and derivatives,
+however, cannot be released under any other type of license. The
+requirement for fonts to remain under this license does not apply
+to any document created using the fonts or their derivatives.
+
+DEFINITIONS
+"Font Software" refers to the set of files released by the Copyright
+Holder(s) under this license and clearly marked as such. This may
+include source files, build scripts and documentation.
+
+"Reserved Font Name" refers to any names specified as such after the
+copyright statement(s).
+
+"Original Version" refers to the collection of Font Software components as
+distributed by the Copyright Holder(s).
+
+"Modified Version" refers to any derivative made by adding to, deleting,
+or substituting -- in part or in whole -- any of the components of the
+Original Version, by changing formats or by porting the Font Software to a
+new environment.
+
+"Author" refers to any designer, engineer, programmer, technical
+writer or other person who contributed to the Font Software.
+
+PERMISSION & CONDITIONS
+Permission is hereby granted, free of charge, to any person obtaining
+a copy of the Font Software, to use, study, copy, merge, embed, modify,
+redistribute, and sell modified and unmodified copies of the Font
+Software, subject to the following conditions:
+
+1) Neither the Font Software nor any of its individual components,
+in Original or Modified Versions, may be sold by itself.
+
+2) Original or Modified Versions of the Font Software may be bundled,
+redistributed and/or sold with any software, provided that each copy
+contains the above copyright notice and this license. These can be
+included either as stand-alone text files, human-readable headers or
+in the appropriate machine-readable metadata fields within text or
+binary files as long as those fields can be easily viewed by the user.
+
+3) No Modified Version of the Font Software may use the Reserved Font
+Name(s) unless explicit written permission is granted by the corresponding
+Copyright Holder. This restriction only applies to the primary font name as
+presented to the users.
+
+4) The name(s) of the Copyright Holder(s) or the Author(s) of the Font
+Software shall not be used to promote, endorse or advertise any
+Modified Version, except to acknowledge the contribution(s) of the
+Copyright Holder(s) and the Author(s) or with their explicit written
+permission.
+
+5) The Font Software, modified or unmodified, in part or in whole,
+must be distributed entirely under this license, and must not be
+distributed under any other license. The requirement for fonts to
+remain under this license does not apply to any document created
+using the Font Software.
+
+TERMINATION
+This license becomes null and void if any of the above conditions are
+not met.
+
+DISCLAIMER
+THE FONT SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND,
+EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO ANY WARRANTIES OF
+MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT
+OF COPYRIGHT, PATENT, TRADEMARK, OR OTHER RIGHT. IN NO EVENT SHALL THE
+COPYRIGHT HOLDER BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY,
+INCLUDING ANY GENERAL, SPECIAL, INDIRECT, INCIDENTAL, OR CONSEQUENTIAL
+DAMAGES, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING
+FROM, OUT OF THE USE OR INABILITY TO USE THE FONT SOFTWARE OR FROM
+OTHER DEALINGS IN THE FONT SOFTWARE.

examples/gallery/fonts/NotoSansHebrew-LICENSE.txt

@@ -0,0 +1,92 @@
+Copyright 2022 The Noto Project Authors (https://github.com/notofonts/hebrew)
+
+This Font Software is licensed under the SIL Open Font License, Version 1.1.
+This license is copied below, and is also available with a FAQ at:
+http://scripts.sil.org/OFL
+
+-----------------------------------------------------------
+SIL OPEN FONT LICENSE Version 1.1 - 26 February 2007
+-----------------------------------------------------------
+
+PREAMBLE
+The goals of the Open Font License (OFL) are to stimulate worldwide
+development of collaborative font projects, to support the font creation
+efforts of academic and linguistic communities, and to provide a free and
+open framework in which fonts may be shared and improved in partnership
+with others.
+
+The OFL allows the licensed fonts to be used, studied, modified and
+redistributed freely as long as they are not sold by themselves. The
+fonts, including any derivative works, can be bundled, embedded,
+redistributed and/or sold with any software provided that any reserved
+names are not used by derivative works. The fonts and derivatives,
+however, cannot be released under any other type of license. The
+requirement for fonts to remain under this license does not apply
+to any document created using the fonts or their derivatives.
+
+DEFINITIONS
+"Font Software" refers to the set of files released by the Copyright
+Holder(s) under this license and clearly marked as such. This may
+include source files, build scripts and documentation.
+
+"Reserved Font Name" refers to any names specified as such after the
+copyright statement(s).
+
+"Original Version" refers to the collection of Font Software components as
+distributed by the Copyright Holder(s).
+
+"Modified Version" refers to any derivative made by adding to, deleting,
+or substituting -- in part or in whole -- any of the components of the
+Original Version, by changing formats or by porting the Font Software to a
+new environment.
+
+"Author" refers to any designer, engineer, programmer, technical
+writer or other person who contributed to the Font Software.
+
+PERMISSION AND CONDITIONS
+Permission is hereby granted, free of charge, to any person obtaining
+a copy of the Font Software, to use, study, copy, merge, embed, modify,
+redistribute, and sell modified and unmodified copies of the Font
+Software, subject to the following conditions:
+
+1) Neither the Font Software nor any of its individual components,
+in Original or Modified Versions, may be sold by itself.
+
+2) Original or Modified Versions of the Font Software may be bundled,
+redistributed and/or sold with any software, provided that each copy
+contains the above copyright notice and this license. These can be
+included either as stand-alone text files, human-readable headers or
+in the appropriate machine-readable metadata fields within text or
+binary files as long as those fields can be easily viewed by the user.
+
+3) No Modified Version of the Font Software may use the Reserved Font
+Name(s) unless explicit written permission is granted by the corresponding
+Copyright Holder. This restriction only applies to the primary font name as
+presented to the users.
+
+4) The name(s) of the Copyright Holder(s) or the Author(s) of the Font
+Software shall not be used to promote, endorse or advertise any
+Modified Version, except to acknowledge the contribution(s) of the
+Copyright Holder(s) and the Author(s) or with their explicit written
+permission.
+
+5) The Font Software, modified or unmodified, in part or in whole,
+must be distributed entirely under this license, and must not be
+distributed under any other license. The requirement for fonts to
+remain under this license does not apply to any document created
+using the Font Software.
+
+TERMINATION
+This license becomes null and void if any of the above conditions are
+not met.
+
+DISCLAIMER
+THE FONT SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND,
+EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO ANY WARRANTIES OF
+MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT
+OF COPYRIGHT, PATENT, TRADEMARK, OR OTHER RIGHT. IN NO EVENT SHALL THE
+COPYRIGHT HOLDER BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY,
+INCLUDING ANY GENERAL, SPECIAL, INDIRECT, INCIDENTAL, OR CONSEQUENTIAL
+DAMAGES, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING
+FROM, OUT OF THE USE OR INABILITY TO USE THE FONT SOFTWARE OR FROM
+OTHER DEALINGS IN THE FONT SOFTWARE.

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::{change, keep, section},
+    ui::{NO_FILES, change, keep, section, web_note},
 };
 
 /// The switchers' demo: the account and workspace in use.
@@ -115,6 +115,7 @@ 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()

examples/gallery/pages/chat/compose.rs

@@ -15,7 +15,7 @@ use web_time::Instant;
 
 use crate::{
     probe::probe,
-    ui::{keep, noise, section, set},
+    ui::{NO_FILES, keep, noise, section, set, web_note},
 };
 
 const SYSTEM: &str = "You answer about color in plain words. Cite sources.";
@@ -160,6 +160,7 @@ 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()

examples/gallery/pages/data/people.rs

@@ -15,7 +15,7 @@ use gpui::{App, IntoElement, ParentElement, SharedString, Styled, Window, div};
 
 use crate::{
     probe::probe,
-    ui::{keep, picture, row, section, set, specimen, specimens},
+    ui::{NO_FILES, keep, picture, row, section, set, specimen, specimens, web_note},
 };
 
 const DUNES: &str = asset!("dunes-square.jpg");
@@ -119,6 +119,7 @@ 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)
     })))

examples/gallery/pages/files/actions.rs

@@ -10,7 +10,7 @@ use jiff::Timestamp;
 
 use crate::{
     probe::probe,
-    ui::{change, keep, section},
+    ui::{NO_FILES, change, keep, section, web_note},
 };
 
 pub fn context_menu(cx: &mut App) -> impl IntoElement + use<> {
@@ -84,6 +84,7 @@ 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()

examples/gallery/pages/forms/files.rs

@@ -5,7 +5,7 @@ use gpui::{App, IntoElement, ParentElement, Styled, Window, div, px};
 
 use crate::{
     probe::probe,
-    ui::{keep, section, set, specimen, specimens},
+    ui::{NO_FILES, keep, section, set, specimen, specimens, web_note},
 };
 
 fn names(paths: &[PathBuf]) -> String {
@@ -44,6 +44,7 @@ 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(

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::{code, section},
+    ui::{NO_FILES, code, section, web_note},
 };
 
 pub fn mention(window: &mut Window, cx: &mut App) -> impl IntoElement + use<> {
@@ -99,6 +99,7 @@ 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()

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},
+    ui::{keep, picture, section, set, web_note},
 };
 
 const ATRIUM: &str = asset!("atrium.jpg");
@@ -106,6 +106,10 @@ 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(

examples/gallery/pages/menus/more.rs

@@ -9,16 +9,27 @@ use gpui::{App, IntoElement, ParentElement, Styled, Window, div, px};
 use super::rows::{ran, run};
 use crate::{
     probe::probe,
-    ui::{section, specimen},
+    ui::{section, specimen, web_note},
 };
 
 pub fn menu_bar(cx: &mut App) -> impl IntoElement + use<> {
-    let menus = cx.get_menus().expect("the gallery sets its menus in main");
+    let menus = match cx.get_menus() {
+        Some(menus) => menus,
+        None if cfg!(target_family = "wasm") => crate::app_menus()
+            .into_iter()
+            .map(gpui::Menu::owned)
+            .collect(),
+        None => panic!("the gallery sets its menus in main"),
+    };
     section(
         "MenuBar Menu",
         "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.",
+        cx,
+    ))
     .child(specimen(
         "hover moves between menus while one is open",
         probe("menubar", MenuBar::new("app-bar", menus)),

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, row, section, set, specimen},
+    ui::{keep, own_window, row, section, set, specimen},
 };
 
 /// Moves `value` to the front of a recent list, keeping `size` entries.
@@ -398,7 +398,7 @@ pub fn search_palette(window: &mut Window, cx: &mut App) -> impl IntoElement + u
             ))
             .child(specimen(
                 "a window above all others",
-                probe(
+                own_window(probe(
                     "launcher",
                     Button::new("launcher-button", "Open the launcher")
                         .variant(ButtonVariant::Ghost)
@@ -415,7 +415,7 @@ pub fn search_palette(window: &mut Window, cx: &mut App) -> impl IntoElement + u
                                 Err(error) => log::error!("gallery: launcher: {error:#}"),
                             }
                         }),
-                ),
+                ), cx),
                 cx,
             )),
     )

examples/gallery/pages/primitives/native.rs

@@ -13,7 +13,7 @@ use gpui::{
 
 use crate::{
     probe::probe,
-    ui::{code, row, section},
+    ui::{code, row, section, web_note},
 };
 
 pub fn boxes(cx: &App) -> impl IntoElement + use<> {
@@ -445,6 +445,10 @@ pub fn clipboard(window: &mut Window, cx: &mut App) -> impl IntoElement + use<>
         "write_to_clipboard and read_from_clipboard on App.",
         cx,
     )
+    .children(web_note(
+        "A browser reads its clipboard only as it pastes, into a field: on the web gpui's read_from_clipboard finds nothing, so Paste reports no text. Copy works.",
+        cx,
+    ))
     .child(
         row()
             .gap_3()

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::change;
+use crate::ui::{NO_FILES, change, web_note};
 
 /// The open section's page.
 pub(super) fn page(prefs: &Entity<Prefs>, fields: &Fields, section: &str, cx: &App) -> AnyElement {
@@ -198,6 +198,7 @@ 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.")

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};
+use crate::ui::{code, row, section, specimen, specimens, web_note};
 
 /// A window drawn inside the page.
 pub fn window_frame(width: f32, height: f32, cx: &App) -> Div {
@@ -116,6 +116,10 @@ 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<> {
@@ -142,6 +146,10 @@ 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<> {
@@ -154,6 +162,10 @@ 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<> {
@@ -177,4 +189,8 @@ 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,
+    ))
 }

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::{row, section, specimen},
+    ui::{own_window, row, section, specimen},
 };
 
 fn log_action(name: &'static str) -> impl Fn(&mut Window, &mut App) + 'static {
@@ -59,14 +59,17 @@ pub fn update_window(cx: &App) -> impl IntoElement + use<> {
                 .child(update_dialog().on_later(log_action("later"))),
             cx,
         ))
-        .child(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:#}"),
-                }),
+        .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,
         ))
 }
 
@@ -101,14 +104,17 @@ pub fn crash_reporter(cx: &App) -> impl IntoElement + use<> {
             .child(reporter(true)),
         cx,
     ))
-    .child(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:#}"),
-            }),
+    .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,
     ))
 }
 

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},
+    ui::{blocked, row, section, web_note},
 };
 
 const ITEMS: [&str; 3] = ["Open gallery", "Toggle theme", "Quit"];
@@ -23,6 +23,10 @@ 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(
@@ -113,6 +117,10 @@ 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(
@@ -138,7 +146,11 @@ pub fn notification(cx: &App) -> impl IntoElement + use<> {
         cx,
     )
     .child(blocked(
-        "Not yet shown: gpui posts a system notification only from an app bundle, and the gallery runs unbundled.",
+        if cfg!(target_family = "wasm") {
+            "Not shown: gpui on the web posts no system notification."
+        } else {
+            "Not yet shown: gpui posts a system notification only from an app bundle, and the gallery runs unbundled."
+        },
         cx,
     ))
 }

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::{change, keep, section, specimen, specimens};
+use crate::ui::{NO_FILES, change, keep, section, specimen, specimens, web_note};
 
 /// Which code palette the demo last chose.
 struct Chosen(SharedString);
@@ -17,6 +17,7 @@ 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(

examples/gallery/pages/theme/platform.rs

@@ -14,7 +14,7 @@ use gpui::{
 
 use crate::{
     probe::{Opened, probe},
-    ui::{change, keep, section, specimen, specimens},
+    ui::{change, keep, native_only, section, specimen, specimens},
 };
 
 const PLATFORMS: [(Platform, &str); 3] = [
@@ -38,10 +38,14 @@ pub fn platform(window: &mut Window, cx: &mut App) -> impl IntoElement + use<> {
             .child(specimen("IconTheme", icons(window, cx), cx))
             .child(specimen(
                 "Vibrancy",
-                probe(
-                    "frosted-open",
-                    Button::new("frosted-open", "Open a frosted window")
-                        .on_click(|_, _, cx| frosted(cx)),
+                native_only(
+                    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,
             )),
@@ -141,10 +145,10 @@ fn frosted(cx: &mut App) {
         window_background: WindowBackgroundAppearance::Blurred,
         ..Default::default()
     };
-    let handle = cx
-        .open_window(options, |_, cx| cx.new(|_| Frosted))
-        .expect("the frosted window opens");
-    Opened::insert("frosted", handle.into(), cx);
+    match cx.open_window(options, |_, cx| cx.new(|_| Frosted)) {
+        Ok(handle) => Opened::insert("frosted", handle.into(), cx),
+        Err(error) => log::error!("gallery: frosted window failed: {error:#}"),
+    }
 }
 
 /// A window whose sidebar lets the desktop through.

examples/gallery/shell.rs

@@ -227,6 +227,19 @@ impl Gallery {
         }
     }
 
+    /// The window's root: the focus scope, over Ely's ground, ink and type.
+    fn root(&self, cx: &App) -> FocusScope {
+        let theme = cx.theme();
+        FocusScope::new(&self.focus)
+            .root()
+            .size_full()
+            .flex()
+            .bg(theme.colors.bg)
+            .text_color(theme.colors.fg)
+            .font_family(theme.font_family.clone())
+            .text_size(theme.text_size(TextSize::Base))
+    }
+
     /// The page's demos, or the story's alone; why not, once the start or the story failed.
     fn body(
         &mut self,
@@ -259,24 +272,10 @@ impl Gallery {
 impl Render for Gallery {
     fn render(&mut self, window: &mut Window, cx: &mut Context<Self>) -> impl IntoElement {
         let page = &pages::ALL[self.page];
-        let body = self.body(page, window, cx);
-        let sidebar = self.sidebar(cx);
-        let switcher = self.switcher(cx);
-        let theme = cx.theme();
-        let colors = &theme.colors;
-
-        let root = FocusScope::new(&self.focus)
-            .root()
-            .size_full()
-            .flex()
-            .bg(colors.bg)
-            .text_color(colors.fg)
-            .font_family(theme.font_family.clone())
-            .text_size(theme.text_size(TextSize::Base));
-        let body = match body {
+        let body = match self.body(page, window, cx) {
             Ok(body) => body,
             Err(failure) => {
-                return root.child(
+                return self.root(cx).child(
                     div().w_full().p_6().child(
                         Alert::new("gallery-failure", Severity::Danger, "Nothing to show")
                             .body(failure),
@@ -285,7 +284,7 @@ impl Render for Gallery {
             }
         };
         if self.story.is_some() {
-            return root.child(
+            return self.root(cx).child(
                 on_axis(div().id(("story", self.pass)))
                     .size_full()
                     .overflow_y_scroll()
@@ -293,7 +292,12 @@ impl Render for Gallery {
                     .child(div().p_6().child(body)),
             );
         }
-        root.child(sidebar).child(
+        let sidebar = self.sidebar(cx);
+        let switcher = self.switcher(cx);
+        let theme = cx.theme();
+        let colors = &theme.colors;
+
+        self.root(cx).child(sidebar).child(
             on_axis(div().id(("page", self.pass)))
                 .flex_1()
                 .h_full()

examples/gallery/ui.rs

@@ -163,20 +163,29 @@ pub fn blocked(text: impl Into<SharedString>, cx: &App) -> impl IntoElement {
         .child(div().flex_1().min_w_0().child(text.into()))
 }
 
+/// Why a demo that takes files takes none 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.";
+
 /// What a browser cannot do here, and why: a note on the web, nothing natively.
 pub fn web_note(text: &'static str, cx: &App) -> Option<AnyElement> {
     cfg!(target_family = "wasm").then(|| blocked(text, cx).into_any_element())
 }
 
-/// A button that opens a window of its own; a browser page is one window, so there a note stands in.
+/// A demo a browser cannot run: on the web its note stands in.
+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 button that opens a window of its own, which a browser page cannot.
 pub fn own_window(button: impl IntoElement, cx: &App) -> AnyElement {
-    match web_note(
+    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,
-    ) {
-        Some(note) => note,
-        None => button.into_any_element(),
-    }
+    )
 }
 
 /// A demo's state, kept across frames under `key`.

examples/gallery/web.rs

@@ -1,4 +1,4 @@
-use std::{cell::RefCell, rc::Rc, sync::Arc};
+use std::{borrow::Cow, cell::RefCell, rc::Rc, sync::Arc};
 
 use anyhow::{Context as _, Result, anyhow, bail};
 use ely_gpui_component::Assets;
@@ -9,6 +9,9 @@ use web_sys::UrlSearchParams;
 
 use crate::{Start, choose, launch, pages, shell::Choice, shell::Gallery};
 
+/// The i18n page's Hebrew: gpui_web asks the browser for emoji and CJK alone.
+const HEBREW: &[u8] = include_bytes!("fonts/NotoSansHebrew-Regular.ttf");
+
 thread_local! {
     /// The running app and its window, for the host page's calls.
     static HOST: RefCell<Option<(AsyncApp, WindowHandle<Gallery>)>> = const { RefCell::new(None) };
@@ -95,6 +98,9 @@ pub fn start() {
         .with_http_client(http)
         .with_assets(Assets)
         .run(move |cx| {
+            cx.text_system()
+                .add_fonts(vec![Cow::Borrowed(HEBREW)])
+                .expect("the gallery's Hebrew face registers");
             let window = launch(start, cx);
             HOST.with(|host| *host.borrow_mut() = Some((cx.to_async(), window)));
         });

scripts/web.sh

@@ -0,0 +1,27 @@
+#!/bin/sh
+# Builds the browser gallery into <out>; ELY_GALLERY_ASSETS is the address of <out>/assets/.
+set -eu
+out=$(mkdir -p "${1:?usage: scripts/web.sh <out dir>}" && cd "$1" && pwd)
+: "${ELY_GALLERY_ASSETS:?set ELY_GALLERY_ASSETS to the address of <out>/assets/, ending in /}"
+cd "$(dirname "$0")/.."
+version=$(sed -n '/^name = "wasm-bindgen"$/{n;s/^version = "\(.*\)"$/\1/p;}' Cargo.lock)
+wasm-bindgen --version | grep -qx "wasm-bindgen $version" || {
+  echo "wasm-bindgen $version needed: cargo install wasm-bindgen-cli --version $version --locked" >&2
+  exit 1
+}
+command -v wasm-opt >/dev/null || { echo "wasm-opt needed: brew install binaryen, or npm i -g binaryen" >&2; exit 1; }
+# gpui_web's wasm_thread asks for an unstable feature even single-threaded, as Zed's own web build does.
+RUSTC_BOOTSTRAP=1 cargo build --example gallery --target wasm32-unknown-unknown --profile web
+wasm="${CARGO_TARGET_DIR:-target}/wasm32-unknown-unknown/web/examples/gallery.wasm"
+wasm-bindgen "$wasm" --out-dir "$out" --out-name gallery --target web --no-typescript \
+  --remove-name-section --remove-producers-section
+# Cloudflare serves no file over 25 MiB; -Oz takes a seventh off, though not off the gzip.
+wasm-opt -Oz --enable-bulk-memory --enable-nontrapping-float-to-int --enable-sign-ext \
+  --enable-mutable-globals --enable-reference-types --enable-multivalue \
+  "$out/gallery_bg.wasm" -o "$out/gallery_bg.wasm"
+cp examples/gallery/index.html "$out/"
+rm -rf "$out/assets"
+cp -R examples/gallery/assets "$out/assets"
+size=$(wc -c < "$out/gallery_bg.wasm" | tr -d ' ')
+[ "$size" -le 26214400 ] || { echo "gallery_bg.wasm is $size bytes, over Cloudflare's 25 MiB" >&2; exit 1; }
+echo "gallery_bg.wasm: $size bytes"