diff --git a/.github/workflows/test-docs.yml b/.github/workflows/test-docs.yml
index e3469d514b..a958d18a5b 100644
--- a/.github/workflows/test-docs.yml
+++ b/.github/workflows/test-docs.yml
@@ -3,6 +3,7 @@ on:
   pull_request:
     paths:
       - "website/**"
+      - ".github/workflows/test-docs.yml"
       - "crates/base/**"
       - "crates/story-web/**"
 
@@ -12,9 +13,19 @@ jobs:
     steps:
       - name: Checkout code
         uses: actions/checkout@v4
+      - name: Checkout latest approved showcases
+        uses: actions/checkout@v4
+        with:
+          repository: longbridge/gpui-kit-showcases
+          ref: main
+          path: .showcases
+          persist-credentials: false
       - uses: oven-sh/setup-bun@v1
         with:
-          bun-version: 1.3.6
+          bun-version: 1.4.0
+      - name: Install Showcase validation and rendering dependencies
+        working-directory: .showcases
+        run: bun install --frozen-lockfile
       - name: Install
         working-directory: website
         run: bun install
@@ -22,5 +33,8 @@ jobs:
         working-directory: website
         env:
           GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
+          SHOWCASES_DIR: ${{ github.workspace }}/.showcases
         run: |
+          bun run test:showcases
           bun run build
+          bun run test:seo
diff --git a/Cargo.lock b/Cargo.lock
index 4747afa677..cfdd7766a3 100644
--- a/Cargo.lock
+++ b/Cargo.lock
@@ -3385,7 +3385,6 @@ dependencies = [
  "futures",
  "gpui-pre",
  "gpui-pre-macros",
- "gpui-pre-platform",
  "gpui-pre-reqwest-client",
  "gpui-pre-sum-tree",
  "html5ever 0.27.0",
@@ -3405,12 +3404,22 @@ dependencies = [
  "serde_json",
  "smallvec",
  "smol",
- "syntect",
  "tracing",
  "unicode-segmentation",
  "web-time",
 ]
 
+[[package]]
+name = "gpui-base-examples"
+version = "0.6.0"
+dependencies = [
+ "gpui-base",
+ "gpui-pre",
+ "gpui-pre-platform",
+ "gpui-pre-reqwest-client",
+ "syntect",
+]
+
 [[package]]
 name = "gpui-base-examples-wasm"
 version = "0.6.0"
diff --git a/Cargo.toml b/Cargo.toml
index b4f64291a0..d7ceb1fc49 100644
--- a/Cargo.toml
+++ b/Cargo.toml
@@ -4,6 +4,7 @@ members = [
     "crates/kit",
     "crates/base",
     "crates/base/examples/wasm",
+    "crates/base/examples/native",
     "crates/component-macros",
     "crates/story",
     "crates/story-web",
diff --git a/crates/base/Cargo.toml b/crates/base/Cargo.toml
index 0bdcb731d3..2010a37aa6 100644
--- a/crates/base/Cargo.toml
+++ b/crates/base/Cargo.toml
@@ -3,9 +3,9 @@ description = "Behavior, interaction, and infrastructure foundations for GPUI ap
 keywords = ["desktop", "gpui", "ui", "foundation"]
 license = "Apache-2.0"
 name = "gpui-base"
-# The showcase binary and examples are development tools that read fixtures
-# from `crates/story`; they stay out of the published package.
-exclude = ["src/bin/", "examples/"]
+# The examples are development tools that read fixtures from `crates/story`;
+# they stay out of the published package.
+exclude = ["examples/"]
 repository = "https://github.com/longbridge/gpui-kit"
 homepage = "https://gpui-kit.com"
 documentation = "https://docs.rs/gpui-base"
@@ -45,11 +45,9 @@ sum-tree.workspace = true
 tracing.workspace = true
 unicode-segmentation = "1.12.0"
 web-time = "1"
-syntect.workspace = true
 
 [target.'cfg(not(target_family = "wasm"))'.dependencies]
 smol.workspace = true
-gpui_platform.workspace = true
 
 [target.'cfg(target_family = "wasm")'.dependencies]
 async-channel = "2.3.1"
diff --git a/crates/base/README.md b/crates/base/README.md
index e661f64758..ac9910f1f2 100644
--- a/crates/base/README.md
+++ b/crates/base/README.md
@@ -239,7 +239,7 @@ Foundation controls do not install animation automatically. Applications choose
 See the [Motion guide](../../website/base/motion.md) and run its five focused interactive demonstrations with:
 
 ```bash
-cargo run -p gpui-base --example motion
+cargo run -p gpui-base-examples --bin motion
 ```
 
 ### Themes and Styles
diff --git a/crates/base/examples/README.md b/crates/base/examples/README.md
index 2414939ff3..a721cf5ee3 100644
--- a/crates/base/examples/README.md
+++ b/crates/base/examples/README.md
@@ -7,21 +7,21 @@ WebAssembly previews exercise the same Rust code without producing one binary pe
 Run an individual component natively:
 
 ```bash
-cargo run -p gpui-base --example components -- button
-cargo run -p gpui-base --example components -- alert-dialog
-cargo run -p gpui-base --example components -- virtual-list
+cargo run -p gpui-base-examples -- button
+cargo run -p gpui-base-examples -- alert-dialog
+cargo run -p gpui-base-examples -- virtual-list
 ```
 
 Run without a component slug to show the overview:
 
 ```bash
-cargo run -p gpui-base --example components
+cargo run -p gpui-base-examples
 ```
 
 Motion has a separate example because it demonstrates continuous behavior rather than a component catalog entry. It contains focused pages for transitions, springs, keyframes, presence, and stagger:
 
 ```bash
-cargo run -p gpui-base --example motion
+cargo run -p gpui-base-examples --bin motion
 ```
 
 The website builds `examples/wasm`, which imports the same `showcase/mod.rs` and selects the
diff --git a/crates/base/examples/native/Cargo.toml b/crates/base/examples/native/Cargo.toml
new file mode 100644
index 0000000000..1430254f4f
--- /dev/null
+++ b/crates/base/examples/native/Cargo.toml
@@ -0,0 +1,21 @@
+[package]
+name = "gpui-base-examples"
+default-run = "components"
+version = "0.6.0"
+publish = false
+edition.workspace = true
+
+[dependencies]
+gpui.workspace = true
+gpui-base = { path = "../.." }
+gpui_platform.workspace = true
+reqwest_client.workspace = true
+syntect.workspace = true
+
+[lints]
+workspace = true
+
+# The shared showcase is included with `#[path]`, which cargo-machete cannot
+# follow when detecting its `gpui`, `gpui_base`, and `syntect` imports.
+[package.metadata.cargo-machete]
+ignored = ["gpui", "gpui-base", "syntect"]
diff --git a/crates/base/examples/components.rs b/crates/base/examples/native/src/bin/components.rs
similarity index 90%
rename from crates/base/examples/components.rs
rename to crates/base/examples/native/src/bin/components.rs
index ca3884c898..7d56203c59 100644
--- a/crates/base/examples/components.rs
+++ b/crates/base/examples/native/src/bin/components.rs
@@ -1,3 +1,4 @@
+#[path = "../../../showcase/mod.rs"]
 mod showcase;
 
 use std::sync::Arc;
diff --git a/crates/base/examples/motion.rs b/crates/base/examples/native/src/bin/motion.rs
similarity index 53%
rename from crates/base/examples/motion.rs
rename to crates/base/examples/native/src/bin/motion.rs
index c1553eef0a..d0aca6d4ff 100644
--- a/crates/base/examples/motion.rs
+++ b/crates/base/examples/native/src/bin/motion.rs
@@ -1,4 +1,4 @@
-#[path = "motion/mod.rs"]
+#[path = "../../../motion/mod.rs"]
 mod app;
 
 fn main() {
diff --git a/crates/base/src/bin/components.rs b/crates/base/src/bin/components.rs
deleted file mode 100644
index 8950a60a02..0000000000
--- a/crates/base/src/bin/components.rs
+++ /dev/null
@@ -1,10 +0,0 @@
-#[path = "../../examples/showcase/mod.rs"]
-mod showcase;
-
-fn main() {
-    let component = std::env::args()
-        .nth(1)
-        .unwrap_or_else(|| "overview".to_string());
-
-    showcase::run_native(&component);
-}
diff --git a/crates/base/src/input/base/state.rs b/crates/base/src/input/base/state.rs
index ab80f1585e..0d5030b0d3 100644
--- a/crates/base/src/input/base/state.rs
+++ b/crates/base/src/input/base/state.rs
@@ -38,6 +38,12 @@ use crate::input::{
 };
 use crate::{AutoScroll, StepAction};
 
+/// Vertical clearance to retain when revealing a text position.
+pub(crate) enum ScrollPadding {
+    Minimal,
+    SurroundingLines,
+}
+
 #[derive(Action, Clone, PartialEq, Eq, Deserialize)]
 #[action(namespace = input, no_json)]
 pub struct Enter {
@@ -1873,6 +1879,23 @@ impl<M: InputModeKind> InputBaseState<M> {
         offset: usize,
         direction: Option<MoveDirection>,
         cx: &mut Context<Self>,
+    ) {
+        let padding = if direction.is_some() {
+            ScrollPadding::SurroundingLines
+        } else {
+            ScrollPadding::Minimal
+        };
+        self.scroll_to_with_padding(offset, direction, padding, cx);
+    }
+
+    /// Reveal an offset with independently chosen direction restriction and padding.
+    /// Search uses surrounding lines without restricting movement to match order.
+    pub(crate) fn scroll_to_with_padding(
+        &mut self,
+        offset: usize,
+        direction: Option<MoveDirection>,
+        padding: ScrollPadding,
+        cx: &mut Context<Self>,
     ) {
         let Some(last_layout) = self.last_layout.as_ref() else {
             return;
@@ -1921,16 +1944,17 @@ impl<M: InputModeKind> InputBaseState<M> {
         // `TextElement::layout_cursor` so both scroll-into-view paths agree
         // (a mismatch flickered on `Down` at end-of-buffer with a small
         // `cursor_surrounding_lines` override).
-        let edge_height = if direction.is_some() && self.is_code_editor() {
-            super::element::cursor_surrounding_padding(
-                self.mode.is_auto_grow(),
-                self.cursor_surrounding_lines,
-                last_layout.visible_range.len(),
-                line_height,
-            )
-        } else {
-            line_height
-        };
+        let edge_height =
+            if matches!(padding, ScrollPadding::SurroundingLines) && self.is_code_editor() {
+                super::element::cursor_surrounding_padding(
+                    self.mode.is_auto_grow(),
+                    self.cursor_surrounding_lines,
+                    last_layout.visible_range.len(),
+                    line_height,
+                )
+            } else {
+                line_height
+            };
         if row_offset_y - edge_height + line_height < -scroll_offset.y {
             // Scroll up
             scroll_offset.y = -row_offset_y + edge_height - line_height;
@@ -3454,6 +3478,91 @@ mod tests {
         });
     }
 
+    #[gpui::test]
+    fn test_next_search_match_reveals_with_padding_after_manual_scroll(cx: &mut TestAppContext) {
+        assert_search_reveals_with_padding_after_manual_scroll(false, cx);
+    }
+
+    #[gpui::test]
+    fn test_previous_search_match_reveals_with_padding_after_manual_scroll(
+        cx: &mut TestAppContext,
+    ) {
+        assert_search_reveals_with_padding_after_manual_scroll(true, cx);
+    }
+
+    fn assert_search_reveals_with_padding_after_manual_scroll(
+        previous: bool,
+        cx: &mut TestAppContext,
+    ) {
+        let input_view = InputView::new(cx);
+        let mut cx = VisualTestContext::from_window(input_view.window_handle.into(), cx);
+        let input = input_view.input;
+        let text = (0..160)
+            .map(|row| {
+                if matches!(row, 20 | 60 | 100) {
+                    format!("match on row {row}")
+                } else {
+                    format!("line {row}")
+                }
+            })
+            .collect::<Vec<_>>()
+            .join("\n");
+        let start = text.match_indices("match").nth(1).unwrap().0;
+        let expected_match = start..start + "match".len();
+        cx.update(|window, cx| {
+            input.update(cx, |state, cx| {
+                state.set_cursor_surrounding_lines(Some(3), window, cx);
+                state.set_value(text, window, cx);
+                state.set_search_query("match", true, cx);
+                if previous {
+                    state.search_session.matcher.next();
+                    state.search_session.matcher.next();
+                }
+            });
+        });
+        cx.run_until_parked();
+        cx.update(|_, cx| {
+            input.update(cx, |state, cx| {
+                let line_height = state.last_layout.as_ref().unwrap().line_height;
+                let y = if previous { px(0.) } else { -line_height * 80. };
+                state.set_scroll_offset(point(px(0.), y), cx);
+            });
+        });
+        cx.run_until_parked();
+        input.read_with(&cx, |state, _| {
+            let visible = state.visible_row_range().unwrap();
+            if previous {
+                assert!(visible.end <= 60, "target must be below the viewport");
+            } else {
+                assert!(visible.start > 60, "target must be above the viewport");
+            }
+        });
+        cx.update(|_, cx| {
+            input.update(cx, |state, cx| {
+                let range = if previous {
+                    state.previous_search_match(cx)
+                } else {
+                    state.next_search_match(cx)
+                };
+                assert_eq!(range, Some(expected_match));
+                assert_eq!(state.search_session.matcher.label(), "2/3");
+            });
+        });
+        cx.run_until_parked();
+        input.read_with(&cx, |state, _| {
+            assert!(state.visible_row_range().unwrap().contains(&60));
+            let line_height = state.last_layout.as_ref().unwrap().line_height;
+            let target_y = line_height * 60. + state.scroll_handle.offset().y;
+            // Three lines of edge clearance include the matched line itself.
+            assert!(target_y >= line_height * 2. - px(0.1));
+            assert!(
+                target_y + line_height * 3.
+                    <= state.last_bounds.as_ref().unwrap().size.height + px(0.1),
+                "search must preserve the configured surrounding-line padding"
+            );
+        });
+    }
+
     #[gpui::test]
     fn test_number_step(cx: &mut TestAppContext) {
         let input = InputView::build(cx, |state| state).input;
diff --git a/crates/base/src/input/editor/search.rs b/crates/base/src/input/editor/search.rs
index f5c5742cbc..16c1ebb1f6 100644
--- a/crates/base/src/input/editor/search.rs
+++ b/crates/base/src/input/editor/search.rs
@@ -4,7 +4,9 @@ use gpui::{Context, Window};
 use ropey::Rope;
 use std::{ops::Range, rc::Rc};
 
-use super::{InputBaseState, Replace, RopeExt as _, Search, movement::MoveDirection};
+use super::{
+    InputBaseState, Replace, RopeExt as _, Search, movement::MoveDirection, state::ScrollPadding,
+};
 
 /// Stateful, presentation-independent search engine used by text inputs.
 #[derive(Debug, Clone)]
@@ -52,7 +54,12 @@ impl SearchSession {
     }
 
     pub(crate) fn update_query(&mut self, query: impl Into<String>, case_insensitive: bool) {
-        self.query = query.into();
+        let query = query.into();
+        if self.query == query && self.case_insensitive == case_insensitive {
+            return;
+        }
+
+        self.query = query;
         self.case_insensitive = case_insensitive;
         self.matcher.update_query(&self.query, case_insensitive);
     }
@@ -76,19 +83,25 @@ impl<M: InputModeKind> InputBaseState<M> {
         self.search_session
             .open(replace_mode, self.is_replaceable());
         let selected = self.selected_text().to_string();
-        if !selected.is_empty() {
-            self.search_session.query = selected;
-        }
-        self.search_session.anchor_offset = self
-            .last_layout
-            .as_ref()
-            .map(|layout| layout.visible_range_offset.start);
-        self.search_session.matcher.update_query(
-            &self.search_session.query,
-            self.search_session.case_insensitive,
-        );
+        let query = if selected.is_empty() {
+            self.search_session.query.clone()
+        } else {
+            selected
+        };
+        let query_changed = query != self.search_session.query;
+        // A retained query resumes its previous occurrence. Only a new query
+        // is anchored to the current viewport.
+        self.search_session.anchor_offset = if query_changed {
+            self.last_layout
+                .as_ref()
+                .map(|layout| layout.visible_range_offset.start)
+        } else {
+            None
+        };
+        let case_insensitive = self.search_session.case_insensitive;
+        self.search_session.update_query(query, case_insensitive);
         self.search_session.matcher.update(&self.text);
-        if let Some(anchor) = self.search_session.anchor_offset {
+        if query_changed && let Some(anchor) = self.search_session.anchor_offset {
             self.search_session.matcher.update_cursor_by_offset(anchor);
         }
         cx.notify();
@@ -139,20 +152,18 @@ impl<M: InputModeKind> InputBaseState<M> {
     }
 
     pub fn next_search_match(&mut self, cx: &mut Context<Self>) -> Option<Range<usize>> {
-        let previous = self.search_session.matcher.current_match_index();
         let range = self.search_session.matcher.next()?;
-        let direction = (self.search_session.matcher.current_match_index() > previous)
-            .then_some(MoveDirection::Down);
-        self.scroll_to(range.end, direction, cx);
+        // Match order does not describe viewport direction after a manual
+        // scroll. Always allow search navigation to reveal the active match.
+        self.scroll_to_with_padding(range.end, None, ScrollPadding::SurroundingLines, cx);
         Some(range)
     }
 
     pub fn previous_search_match(&mut self, cx: &mut Context<Self>) -> Option<Range<usize>> {
-        let previous = self.search_session.matcher.current_match_index();
         let range = self.search_session.matcher.next_back()?;
-        let direction = (self.search_session.matcher.current_match_index() < previous)
-            .then_some(MoveDirection::Up);
-        self.scroll_to(range.start, direction, cx);
+        // Match order does not describe viewport direction after a manual
+        // scroll. Always allow search navigation to reveal the active match.
+        self.scroll_to_with_padding(range.start, None, ScrollPadding::SurroundingLines, cx);
         Some(range)
     }
 
@@ -404,6 +415,23 @@ mod tests {
         assert_eq!(matcher.next(), Some(5..10));
     }
 
+    #[test]
+    fn identical_query_keeps_the_current_match() {
+        let mut session = SearchSession::default();
+        session.update_query("foo", true);
+        session.matcher.update(&Rope::from("foo bar foo baz foo"));
+        session.matcher.update_cursor_by_offset(12);
+        assert_eq!(session.matcher.current_match_index(), 2);
+
+        // Reopening Find and the styled search panel's initial query echo both
+        // update the session with the same query. Neither should reset the
+        // previously active occurrence.
+        session.update_query("foo", true);
+
+        assert_eq!(session.matcher.current_match_index(), 2);
+        assert_eq!(session.matcher.label(), "3/3");
+    }
+
     #[test]
     fn replacement_keeps_current_match_index_on_next_match() {
         let mut matcher = SearchMatcher::new();
diff --git a/crates/component/src/input/overlay.rs b/crates/component/src/input/overlay.rs
index d1a45fef27..4ce4ab2781 100644
--- a/crates/component/src/input/overlay.rs
+++ b/crates/component/src/input/overlay.rs
@@ -504,6 +504,45 @@ mod tests {
         });
     }
 
+    /// Reopening search must preserve navigation already owned by Base.
+    ///
+    /// Closing and reopening Find keeps the previous occurrence in browsers.
+    /// Neither Base reopening the session nor the styled panel echoing its
+    /// retained query may reset the current match to zero.
+    #[gpui::test]
+    fn reopening_search_panel_preserves_the_previous_match(cx: &mut gpui::TestAppContext) {
+        cx.update(crate::init);
+        let (probe, cx) = cx.add_window_view(|window, cx| OverlayProbe {
+            state: cx.new(|cx| crate::input::EditorState::new(window, cx).searchable(true)),
+        });
+        let state = probe.read_with(cx, |probe, _| probe.state.clone());
+
+        cx.update(|window, cx| {
+            state.update(cx, |state, cx| {
+                state.set_value("foo bar foo baz foo", window, cx);
+                state.open_search(false, cx);
+                state.set_search_query("foo", true, cx);
+                assert_eq!(state.next_search_match(cx), Some(8..11));
+                assert_eq!(state.search_session().matcher.current_match_index(), 1);
+                state.close_search(cx);
+                state.open_search(false, cx);
+                assert_eq!(state.search_session().matcher.current_match_index(), 1);
+            });
+
+            let mut host = InputOverlayHost::new(state.clone(), window, cx);
+            host.sync(&state, window, cx);
+
+            state.read_with(cx, |state, _| {
+                assert_eq!(state.search_session().matcher.current_match_index(), 1);
+                assert_eq!(state.search_session().matcher.label(), "2/3");
+            });
+
+            state.update(cx, |state, cx| {
+                assert_eq!(state.next_search_match(cx), Some(16..19));
+            });
+        });
+    }
+
     /// A frame that changed nothing must not rebuild the popovers.
     ///
     /// Sync runs every frame, so the change check has to be cheap and stable.
diff --git a/crates/component/src/list/delegate.rs b/crates/component/src/list/delegate.rs
index 81e3d49aa9..e4f8997659 100644
--- a/crates/component/src/list/delegate.rs
+++ b/crates/component/src/list/delegate.rs
@@ -1,4 +1,7 @@
-use gpui::{AnyElement, App, Context, IntoElement, ParentElement as _, Styled as _, Task, Window};
+use gpui::{
+    AnyElement, App, Context, IntoElement, ParentElement as _, SharedString, Styled as _, Task,
+    Window,
+};
 
 use crate::{
     ActiveTheme as _, Icon, IconName, IndexPath, Selectable, h_flex,
@@ -21,6 +24,13 @@ pub trait ListDelegate: Sized + 'static {
         Task::ready(())
     }
 
+    /// Return the accessible name of a row, independently of its rendered children.
+    ///
+    /// The default leaves the row unnamed so its children retain their existing semantics.
+    fn item_accessibility_label(&self, _: IndexPath, _: &App) -> Option<SharedString> {
+        None
+    }
+
     /// Return the number of sections in the list, default is 1.
     ///
     /// Min value is 1.
diff --git a/crates/component/src/list/list.rs b/crates/component/src/list/list.rs
index 732b8da91e..dfd944621b 100644
--- a/crates/component/src/list/list.rs
+++ b/crates/component/src/list/list.rs
@@ -471,10 +471,12 @@ where
         let id = SharedString::from(format!("list-item-{}", ix));
 
         let total_items = self.rows_cache.items_count();
+        let aria_label = self.delegate.item_accessibility_label(ix, cx);
 
         div()
             .id(id)
             .role(Role::ListItem)
+            .when_some(aria_label, |this, label| this.aria_label(label))
             .aria_position_in_set(ix.row + 1)
             .aria_size_of_set(total_items)
             .aria_selected(selected)
@@ -778,3 +780,62 @@ where
             .child(self.state.clone())
     }
 }
+
+#[cfg(test)]
+mod row_label_tests {
+    use super::*;
+    use crate::list::ListItem;
+    use gpui::{Element as _, TestAppContext, accesskit};
+
+    struct LabelDelegate;
+
+    impl ListDelegate for LabelDelegate {
+        type Item = ListItem;
+
+        fn items_count(&self, _: usize, _: &App) -> usize {
+            2
+        }
+
+        fn item_accessibility_label(&self, index: IndexPath, _: &App) -> Option<SharedString> {
+            (index.row == 0).then(|| "Acme, up 2 percent".into())
+        }
+
+        fn set_selected_index(
+            &mut self,
+            _: Option<IndexPath>,
+            _: &mut Window,
+            _: &mut Context<ListState<Self>>,
+        ) {
+        }
+
+        fn render_item(
+            &mut self,
+            index: IndexPath,
+            _: &mut Window,
+            _: &mut Context<ListState<Self>>,
+        ) -> Option<ListItem> {
+            Some(ListItem::new(index.row).child("Acme"))
+        }
+    }
+
+    #[gpui::test]
+    fn accessible_names_belong_to_the_row_container(cx: &mut TestAppContext) {
+        cx.update(crate::init);
+        let window = cx.add_empty_window();
+        window.update(|window, cx| {
+            let list = cx.new(|cx| ListState::new(LabelDelegate, window, cx));
+            for (row, label) in [(0, Some("Acme, up 2 percent")), (1, None)] {
+                let node = list.update(cx, |list, cx| {
+                    let element = list
+                        .render_list_item(IndexPath::new(row), window, cx)
+                        .into_element();
+                    let mut node = accesskit::Node::new(element.a11y_role().unwrap());
+                    element.write_a11y_info(&mut node);
+                    node
+                });
+                assert_eq!(node.role(), Role::ListItem);
+                assert_eq!(node.label(), label);
+            }
+        });
+    }
+}
diff --git a/crates/kit/Cargo.toml b/crates/kit/Cargo.toml
index 74e6fddc50..df7c2b2a2d 100644
--- a/crates/kit/Cargo.toml
+++ b/crates/kit/Cargo.toml
@@ -21,8 +21,10 @@ default = ["component", "assets"]
 component = ["dep:gpui-component"]
 # The default icon set for `gpui-component`, `gpui_kit::assets`.
 assets = ["dep:gpui-kit-assets"]
-# GPUI's test harness: `#[gpui_kit::test]`, `TestAppContext`, `VisualTestContext`.
-test-support = ["gpui/test-support"]
+# GPUI's test harness and native-platform rendering support.
+test-support = ["gpui/test-support", "gpui_platform/test-support"]
+# Frame-event instrumentation remains opt-in for performance builds.
+profiler = ["gpui/profiler"]
 inspector = ["gpui/inspector", "gpui-base/inspector", "gpui-component?/inspector"]
 decimal = ["component", "gpui-component/decimal"]
 tree-sitter = ["component", "gpui-component/tree-sitter"]
diff --git a/crates/kit/README.md b/crates/kit/README.md
index 6fa5a6f8cb..167802c77e 100644
--- a/crates/kit/README.md
+++ b/crates/kit/README.md
@@ -53,5 +53,7 @@ fn main() {
 The `gpui-component` features (`inspector`, `decimal`, `tree-sitter`,
 `tree-sitter-languages`, and each `tree-sitter-<language>`) are available on
 `gpui-kit` under the same names. `test-support` turns on GPUI's test harness
-for `#[gpui_kit::test]`, `TestAppContext` and `VisualTestContext`; enable it
-under `[dev-dependencies]`. See <https://gpui-kit.com> for the guides.
+for `#[gpui_kit::test]`, `TestAppContext`, `VisualTestContext`, and native-platform
+rendering support; enable it under `[dev-dependencies]`. The independent `profiler`
+feature enables GPUI frame-event instrumentation and is off by default.
+See <https://gpui-kit.com> for the guides.
diff --git a/crates/kit/tests/exports.rs b/crates/kit/tests/exports.rs
index c7fb4d9320..a8dccf9db1 100644
--- a/crates/kit/tests/exports.rs
+++ b/crates/kit/tests/exports.rs
@@ -102,3 +102,7 @@ mod component {
 mod assets {
     type Assets = gpui_kit::assets::Assets;
 }
+
+/// The opt-in facade feature enables GPUI's feature-gated profiler API.
+#[cfg(feature = "profiler")]
+use gpui_kit::profiler::WindowProfiler;
diff --git a/crates/story/src/stories/list_story.rs b/crates/story/src/stories/list_story.rs
index de7c411b47..2ddc737ae0 100644
--- a/crates/story/src/stories/list_story.rs
+++ b/crates/story/src/stories/list_story.rs
@@ -336,6 +336,17 @@ impl CompanyListDelegate {
 }
 
 impl ListDelegate for CompanyListDelegate {
+    fn item_accessibility_label(&self, index: IndexPath, _: &App) -> Option<SharedString> {
+        let company = self.matched_companies.get(index.section)?.get(index.row)?;
+        Some(
+            format!(
+                "{}, {}, {}",
+                company.name, company.last_done_str, company.change_percent_str
+            )
+            .into(),
+        )
+    }
+
     type Item = CompanyListItem;
 
     fn sections_count(&self, _: &App) -> usize {
diff --git a/website/DESIGN.md b/website/DESIGN.md
index 3a9f6d1abc..dd634dd1af 100644
--- a/website/DESIGN.md
+++ b/website/DESIGN.md
@@ -241,16 +241,32 @@ apps through PRs in [longbridge/gpui-kit-showcases](https://github.com/longbridg
   to the Vue app; no duplicated hard-coded app list.
 - **Screenshots show the complete window.** Authors must preserve all four corners
   and edges in a clear, tidy capture. Images are archived unchanged and referenced
-  using raw GitHub URLs pinned to the checked-out commit. Cards use a shared 16:10
-  area with `object-fit: contain`, retaining the whole image. Do not wrap them in
+  using raw GitHub URLs pinned to the checked-out commit. Cards use a shared 16:9
+  area with `object-fit: cover` and top-center positioning, filling the card edge
+  to edge. The archived image remains unchanged; previews may crop the bottom
+  or sides. Do not wrap them in
   `.mac-window` or add a second title bar.
 - **Featured is editorial.** Maintainers list app IDs in the catalog's root
   `featured.json` using project history, implementation, completeness, and quality.
   The array defines both selection and display order; app manifests have no
-  `featured` field. Featured apps appear first. Other apps
-  appear in a separate group sortable by first inclusion time or GitHub Stars.
-  Search and category filters apply to both groups. Failed or unavailable star
+  `featured` field. Featured apps appear first, six per page, and keep their editorial order.
+  The heading shows the total selection count; pagination remains independent
+  of All apps filters.
+  All apps includes the entire catalog, including Featured, with nine apps per page.
+  Search, category, and sort changes return to page one. Its search, category
+  filters, and sorting controls live below the All apps heading and only affect
+  that section. Use the site’s neutral tokens and control radii for a compact,
+  thin-bordered search/filter panel, with counts at the trailing section edge.
+  The section and controls remain visible when no apps match. Failed or unavailable star
   counts remain unknown and sort after known counts, never as invented zeroes.
+- **Card hierarchy.** Use image, name and author, description, platform/date row,
+  then a shared footer. Development status belongs beside the identity. Platform
+  text is unboxed on the left; dates use `YYYY/MM/DD` on the right. In the footer,
+  Commercial precedes the Lucide Star and compact count on the left. Globe and
+  GitHub icon links sit on the right with accessible names and tooltips. Do not
+  add an Open source label, Stars suffix, or Read story row; the image opens
+  available story details. Keep footer centers and colors aligned, and absorb
+  unequal description length before metadata so cards align within each row.
 - **Metadata freshness.** `publishedAt` records first inclusion in App Stories,
   not the application's original release date, and remains unchanged for updates.
   GitHub Stars are refreshed in the Showcase repository after merges and weekly,
@@ -261,7 +277,8 @@ apps through PRs in [longbridge/gpui-kit-showcases](https://github.com/longbridg
   route. The catalog’s shared Bun validator and renderer enforce the 10 KB limit,
   official-link allowlist, local media and product-only content rules. The catalog
   checkout’s locked dependencies must be installed before building.
-- **Review before publication.** Explain before the list that every merged app PR is listed, Featured is not
+- **Review before publication.** Keep a labeled selection-policy disclosure before
+  the list explaining that every merged app PR is listed, Featured is not
   guaranteed, and maintainers adjust Featured as apps evolve.
   The submission CTA links to the repository's PR instructions.
 - **Automatic publishing.** On approved changes merged to Showcase `main`, its
diff --git a/website/base/getting-started.md b/website/base/getting-started.md
index e561aef436..09ce3f7051 100644
--- a/website/base/getting-started.md
+++ b/website/base/getting-started.md
@@ -94,7 +94,7 @@ install the matching palette when their appearance mode changes.
 The examples used by this website also run as a native GPUI application:
 
 ```sh
-cargo run -p gpui-base --example components -- button
+cargo run -p gpui-base-examples -- button
 ```
 
 Replace `button` with a primitive slug from the [primitive catalog](./primitives/index.md). The website compiles the same showcase for `wasm32-unknown-unknown` and loads it on each primitive page.
diff --git a/website/base/motion.md b/website/base/motion.md
index 1e915c6fba..9520ca9d50 100644
--- a/website/base/motion.md
+++ b/website/base/motion.md
@@ -13,7 +13,7 @@ exampleKind: base
 Run the interactive companion for this guide:
 
 ```bash
-cargo run -p gpui-base --example motion
+cargo run -p gpui-base-examples --bin motion
 ```
 
 The example contains five separate demos. Use the tabs at the top to inspect one capability at a time.
diff --git a/website/base/primitives/accordion.md b/website/base/primitives/accordion.md
index 8212af68e1..abc1f86cf0 100644
--- a/website/base/primitives/accordion.md
+++ b/website/base/primitives/accordion.md
@@ -12,10 +12,10 @@ Like every `gpui-base` primitive, Accordion supplies behavior and semantic struc
 
 ## Example
 
-The [single native Cargo entrypoint](https://github.com/longbridge/gpui-kit/blob/main/crates/base/examples/components.rs) selects this primitive from the [shared showcase implementation](https://github.com/longbridge/gpui-kit/blob/main/crates/base/examples/showcase/mod.rs). The same showcase is compiled once for the WASM preview above.
+The [single native Cargo entrypoint](https://github.com/longbridge/gpui-kit/blob/main/crates/base/examples/native/src/bin/components.rs) selects this primitive from the [shared showcase implementation](https://github.com/longbridge/gpui-kit/blob/main/crates/base/examples/showcase/mod.rs). The same showcase is compiled once for the WASM preview above.
 
 ```bash
-cargo run -p gpui-base --example components -- accordion
+cargo run -p gpui-base-examples -- accordion
 ```
 
 ## Import
diff --git a/website/base/primitives/alert-dialog.md b/website/base/primitives/alert-dialog.md
index 0fb36ebad6..02b19522a8 100644
--- a/website/base/primitives/alert-dialog.md
+++ b/website/base/primitives/alert-dialog.md
@@ -12,10 +12,10 @@ Like every `gpui-base` primitive, Alert Dialog supplies behavior and semantic st
 
 ## Example
 
-The [single native Cargo entrypoint](https://github.com/longbridge/gpui-kit/blob/main/crates/base/examples/components.rs) selects this primitive from the [shared showcase implementation](https://github.com/longbridge/gpui-kit/blob/main/crates/base/examples/showcase/mod.rs). The same showcase is compiled once for the WASM preview above.
+The [single native Cargo entrypoint](https://github.com/longbridge/gpui-kit/blob/main/crates/base/examples/native/src/bin/components.rs) selects this primitive from the [shared showcase implementation](https://github.com/longbridge/gpui-kit/blob/main/crates/base/examples/showcase/mod.rs). The same showcase is compiled once for the WASM preview above.
 
 ```bash
-cargo run -p gpui-base --example components -- alert-dialog
+cargo run -p gpui-base-examples -- alert-dialog
 ```
 
 ## Import
diff --git a/website/base/primitives/avatar.md b/website/base/primitives/avatar.md
index 5409914809..d35b239904 100644
--- a/website/base/primitives/avatar.md
+++ b/website/base/primitives/avatar.md
@@ -12,10 +12,10 @@ Like every `gpui-base` primitive, Avatar supplies behavior and semantic structur
 
 ## Example
 
-The [single native Cargo entrypoint](https://github.com/longbridge/gpui-kit/blob/main/crates/base/examples/components.rs) selects this primitive from the [shared showcase implementation](https://github.com/longbridge/gpui-kit/blob/main/crates/base/examples/showcase/mod.rs). The same showcase is compiled once for the WASM preview above.
+The [single native Cargo entrypoint](https://github.com/longbridge/gpui-kit/blob/main/crates/base/examples/native/src/bin/components.rs) selects this primitive from the [shared showcase implementation](https://github.com/longbridge/gpui-kit/blob/main/crates/base/examples/showcase/mod.rs). The same showcase is compiled once for the WASM preview above.
 
 ```bash
-cargo run -p gpui-base --example components -- avatar
+cargo run -p gpui-base-examples -- avatar
 ```
 
 ## Import
diff --git a/website/base/primitives/button.md b/website/base/primitives/button.md
index ddf449d3bf..0b5f0ff8e9 100644
--- a/website/base/primitives/button.md
+++ b/website/base/primitives/button.md
@@ -12,10 +12,10 @@ Like every `gpui-base` primitive, Button supplies behavior and semantic structur
 
 ## Example
 
-The [single native Cargo entrypoint](https://github.com/longbridge/gpui-kit/blob/main/crates/base/examples/components.rs) selects this primitive from the [shared showcase implementation](https://github.com/longbridge/gpui-kit/blob/main/crates/base/examples/showcase/mod.rs). The same showcase is compiled once for the WASM preview above.
+The [single native Cargo entrypoint](https://github.com/longbridge/gpui-kit/blob/main/crates/base/examples/native/src/bin/components.rs) selects this primitive from the [shared showcase implementation](https://github.com/longbridge/gpui-kit/blob/main/crates/base/examples/showcase/mod.rs). The same showcase is compiled once for the WASM preview above.
 
 ```bash
-cargo run -p gpui-base --example components -- button
+cargo run -p gpui-base-examples -- button
 ```
 
 ## Import
diff --git a/website/base/primitives/calendar.md b/website/base/primitives/calendar.md
index dc89bd03fc..e413bb41a9 100644
--- a/website/base/primitives/calendar.md
+++ b/website/base/primitives/calendar.md
@@ -12,10 +12,10 @@ Like every `gpui-base` primitive, Calendar supplies behavior and semantic struct
 
 ## Example
 
-The [single native Cargo entrypoint](https://github.com/longbridge/gpui-kit/blob/main/crates/base/examples/components.rs) selects this primitive from the [shared showcase implementation](https://github.com/longbridge/gpui-kit/blob/main/crates/base/examples/showcase/mod.rs). The same showcase is compiled once for the WASM preview above.
+The [single native Cargo entrypoint](https://github.com/longbridge/gpui-kit/blob/main/crates/base/examples/native/src/bin/components.rs) selects this primitive from the [shared showcase implementation](https://github.com/longbridge/gpui-kit/blob/main/crates/base/examples/showcase/mod.rs). The same showcase is compiled once for the WASM preview above.
 
 ```bash
-cargo run -p gpui-base --example components -- calendar
+cargo run -p gpui-base-examples -- calendar
 ```
 
 ## Import
diff --git a/website/base/primitives/checkbox.md b/website/base/primitives/checkbox.md
index 5e67f464a8..a6ea27471f 100644
--- a/website/base/primitives/checkbox.md
+++ b/website/base/primitives/checkbox.md
@@ -12,10 +12,10 @@ Like every `gpui-base` primitive, Checkbox supplies behavior and semantic struct
 
 ## Example
 
-The [single native Cargo entrypoint](https://github.com/longbridge/gpui-kit/blob/main/crates/base/examples/components.rs) selects this primitive from the [shared showcase implementation](https://github.com/longbridge/gpui-kit/blob/main/crates/base/examples/showcase/mod.rs). The same showcase is compiled once for the WASM preview above.
+The [single native Cargo entrypoint](https://github.com/longbridge/gpui-kit/blob/main/crates/base/examples/native/src/bin/components.rs) selects this primitive from the [shared showcase implementation](https://github.com/longbridge/gpui-kit/blob/main/crates/base/examples/showcase/mod.rs). The same showcase is compiled once for the WASM preview above.
 
 ```bash
-cargo run -p gpui-base --example components -- checkbox
+cargo run -p gpui-base-examples -- checkbox
 ```
 
 ## Import
diff --git a/website/base/primitives/collapsible.md b/website/base/primitives/collapsible.md
index 75673c11ce..acac0d1a76 100644
--- a/website/base/primitives/collapsible.md
+++ b/website/base/primitives/collapsible.md
@@ -12,10 +12,10 @@ Like every `gpui-base` primitive, Collapsible supplies behavior and semantic str
 
 ## Example
 
-The [single native Cargo entrypoint](https://github.com/longbridge/gpui-kit/blob/main/crates/base/examples/components.rs) selects this primitive from the [shared showcase implementation](https://github.com/longbridge/gpui-kit/blob/main/crates/base/examples/showcase/mod.rs). The same showcase is compiled once for the WASM preview above.
+The [single native Cargo entrypoint](https://github.com/longbridge/gpui-kit/blob/main/crates/base/examples/native/src/bin/components.rs) selects this primitive from the [shared showcase implementation](https://github.com/longbridge/gpui-kit/blob/main/crates/base/examples/showcase/mod.rs). The same showcase is compiled once for the WASM preview above.
 
 ```bash
-cargo run -p gpui-base --example components -- collapsible
+cargo run -p gpui-base-examples -- collapsible
 ```
 
 ## Import
diff --git a/website/base/primitives/color-picker.md b/website/base/primitives/color-picker.md
index 4db7266b46..ff1b390d69 100644
--- a/website/base/primitives/color-picker.md
+++ b/website/base/primitives/color-picker.md
@@ -12,10 +12,10 @@ Like every `gpui-base` primitive, Color Picker supplies behavior and semantic st
 
 ## Example
 
-The [single native Cargo entrypoint](https://github.com/longbridge/gpui-kit/blob/main/crates/base/examples/components.rs) selects this primitive from the [shared showcase implementation](https://github.com/longbridge/gpui-kit/blob/main/crates/base/examples/showcase/mod.rs). The same showcase is compiled once for the WASM preview above.
+The [single native Cargo entrypoint](https://github.com/longbridge/gpui-kit/blob/main/crates/base/examples/native/src/bin/components.rs) selects this primitive from the [shared showcase implementation](https://github.com/longbridge/gpui-kit/blob/main/crates/base/examples/showcase/mod.rs). The same showcase is compiled once for the WASM preview above.
 
 ```bash
-cargo run -p gpui-base --example components -- color-picker
+cargo run -p gpui-base-examples -- color-picker
 ```
 
 ## Import
diff --git a/website/base/primitives/combobox.md b/website/base/primitives/combobox.md
index 65a2954c85..0e5a0c3c43 100644
--- a/website/base/primitives/combobox.md
+++ b/website/base/primitives/combobox.md
@@ -12,10 +12,10 @@ Like every `gpui-base` primitive, Combobox supplies behavior and semantic struct
 
 ## Example
 
-The [single native Cargo entrypoint](https://github.com/longbridge/gpui-kit/blob/main/crates/base/examples/components.rs) selects this primitive from the [shared showcase implementation](https://github.com/longbridge/gpui-kit/blob/main/crates/base/examples/showcase/mod.rs). The same showcase is compiled once for the WASM preview above.
+The [single native Cargo entrypoint](https://github.com/longbridge/gpui-kit/blob/main/crates/base/examples/native/src/bin/components.rs) selects this primitive from the [shared showcase implementation](https://github.com/longbridge/gpui-kit/blob/main/crates/base/examples/showcase/mod.rs). The same showcase is compiled once for the WASM preview above.
 
 ```bash
-cargo run -p gpui-base --example components -- combobox
+cargo run -p gpui-base-examples -- combobox
 ```
 
 ## Import
diff --git a/website/base/primitives/date-picker.md b/website/base/primitives/date-picker.md
index 83080112cd..17cb07f3e9 100644
--- a/website/base/primitives/date-picker.md
+++ b/website/base/primitives/date-picker.md
@@ -12,10 +12,10 @@ Like every `gpui-base` primitive, Date Picker supplies behavior and semantic str
 
 ## Example
 
-The [single native Cargo entrypoint](https://github.com/longbridge/gpui-kit/blob/main/crates/base/examples/components.rs) selects this primitive from the [shared showcase implementation](https://github.com/longbridge/gpui-kit/blob/main/crates/base/examples/showcase/mod.rs). The same showcase is compiled once for the WASM preview above.
+The [single native Cargo entrypoint](https://github.com/longbridge/gpui-kit/blob/main/crates/base/examples/native/src/bin/components.rs) selects this primitive from the [shared showcase implementation](https://github.com/longbridge/gpui-kit/blob/main/crates/base/examples/showcase/mod.rs). The same showcase is compiled once for the WASM preview above.
 
 ```bash
-cargo run -p gpui-base --example components -- date-picker
+cargo run -p gpui-base-examples -- date-picker
 ```
 
 ## Import
diff --git a/website/base/primitives/dialog.md b/website/base/primitives/dialog.md
index ecb37801b5..2402177dfe 100644
--- a/website/base/primitives/dialog.md
+++ b/website/base/primitives/dialog.md
@@ -12,10 +12,10 @@ Like every `gpui-base` primitive, Dialog supplies behavior and semantic structur
 
 ## Example
 
-The [single native Cargo entrypoint](https://github.com/longbridge/gpui-kit/blob/main/crates/base/examples/components.rs) selects this primitive from the [shared showcase implementation](https://github.com/longbridge/gpui-kit/blob/main/crates/base/examples/showcase/mod.rs). The same showcase is compiled once for the WASM preview above.
+The [single native Cargo entrypoint](https://github.com/longbridge/gpui-kit/blob/main/crates/base/examples/native/src/bin/components.rs) selects this primitive from the [shared showcase implementation](https://github.com/longbridge/gpui-kit/blob/main/crates/base/examples/showcase/mod.rs). The same showcase is compiled once for the WASM preview above.
 
 ```bash
-cargo run -p gpui-base --example components -- dialog
+cargo run -p gpui-base-examples -- dialog
 ```
 
 ## Import
diff --git a/website/base/primitives/editor.md b/website/base/primitives/editor.md
index 6283d6ef69..af2f1a52c9 100644
--- a/website/base/primitives/editor.md
+++ b/website/base/primitives/editor.md
@@ -100,5 +100,5 @@ the [`gpui-component` Editor](../../docs/components/editor.md).
 ## Runnable example
 
 ```bash
-cargo run -p gpui-base --example components -- editor
+cargo run -p gpui-base-examples -- editor
 ```
diff --git a/website/base/primitives/hover-card.md b/website/base/primitives/hover-card.md
index d25da80071..b6f00f6ae5 100644
--- a/website/base/primitives/hover-card.md
+++ b/website/base/primitives/hover-card.md
@@ -12,10 +12,10 @@ Like every `gpui-base` primitive, Hover Card supplies behavior and semantic stru
 
 ## Example
 
-The [single native Cargo entrypoint](https://github.com/longbridge/gpui-kit/blob/main/crates/base/examples/components.rs) selects this primitive from the [shared showcase implementation](https://github.com/longbridge/gpui-kit/blob/main/crates/base/examples/showcase/mod.rs). The same showcase is compiled once for the WASM preview above.
+The [single native Cargo entrypoint](https://github.com/longbridge/gpui-kit/blob/main/crates/base/examples/native/src/bin/components.rs) selects this primitive from the [shared showcase implementation](https://github.com/longbridge/gpui-kit/blob/main/crates/base/examples/showcase/mod.rs). The same showcase is compiled once for the WASM preview above.
 
 ```bash
-cargo run -p gpui-base --example components -- hover-card
+cargo run -p gpui-base-examples -- hover-card
 ```
 
 ## Import
diff --git a/website/base/primitives/input.md b/website/base/primitives/input.md
index ba1a7bd703..a12bf5ff01 100644
--- a/website/base/primitives/input.md
+++ b/website/base/primitives/input.md
@@ -81,7 +81,7 @@ theme, sizing, borders, prefix/suffix slots, and clear button, use the styled
 ## Runnable example
 
 ```bash
-cargo run -p gpui-base --example components -- input
+cargo run -p gpui-base-examples -- input
 ```
 
 The implementation is in
diff --git a/website/base/primitives/link.md b/website/base/primitives/link.md
index f2950475a3..593a714db6 100644
--- a/website/base/primitives/link.md
+++ b/website/base/primitives/link.md
@@ -12,10 +12,10 @@ Like every `gpui-base` primitive, Link supplies behavior and semantic structure
 
 ## Example
 
-The [single native Cargo entrypoint](https://github.com/longbridge/gpui-kit/blob/main/crates/base/examples/components.rs) selects this primitive from the [shared showcase implementation](https://github.com/longbridge/gpui-kit/blob/main/crates/base/examples/showcase/mod.rs). The same showcase is compiled once for the WASM preview above.
+The [single native Cargo entrypoint](https://github.com/longbridge/gpui-kit/blob/main/crates/base/examples/native/src/bin/components.rs) selects this primitive from the [shared showcase implementation](https://github.com/longbridge/gpui-kit/blob/main/crates/base/examples/showcase/mod.rs). The same showcase is compiled once for the WASM preview above.
 
 ```bash
-cargo run -p gpui-base --example components -- link
+cargo run -p gpui-base-examples -- link
 ```
 
 ## Import
diff --git a/website/base/primitives/nav-stack.md b/website/base/primitives/nav-stack.md
index e4ce2f848e..dc7eb644eb 100644
--- a/website/base/primitives/nav-stack.md
+++ b/website/base/primitives/nav-stack.md
@@ -12,10 +12,10 @@ Like every `gpui-base` primitive, Nav Stack supplies behavior and semantic struc
 
 ## Example
 
-The [single native Cargo entrypoint](https://github.com/longbridge/gpui-kit/blob/main/crates/base/examples/components.rs) selects this primitive from the [shared showcase implementation](https://github.com/longbridge/gpui-kit/blob/main/crates/base/examples/showcase/mod.rs). The same showcase is compiled once for the WASM preview above.
+The [single native Cargo entrypoint](https://github.com/longbridge/gpui-kit/blob/main/crates/base/examples/native/src/bin/components.rs) selects this primitive from the [shared showcase implementation](https://github.com/longbridge/gpui-kit/blob/main/crates/base/examples/showcase/mod.rs). The same showcase is compiled once for the WASM preview above.
 
 ```bash
-cargo run -p gpui-base --example components -- nav-stack
+cargo run -p gpui-base-examples -- nav-stack
 ```
 
 ## Import
diff --git a/website/base/primitives/number-input.md b/website/base/primitives/number-input.md
index e83cfd3ab0..dca8f6036e 100644
--- a/website/base/primitives/number-input.md
+++ b/website/base/primitives/number-input.md
@@ -12,10 +12,10 @@ Like every `gpui-base` primitive, Number Input supplies behavior and semantic st
 
 ## Example
 
-The [single native Cargo entrypoint](https://github.com/longbridge/gpui-kit/blob/main/crates/base/examples/components.rs) selects this primitive from the [shared showcase implementation](https://github.com/longbridge/gpui-kit/blob/main/crates/base/examples/showcase/mod.rs). The same showcase is compiled once for the WASM preview above.
+The [single native Cargo entrypoint](https://github.com/longbridge/gpui-kit/blob/main/crates/base/examples/native/src/bin/components.rs) selects this primitive from the [shared showcase implementation](https://github.com/longbridge/gpui-kit/blob/main/crates/base/examples/showcase/mod.rs). The same showcase is compiled once for the WASM preview above.
 
 ```bash
-cargo run -p gpui-base --example components -- number-input
+cargo run -p gpui-base-examples -- number-input
 ```
 
 ## Import
diff --git a/website/base/primitives/otp-input.md b/website/base/primitives/otp-input.md
index ea3fd5811e..c948f2f67e 100644
--- a/website/base/primitives/otp-input.md
+++ b/website/base/primitives/otp-input.md
@@ -12,10 +12,10 @@ Like every `gpui-base` primitive, OTP Input supplies behavior and semantic struc
 
 ## Example
 
-The [single native Cargo entrypoint](https://github.com/longbridge/gpui-kit/blob/main/crates/base/examples/components.rs) selects this primitive from the [shared showcase implementation](https://github.com/longbridge/gpui-kit/blob/main/crates/base/examples/showcase/mod.rs). The same showcase is compiled once for the WASM preview above.
+The [single native Cargo entrypoint](https://github.com/longbridge/gpui-kit/blob/main/crates/base/examples/native/src/bin/components.rs) selects this primitive from the [shared showcase implementation](https://github.com/longbridge/gpui-kit/blob/main/crates/base/examples/showcase/mod.rs). The same showcase is compiled once for the WASM preview above.
 
 ```bash
-cargo run -p gpui-base --example components -- otp-input
+cargo run -p gpui-base-examples -- otp-input
 ```
 
 ## Import
diff --git a/website/base/primitives/pagination.md b/website/base/primitives/pagination.md
index 1f7c300f9b..66c9d4b850 100644
--- a/website/base/primitives/pagination.md
+++ b/website/base/primitives/pagination.md
@@ -12,10 +12,10 @@ Like every `gpui-base` primitive, Pagination supplies behavior and semantic stru
 
 ## Example
 
-The [single native Cargo entrypoint](https://github.com/longbridge/gpui-kit/blob/main/crates/base/examples/components.rs) selects this primitive from the [shared showcase implementation](https://github.com/longbridge/gpui-kit/blob/main/crates/base/examples/showcase/mod.rs). The same showcase is compiled once for the WASM preview above.
+The [single native Cargo entrypoint](https://github.com/longbridge/gpui-kit/blob/main/crates/base/examples/native/src/bin/components.rs) selects this primitive from the [shared showcase implementation](https://github.com/longbridge/gpui-kit/blob/main/crates/base/examples/showcase/mod.rs). The same showcase is compiled once for the WASM preview above.
 
 ```bash
-cargo run -p gpui-base --example components -- pagination
+cargo run -p gpui-base-examples -- pagination
 ```
 
 ## Import
diff --git a/website/base/primitives/popover.md b/website/base/primitives/popover.md
index 35ee60b9f9..7131f7a5aa 100644
--- a/website/base/primitives/popover.md
+++ b/website/base/primitives/popover.md
@@ -12,10 +12,10 @@ Like every `gpui-base` primitive, Popover supplies behavior and semantic structu
 
 ## Example
 
-The [single native Cargo entrypoint](https://github.com/longbridge/gpui-kit/blob/main/crates/base/examples/components.rs) selects this primitive from the [shared showcase implementation](https://github.com/longbridge/gpui-kit/blob/main/crates/base/examples/showcase/mod.rs). The same showcase is compiled once for the WASM preview above.
+The [single native Cargo entrypoint](https://github.com/longbridge/gpui-kit/blob/main/crates/base/examples/native/src/bin/components.rs) selects this primitive from the [shared showcase implementation](https://github.com/longbridge/gpui-kit/blob/main/crates/base/examples/showcase/mod.rs). The same showcase is compiled once for the WASM preview above.
 
 ```bash
-cargo run -p gpui-base --example components -- popover
+cargo run -p gpui-base-examples -- popover
 ```
 
 ## Import
diff --git a/website/base/primitives/popup.md b/website/base/primitives/popup.md
index c2c8e0e49a..d21c61a1b3 100644
--- a/website/base/primitives/popup.md
+++ b/website/base/primitives/popup.md
@@ -10,10 +10,10 @@ order: 22
 
 ## Example
 
-The [single native Cargo entrypoint](https://github.com/longbridge/gpui-kit/blob/main/crates/base/examples/components.rs) selects this primitive from the [shared showcase implementation](https://github.com/longbridge/gpui-kit/blob/main/crates/base/examples/showcase/mod.rs). The same showcase is compiled once for the WASM preview above.
+The [single native Cargo entrypoint](https://github.com/longbridge/gpui-kit/blob/main/crates/base/examples/native/src/bin/components.rs) selects this primitive from the [shared showcase implementation](https://github.com/longbridge/gpui-kit/blob/main/crates/base/examples/showcase/mod.rs). The same showcase is compiled once for the WASM preview above.
 
 ```bash
-cargo run -p gpui-base --example components -- popup
+cargo run -p gpui-base-examples -- popup
 ```
 
 ## Import
diff --git a/website/base/primitives/progress.md b/website/base/primitives/progress.md
index c76f6ad8f2..5e178cfcd6 100644
--- a/website/base/primitives/progress.md
+++ b/website/base/primitives/progress.md
@@ -12,10 +12,10 @@ Like every `gpui-base` primitive, Progress supplies behavior and semantic struct
 
 ## Example
 
-The [single native Cargo entrypoint](https://github.com/longbridge/gpui-kit/blob/main/crates/base/examples/components.rs) selects this primitive from the [shared showcase implementation](https://github.com/longbridge/gpui-kit/blob/main/crates/base/examples/showcase/mod.rs). The same showcase is compiled once for the WASM preview above.
+The [single native Cargo entrypoint](https://github.com/longbridge/gpui-kit/blob/main/crates/base/examples/native/src/bin/components.rs) selects this primitive from the [shared showcase implementation](https://github.com/longbridge/gpui-kit/blob/main/crates/base/examples/showcase/mod.rs). The same showcase is compiled once for the WASM preview above.
 
 ```bash
-cargo run -p gpui-base --example components -- progress
+cargo run -p gpui-base-examples -- progress
 ```
 
 ## Import
diff --git a/website/base/primitives/radio-group.md b/website/base/primitives/radio-group.md
index 8a45fb8471..e5bac41d86 100644
--- a/website/base/primitives/radio-group.md
+++ b/website/base/primitives/radio-group.md
@@ -12,10 +12,10 @@ Like every `gpui-base` primitive, Radio Group supplies behavior and semantic str
 
 ## Example
 
-The [single native Cargo entrypoint](https://github.com/longbridge/gpui-kit/blob/main/crates/base/examples/components.rs) selects this primitive from the [shared showcase implementation](https://github.com/longbridge/gpui-kit/blob/main/crates/base/examples/showcase/mod.rs). The same showcase is compiled once for the WASM preview above.
+The [single native Cargo entrypoint](https://github.com/longbridge/gpui-kit/blob/main/crates/base/examples/native/src/bin/components.rs) selects this primitive from the [shared showcase implementation](https://github.com/longbridge/gpui-kit/blob/main/crates/base/examples/showcase/mod.rs). The same showcase is compiled once for the WASM preview above.
 
 ```bash
-cargo run -p gpui-base --example components -- radio-group
+cargo run -p gpui-base-examples -- radio-group
 ```
 
 ## Import
diff --git a/website/base/primitives/radio.md b/website/base/primitives/radio.md
index 5463962f6c..781450dc49 100644
--- a/website/base/primitives/radio.md
+++ b/website/base/primitives/radio.md
@@ -12,10 +12,10 @@ Like every `gpui-base` primitive, Radio supplies behavior and semantic structure
 
 ## Example
 
-The [single native Cargo entrypoint](https://github.com/longbridge/gpui-kit/blob/main/crates/base/examples/components.rs) selects this primitive from the [shared showcase implementation](https://github.com/longbridge/gpui-kit/blob/main/crates/base/examples/showcase/mod.rs). The same showcase is compiled once for the WASM preview above.
+The [single native Cargo entrypoint](https://github.com/longbridge/gpui-kit/blob/main/crates/base/examples/native/src/bin/components.rs) selects this primitive from the [shared showcase implementation](https://github.com/longbridge/gpui-kit/blob/main/crates/base/examples/showcase/mod.rs). The same showcase is compiled once for the WASM preview above.
 
 ```bash
-cargo run -p gpui-base --example components -- radio
+cargo run -p gpui-base-examples -- radio
 ```
 
 ## Import
diff --git a/website/base/primitives/resizable.md b/website/base/primitives/resizable.md
index 3d6f7a82e5..19ff1b7658 100644
--- a/website/base/primitives/resizable.md
+++ b/website/base/primitives/resizable.md
@@ -12,10 +12,10 @@ Like every `gpui-base` primitive, Resizable supplies behavior and semantic struc
 
 ## Example
 
-The [single native Cargo entrypoint](https://github.com/longbridge/gpui-kit/blob/main/crates/base/examples/components.rs) selects this primitive from the [shared showcase implementation](https://github.com/longbridge/gpui-kit/blob/main/crates/base/examples/showcase/mod.rs). The same showcase is compiled once for the WASM preview above.
+The [single native Cargo entrypoint](https://github.com/longbridge/gpui-kit/blob/main/crates/base/examples/native/src/bin/components.rs) selects this primitive from the [shared showcase implementation](https://github.com/longbridge/gpui-kit/blob/main/crates/base/examples/showcase/mod.rs). The same showcase is compiled once for the WASM preview above.
 
 ```bash
-cargo run -p gpui-base --example components -- resizable
+cargo run -p gpui-base-examples -- resizable
 ```
 
 ## Import
diff --git a/website/base/primitives/scrollbar.md b/website/base/primitives/scrollbar.md
index 02c2a88cad..655b6cdadc 100644
--- a/website/base/primitives/scrollbar.md
+++ b/website/base/primitives/scrollbar.md
@@ -19,7 +19,7 @@ design-system layer owns colors, geometry, timing, and entrance choreography.
 The native showcase and WASM preview use the same implementation:
 
 ```bash
-cargo run -p gpui-base --example components -- scrollbar
+cargo run -p gpui-base-examples -- scrollbar
 ```
 
 The source is available in
diff --git a/website/base/primitives/select.md b/website/base/primitives/select.md
index 027e7eec23..5e42f8e779 100644
--- a/website/base/primitives/select.md
+++ b/website/base/primitives/select.md
@@ -12,10 +12,10 @@ Like every `gpui-base` primitive, Select supplies behavior and semantic structur
 
 ## Example
 
-The [single native Cargo entrypoint](https://github.com/longbridge/gpui-kit/blob/main/crates/base/examples/components.rs) selects this primitive from the [shared showcase implementation](https://github.com/longbridge/gpui-kit/blob/main/crates/base/examples/showcase/mod.rs). The same showcase is compiled once for the WASM preview above.
+The [single native Cargo entrypoint](https://github.com/longbridge/gpui-kit/blob/main/crates/base/examples/native/src/bin/components.rs) selects this primitive from the [shared showcase implementation](https://github.com/longbridge/gpui-kit/blob/main/crates/base/examples/showcase/mod.rs). The same showcase is compiled once for the WASM preview above.
 
 ```bash
-cargo run -p gpui-base --example components -- select
+cargo run -p gpui-base-examples -- select
 ```
 
 ## Import
diff --git a/website/base/primitives/sheet.md b/website/base/primitives/sheet.md
index a6493ab7a0..9952b5dca8 100644
--- a/website/base/primitives/sheet.md
+++ b/website/base/primitives/sheet.md
@@ -12,10 +12,10 @@ Like every `gpui-base` primitive, Sheet supplies behavior and semantic structure
 
 ## Example
 
-The [single native Cargo entrypoint](https://github.com/longbridge/gpui-kit/blob/main/crates/base/examples/components.rs) selects this primitive from the [shared showcase implementation](https://github.com/longbridge/gpui-kit/blob/main/crates/base/examples/showcase/mod.rs). The same showcase is compiled once for the WASM preview above.
+The [single native Cargo entrypoint](https://github.com/longbridge/gpui-kit/blob/main/crates/base/examples/native/src/bin/components.rs) selects this primitive from the [shared showcase implementation](https://github.com/longbridge/gpui-kit/blob/main/crates/base/examples/showcase/mod.rs). The same showcase is compiled once for the WASM preview above.
 
 ```bash
-cargo run -p gpui-base --example components -- sheet
+cargo run -p gpui-base-examples -- sheet
 ```
 
 ## Import
diff --git a/website/base/primitives/slider.md b/website/base/primitives/slider.md
index c246b582fd..273fa36a00 100644
--- a/website/base/primitives/slider.md
+++ b/website/base/primitives/slider.md
@@ -12,10 +12,10 @@ Like every `gpui-base` primitive, Slider supplies behavior and semantic structur
 
 ## Example
 
-The [single native Cargo entrypoint](https://github.com/longbridge/gpui-kit/blob/main/crates/base/examples/components.rs) selects this primitive from the [shared showcase implementation](https://github.com/longbridge/gpui-kit/blob/main/crates/base/examples/showcase/mod.rs). The same showcase is compiled once for the WASM preview above.
+The [single native Cargo entrypoint](https://github.com/longbridge/gpui-kit/blob/main/crates/base/examples/native/src/bin/components.rs) selects this primitive from the [shared showcase implementation](https://github.com/longbridge/gpui-kit/blob/main/crates/base/examples/showcase/mod.rs). The same showcase is compiled once for the WASM preview above.
 
 ```bash
-cargo run -p gpui-base --example components -- slider
+cargo run -p gpui-base-examples -- slider
 ```
 
 ## Import
diff --git a/website/base/primitives/switch.md b/website/base/primitives/switch.md
index 0677d08a47..74bf24d644 100644
--- a/website/base/primitives/switch.md
+++ b/website/base/primitives/switch.md
@@ -12,10 +12,10 @@ Like every `gpui-base` primitive, Switch supplies behavior and semantic structur
 
 ## Example
 
-The [single native Cargo entrypoint](https://github.com/longbridge/gpui-kit/blob/main/crates/base/examples/components.rs) selects this primitive from the [shared showcase implementation](https://github.com/longbridge/gpui-kit/blob/main/crates/base/examples/showcase/mod.rs). The same showcase is compiled once for the WASM preview above.
+The [single native Cargo entrypoint](https://github.com/longbridge/gpui-kit/blob/main/crates/base/examples/native/src/bin/components.rs) selects this primitive from the [shared showcase implementation](https://github.com/longbridge/gpui-kit/blob/main/crates/base/examples/showcase/mod.rs). The same showcase is compiled once for the WASM preview above.
 
 ```bash
-cargo run -p gpui-base --example components -- switch
+cargo run -p gpui-base-examples -- switch
 ```
 
 ## Import
diff --git a/website/base/primitives/table.md b/website/base/primitives/table.md
index 992fac7e44..613544639a 100644
--- a/website/base/primitives/table.md
+++ b/website/base/primitives/table.md
@@ -12,10 +12,10 @@ Like every `gpui-base` primitive, Table supplies behavior and semantic structure
 
 ## Example
 
-The [single native Cargo entrypoint](https://github.com/longbridge/gpui-kit/blob/main/crates/base/examples/components.rs) selects this primitive from the [shared showcase implementation](https://github.com/longbridge/gpui-kit/blob/main/crates/base/examples/showcase/mod.rs). The same showcase is compiled once for the WASM preview above.
+The [single native Cargo entrypoint](https://github.com/longbridge/gpui-kit/blob/main/crates/base/examples/native/src/bin/components.rs) selects this primitive from the [shared showcase implementation](https://github.com/longbridge/gpui-kit/blob/main/crates/base/examples/showcase/mod.rs). The same showcase is compiled once for the WASM preview above.
 
 ```bash
-cargo run -p gpui-base --example components -- table
+cargo run -p gpui-base-examples -- table
 ```
 
 ## Import
diff --git a/website/base/primitives/tabs.md b/website/base/primitives/tabs.md
index c14c4abcba..90843399d5 100644
--- a/website/base/primitives/tabs.md
+++ b/website/base/primitives/tabs.md
@@ -12,10 +12,10 @@ Like every `gpui-base` primitive, Tabs supplies behavior and semantic structure
 
 ## Example
 
-The [single native Cargo entrypoint](https://github.com/longbridge/gpui-kit/blob/main/crates/base/examples/components.rs) selects this primitive from the [shared showcase implementation](https://github.com/longbridge/gpui-kit/blob/main/crates/base/examples/showcase/mod.rs). The same showcase is compiled once for the WASM preview above.
+The [single native Cargo entrypoint](https://github.com/longbridge/gpui-kit/blob/main/crates/base/examples/native/src/bin/components.rs) selects this primitive from the [shared showcase implementation](https://github.com/longbridge/gpui-kit/blob/main/crates/base/examples/showcase/mod.rs). The same showcase is compiled once for the WASM preview above.
 
 ```bash
-cargo run -p gpui-base --example components -- tabs
+cargo run -p gpui-base-examples -- tabs
 ```
 
 ## Import
diff --git a/website/base/primitives/textarea.md b/website/base/primitives/textarea.md
index b47a064cea..8eb154d31e 100644
--- a/website/base/primitives/textarea.md
+++ b/website/base/primitives/textarea.md
@@ -69,5 +69,5 @@ padding, and `InputEditorStyle`. For a styled control, see the
 ## Runnable example
 
 ```bash
-cargo run -p gpui-base --example components -- textarea
+cargo run -p gpui-base-examples -- textarea
 ```
diff --git a/website/base/primitives/toast.md b/website/base/primitives/toast.md
index cf20eacbab..b89c7c0103 100644
--- a/website/base/primitives/toast.md
+++ b/website/base/primitives/toast.md
@@ -12,10 +12,10 @@ Like every `gpui-base` primitive, Toast supplies behavior and semantic structure
 
 ## Example
 
-The [single native Cargo entrypoint](https://github.com/longbridge/gpui-kit/blob/main/crates/base/examples/components.rs) selects this primitive from the [shared showcase implementation](https://github.com/longbridge/gpui-kit/blob/main/crates/base/examples/showcase/mod.rs). The same showcase is compiled once for the WASM preview above.
+The [single native Cargo entrypoint](https://github.com/longbridge/gpui-kit/blob/main/crates/base/examples/native/src/bin/components.rs) selects this primitive from the [shared showcase implementation](https://github.com/longbridge/gpui-kit/blob/main/crates/base/examples/showcase/mod.rs). The same showcase is compiled once for the WASM preview above.
 
 ```bash
-cargo run -p gpui-base --example components -- toast
+cargo run -p gpui-base-examples -- toast
 ```
 
 ## Import
diff --git a/website/base/primitives/toggle-group.md b/website/base/primitives/toggle-group.md
index 94539f5de4..3aa464ac33 100644
--- a/website/base/primitives/toggle-group.md
+++ b/website/base/primitives/toggle-group.md
@@ -12,10 +12,10 @@ Like every `gpui-base` primitive, Toggle Group supplies behavior and semantic st
 
 ## Example
 
-The [single native Cargo entrypoint](https://github.com/longbridge/gpui-kit/blob/main/crates/base/examples/components.rs) selects this primitive from the [shared showcase implementation](https://github.com/longbridge/gpui-kit/blob/main/crates/base/examples/showcase/mod.rs). The same showcase is compiled once for the WASM preview above.
+The [single native Cargo entrypoint](https://github.com/longbridge/gpui-kit/blob/main/crates/base/examples/native/src/bin/components.rs) selects this primitive from the [shared showcase implementation](https://github.com/longbridge/gpui-kit/blob/main/crates/base/examples/showcase/mod.rs). The same showcase is compiled once for the WASM preview above.
 
 ```bash
-cargo run -p gpui-base --example components -- toggle-group
+cargo run -p gpui-base-examples -- toggle-group
 ```
 
 ## Import
diff --git a/website/base/primitives/toggle.md b/website/base/primitives/toggle.md
index 674f3c077c..4d5a47e825 100644
--- a/website/base/primitives/toggle.md
+++ b/website/base/primitives/toggle.md
@@ -12,10 +12,10 @@ Like every `gpui-base` primitive, Toggle supplies behavior and semantic structur
 
 ## Example
 
-The [single native Cargo entrypoint](https://github.com/longbridge/gpui-kit/blob/main/crates/base/examples/components.rs) selects this primitive from the [shared showcase implementation](https://github.com/longbridge/gpui-kit/blob/main/crates/base/examples/showcase/mod.rs). The same showcase is compiled once for the WASM preview above.
+The [single native Cargo entrypoint](https://github.com/longbridge/gpui-kit/blob/main/crates/base/examples/native/src/bin/components.rs) selects this primitive from the [shared showcase implementation](https://github.com/longbridge/gpui-kit/blob/main/crates/base/examples/showcase/mod.rs). The same showcase is compiled once for the WASM preview above.
 
 ```bash
-cargo run -p gpui-base --example components -- toggle
+cargo run -p gpui-base-examples -- toggle
 ```
 
 ## Import
diff --git a/website/base/primitives/tooltip.md b/website/base/primitives/tooltip.md
index 64c535390a..4b617083d8 100644
--- a/website/base/primitives/tooltip.md
+++ b/website/base/primitives/tooltip.md
@@ -12,10 +12,10 @@ Like every `gpui-base` primitive, Tooltip supplies behavior and semantic structu
 
 ## Example
 
-The [single native Cargo entrypoint](https://github.com/longbridge/gpui-kit/blob/main/crates/base/examples/components.rs) selects this primitive from the [shared showcase implementation](https://github.com/longbridge/gpui-kit/blob/main/crates/base/examples/showcase/mod.rs). The same showcase is compiled once for the WASM preview above.
+The [single native Cargo entrypoint](https://github.com/longbridge/gpui-kit/blob/main/crates/base/examples/native/src/bin/components.rs) selects this primitive from the [shared showcase implementation](https://github.com/longbridge/gpui-kit/blob/main/crates/base/examples/showcase/mod.rs). The same showcase is compiled once for the WASM preview above.
 
 ```bash
-cargo run -p gpui-base --example components -- tooltip
+cargo run -p gpui-base-examples -- tooltip
 ```
 
 ## Import
diff --git a/website/base/primitives/tree.md b/website/base/primitives/tree.md
index e3c1b33028..66422ae73a 100644
--- a/website/base/primitives/tree.md
+++ b/website/base/primitives/tree.md
@@ -12,10 +12,10 @@ Like every `gpui-base` primitive, Tree supplies behavior and semantic structure
 
 ## Example
 
-The [single native Cargo entrypoint](https://github.com/longbridge/gpui-kit/blob/main/crates/base/examples/components.rs) selects this primitive from the [shared showcase implementation](https://github.com/longbridge/gpui-kit/blob/main/crates/base/examples/showcase/mod.rs). The same showcase is compiled once for the WASM preview above.
+The [single native Cargo entrypoint](https://github.com/longbridge/gpui-kit/blob/main/crates/base/examples/native/src/bin/components.rs) selects this primitive from the [shared showcase implementation](https://github.com/longbridge/gpui-kit/blob/main/crates/base/examples/showcase/mod.rs). The same showcase is compiled once for the WASM preview above.
 
 ```bash
-cargo run -p gpui-base --example components -- tree
+cargo run -p gpui-base-examples -- tree
 ```
 
 ## Import
diff --git a/website/base/text-selection.md b/website/base/text-selection.md
index df78b2265c..2189ecb50f 100644
--- a/website/base/text-selection.md
+++ b/website/base/text-selection.md
@@ -176,7 +176,7 @@ For multiple runs, give each run a stable `document_order`. Input order is prese
 The [shared Text Selection showcase](https://github.com/longbridge/gpui-kit/blob/main/crates/base/examples/showcase/components/text_selection.rs) is the complete runnable example used by both the native command and the live Rust/WASM preview above:
 
 ```bash
-cargo run -p gpui-base --example components -- text-selection
+cargo run -p gpui-base-examples -- text-selection
 ```
 
 ## Complete Rust example
diff --git a/website/base/text-view.md b/website/base/text-view.md
index 90a3312ea5..8f2e0f72e0 100644
--- a/website/base/text-view.md
+++ b/website/base/text-view.md
@@ -128,5 +128,5 @@ The live preview and native command use the same Base-only source:
 <<< ../../crates/base/examples/showcase/components/text_view.rs{rust}
 
 ```bash
-cargo run -p gpui-base --example components -- text-view
+cargo run -p gpui-base-examples -- text-view
 ```
diff --git a/website/base/virtual-list.md b/website/base/virtual-list.md
index 1a7e6af479..61a9542990 100644
--- a/website/base/virtual-list.md
+++ b/website/base/virtual-list.md
@@ -133,7 +133,7 @@ The tradeoff is that the size table must exist before the first frame. For a mil
 ## Complete Rust example
 
 ```bash
-cargo run -p gpui-base --example components -- virtual-list
+cargo run -p gpui-base-examples -- virtual-list
 ```
 
 <<< ../../crates/base/examples/showcase/components/virtual_list.rs{rust}
diff --git a/website/docs/components/list.md b/website/docs/components/list.md
index c5b8c5d0f1..4467195596 100644
--- a/website/docs/components/list.md
+++ b/website/docs/components/list.md
@@ -491,3 +491,10 @@ impl ListDelegate for ContactListDelegate {
     }
 }
 ```
+
+## Accessible row names
+
+For composite rows, implement `ListDelegate::item_accessibility_label` to provide a concise
+name on the list-item container. Return `None` to leave the existing child
+semantics unchanged. The hook receives the current `IndexPath` and `App`; it does
+not change the row's visible content or selection behavior.
diff --git a/website/package.json b/website/package.json
index e72e4790cc..17789be51e 100644
--- a/website/package.json
+++ b/website/package.json
@@ -3,12 +3,12 @@
   "type": "module",
   "private": true,
   "scripts": {
-    "dev": "bun --bun astro dev",
-    "build": "bun --bun astro build && bunx pagefind --site dist",
+    "dev": "bunx --bun astro dev",
+    "build": "bunx --bun astro build && bunx pagefind --site dist",
     "test:showcases": "bun test tests/showcases.test.ts tests/showcase-browser.test.ts",
     "test:seo": "bun test tests/seo.test.ts",
-    "preview": "bun --bun astro preview",
-    "astro": "bun --bun astro"
+    "preview": "bunx --bun astro preview",
+    "astro": "bunx --bun astro"
   },
   "dependencies": {
     "@astrojs/markdown-remark": "^7.3.0",
diff --git a/website/src/components/AppSortSelect.vue b/website/src/components/AppSortSelect.vue
new file mode 100644
index 0000000000..5f136c09fd
--- /dev/null
+++ b/website/src/components/AppSortSelect.vue
@@ -0,0 +1,142 @@
+<template>
+    <div ref="root" class="app-sort" @focusout="onFocusOut">
+        <span :id="`${id}-label`" class="app-sort__label">{{ label }}</span>
+        <div class="app-sort__control">
+            <button
+                ref="trigger"
+                class="app-sort__trigger"
+                type="button"
+                aria-haspopup="listbox"
+                :aria-expanded="open"
+                :aria-controls="`${id}-options`"
+                :aria-labelledby="`${id}-label ${id}-value`"
+                @click="open ? close() : show()"
+                @keydown="onTriggerKey"
+            >
+                <span :id="`${id}-value`">{{ selectedLabel }}</span>
+                <ChevronDown aria-hidden="true" />
+            </button>
+            <div
+                v-if="open"
+                :id="`${id}-options`"
+                ref="listbox"
+                class="app-sort__options"
+                :data-side="opensAbove ? 'top' : 'bottom'"
+                role="listbox"
+                tabindex="-1"
+                :aria-labelledby="`${id}-label`"
+                :aria-activedescendant="`${id}-option-${activeIndex}`"
+                @keydown="onListKey"
+            >
+                <div
+                    v-for="(option, index) in options"
+                    :id="`${id}-option-${index}`"
+                    :key="option.value"
+                    class="app-sort__option"
+                    role="option"
+                    :aria-selected="option.value === modelValue"
+                    :data-active="index === activeIndex"
+                    @pointermove="activeIndex = index"
+                    @pointerdown.prevent
+                    @click="choose(index)"
+                >
+                    <Check :class="{ 'app-sort__check--hidden': option.value !== modelValue }" aria-hidden="true" />
+                    {{ option.label }}
+                </div>
+            </div>
+        </div>
+    </div>
+</template>
+
+<script setup lang="ts">
+import { computed, nextTick, onMounted, onUnmounted, ref } from "vue";
+import { Check, ChevronDown } from "lucide-vue-next";
+
+const props = defineProps<{
+    id: string;
+    label: string;
+    modelValue: string;
+    options: { value: string; label: string }[];
+}>();
+const emit = defineEmits<{ "update:modelValue": [value: string] }>();
+const root = ref<HTMLElement>();
+const trigger = ref<HTMLButtonElement>();
+const listbox = ref<HTMLElement>();
+const open = ref(false);
+const opensAbove = ref(false);
+const activeIndex = ref(0);
+const selectedLabel = computed(() => props.options.find(option => option.value === props.modelValue)?.label ?? "");
+
+async function show(index = props.options.findIndex(option => option.value === props.modelValue)) {
+    if (!props.options.length) return;
+    activeIndex.value = Math.max(0, index);
+    const bounds = trigger.value?.getBoundingClientRect();
+    // Match the relative row geometry when deciding which viewport edge has room.
+    const rem = parseFloat(getComputedStyle(document.documentElement).fontSize);
+    const menuHeight = (props.options.length * 2 + 0.75) * rem;
+    opensAbove.value = !!bounds && innerHeight - bounds.bottom < menuHeight && bounds.top > menuHeight;
+    open.value = true;
+    await nextTick();
+    if (open.value) listbox.value?.focus();
+}
+function close(restoreFocus = false) {
+    open.value = false;
+    if (restoreFocus) trigger.value?.focus();
+}
+function choose(index: number) {
+    const option = props.options[index];
+    if (!option) return;
+    emit("update:modelValue", option.value);
+    close(true);
+}
+function onTriggerKey(event: KeyboardEvent) {
+    if (!["ArrowDown", "ArrowUp", "Home", "End"].includes(event.key)) return;
+    event.preventDefault();
+    show(event.key === "Home" ? 0 : event.key === "End" ? props.options.length - 1 : undefined);
+}
+function onListKey(event: KeyboardEvent) {
+    if (event.key === "Tab") { close(true); return; }
+    if (event.key === "Escape") { event.preventDefault(); event.stopPropagation(); close(true); return; }
+    if (["Enter", " "].includes(event.key)) { event.preventDefault(); choose(activeIndex.value); return; }
+    const count = props.options.length;
+    if (["ArrowDown", "ArrowUp", "Home", "End"].includes(event.key)) {
+        event.preventDefault();
+        activeIndex.value = event.key === "Home" ? 0 : event.key === "End" ? count - 1
+            : (activeIndex.value + (event.key === "ArrowDown" ? 1 : -1) + count) % count;
+    } else if (event.key.length === 1 && !event.ctrlKey && !event.metaKey && !event.altKey) {
+        const index = props.options.findIndex(option => option.label.toLocaleLowerCase().startsWith(event.key.toLocaleLowerCase()));
+        if (index !== -1) activeIndex.value = index;
+    }
+}
+function onOutsidePointer(event: PointerEvent) {
+    if (!root.value?.contains(event.target as Node)) close();
+}
+function onFocusOut(event: FocusEvent) {
+    if (!root.value?.contains(event.relatedTarget as Node | null)) close();
+}
+function onResize() { if (open.value) close(true); }
+onMounted(() => {
+    document.addEventListener("pointerdown", onOutsidePointer);
+    window.addEventListener("resize", onResize);
+});
+onUnmounted(() => {
+    document.removeEventListener("pointerdown", onOutsidePointer);
+    window.removeEventListener("resize", onResize);
+});
+</script>
+
+<style scoped>
+.app-sort { min-width: 0; }
+.app-sort__control { position: relative; }
+.app-sort__label { display: block; margin-bottom: 0.375rem; font-size: 0.75rem; font-weight: 550; line-height: 1; }
+.app-sort__trigger { display: flex; align-items: center; justify-content: space-between; gap: 0.5rem; width: 100%; min-height: 2rem; padding: 0.25rem 0.5rem; border: 1px solid var(--border); border-radius: var(--radius-control); background: var(--card); color: var(--foreground); text-align: start; font: inherit; font-size: 0.8125rem; line-height: 1.5; cursor: pointer; }
+.app-sort__trigger:hover, .app-sort__trigger[aria-expanded="true"] { border-color: var(--brand-line); background: var(--secondary); }
+.app-sort__trigger > svg { color: var(--muted-foreground); }
+.app-sort__trigger:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; }
+.app-sort__options { position: absolute; z-index: 30; inset-inline: 0; top: calc(100% + 0.25rem); padding: 0.25rem; border: 1px solid var(--border); border-radius: var(--radius-control); background: var(--popover); color: var(--popover-foreground); box-shadow: var(--shadow-panel); outline: none; }
+.app-sort__options[data-side="top"] { top: auto; bottom: calc(100% + 0.25rem); }
+.app-sort__option { display: flex; align-items: center; gap: 0.5rem; min-height: 2rem; padding: 0.25rem 0.5rem; border-radius: var(--radius-control); font-size: 0.8125rem; line-height: 1.5; cursor: pointer; }
+.app-sort__option[data-active="true"] { background: var(--secondary); color: var(--foreground); }
+.app-sort__check--hidden { visibility: hidden; }
+.app-sort svg { display: block; flex-shrink: 0; width: 0.875rem; height: 0.875rem; }
+</style>
diff --git a/website/src/components/AppsApp.vue b/website/src/components/AppsApp.vue
index 3f47700c6b..ba14969ed0 100644
--- a/website/src/components/AppsApp.vue
+++ b/website/src/components/AppsApp.vue
@@ -4,8 +4,11 @@
             <span class="apps-kicker">{{ copy.kicker }}</span>
             <h1>{{ copy.title }}</h1>
             <p class="apps-lead">{{ copy.lead }}</p>
-            <p class="apps-policy">{{ copy.selectionPolicy }}</p>
-            <p class="apps-policy">{{ copy.rankingPolicy }}</p>
+            <details class="apps-policy">
+                <summary>{{ copy.selectionLabel }}</summary>
+                <p>{{ copy.selectionPolicy }}</p>
+                <p>{{ copy.rankingPolicy }}</p>
+            </details>
             <ul class="apps-signals">
                 <li><Boxes :size="15" /> {{ copy.signalCount }}</li>
                 <li><Monitor :size="15" /> macOS / Windows / Linux</li>
@@ -13,77 +16,98 @@
             </ul>
         </div>
 
-        <div class="apps-toolbar">
-            <label class="apps-search">
-                <span>{{ copy.searchLabel }}</span>
-                <input v-model="query" type="search" :placeholder="copy.searchPlaceholder" />
-            </label>
-            <label class="apps-sort">
-                <span>{{ copy.sortLabel }}</span>
-                <select v-model="sort">
-                    <option value="newest">{{ copy.newest }}</option>
-                    <option value="stars">{{ copy.mostStars }}</option>
-                </select>
-            </label>
-        </div>
-
-        <div class="apps-filter" role="group" :aria-label="copy.filterLabel">
-            <button
-                v-for="category in categories"
-                :key="category.id"
-                type="button"
-                class="apps-filter__chip"
-                :aria-pressed="String(category.id === active)"
-                @click="active = category.id"
-            >
-                {{ category.label }}
-                <span class="apps-filter__count">{{ category.count }}</span>
-            </button>
-        </div>
-
-        <p class="apps-results" aria-live="polite">{{ copy.results(groups.featured.length + groups.community.length) }}</p>
         <section v-for="section in sections" :key="section.id" class="apps-section" :aria-labelledby="`apps-${section.id}`">
-            <h2 :id="`apps-${section.id}`">{{ section.title }} <span>{{ section.apps.length }}</span></h2>
+            <h2 :id="`apps-${section.id}`">{{ section.title }} <span>{{ section.total }}</span></h2>
             <p class="apps-section__lead">{{ section.description }}</p>
+            <div v-if="section.id === 'all'" class="apps-browser">
+                <div class="apps-toolbar">
+                    <label class="apps-search">
+                        <span class="apps-field-label">{{ copy.searchLabel }}</span>
+                        <span class="apps-search__control">
+                            <Search aria-hidden="true" />
+                            <input v-model="query" type="search" :placeholder="copy.searchPlaceholder" />
+                        </span>
+                    </label>
+                    <AppSortSelect
+                        id="apps-sort"
+                        v-model="sort"
+                        class="apps-sort"
+                        :label="copy.sortLabel"
+                        :options="[{ value: 'newest', label: copy.newest }, { value: 'stars', label: copy.mostStars }]"
+                    />
+                </div>
+                <div class="apps-filter" role="group" :aria-label="copy.filterLabel">
+                    <button
+                        v-for="category in categories"
+                        :key="category.id"
+                        type="button"
+                        class="apps-filter__chip"
+                        :aria-pressed="String(category.id === active)"
+                        @click="active = category.id"
+                    >
+                        {{ category.label }}
+                        <span class="apps-filter__count">{{ category.count }}</span>
+                    </button>
+                    <button type="button" class="apps-reset" :disabled="!hasFilters" @click="clearFilters">{{ copy.clearFilters }}</button>
+                </div>
+                <p class="apps-results sr-only" role="status">{{ copy.results(filteredApps.length) }}</p>
+            </div>
             <div class="apps-grid">
-            <article v-for="app in section.apps" :key="app.id" class="app-card">
-                <a
-                    class="app-card__shot"
-                    :href="app.hasReadme ? detailUrl(app.id) : (app.website ?? app.source)"
-                    :target="app.hasReadme ? undefined : '_blank'"
-                    rel="noopener noreferrer"
-                    :aria-label="app.name"
-                >
-                    <img :src="app.image" :alt="app.name" loading="lazy" decoding="async" />
-                </a>
-                <div class="app-card__body">
-                    <h3 class="app-card__name">{{ app.name }}</h3>
-                    <p class="app-card__author">{{ app.author }}</p>
-                    <p class="app-card__blurb">{{ app.description }}</p>
-                    <ul class="app-card__meta">
-                        <li>{{ app.platforms.join(" / ") }}</li>
-                        <li>{{ app.source ? copy.openSource : copy.commercial }}</li>
-                        <li v-if="app.stars !== null" :title="app.starsUpdatedAt ? `${copy.starsUpdated} ${app.starsUpdatedAt.slice(0, 10)}` : undefined">★ {{ app.stars.toLocaleString() }} GitHub Stars</li>
-                        <li v-if="app.publishedAt"><time :datetime="app.publishedAt">{{ copy.published }} {{ app.publishedAt.slice(0, 10) }}</time></li>
-                        <li v-if="app.building">{{ copy.building }}</li>
-                    </ul>
-                    <div class="app-card__links">
-                        <a v-if="app.hasReadme" :href="detailUrl(app.id)">{{ copy.details }} <ArrowRight :size="13" /></a>
-                        <a v-if="app.website" :href="app.website" target="_blank" rel="noopener noreferrer">
-                            {{ copy.visit }} <ArrowUpRight :size="13" />
-                        </a>
-                        <a v-if="app.source" :href="app.source" target="_blank" rel="noopener noreferrer">
-                            {{ copy.sourceLink }} <ArrowUpRight :size="13" />
-                        </a>
+                <article v-for="app in section.apps" :key="app.id" class="app-card">
+                    <a
+                        class="app-card__shot"
+                        :href="app.hasReadme ? detailUrl(app.id) : (app.website ?? app.source)"
+                        :target="app.hasReadme ? undefined : '_blank'"
+                        rel="noopener noreferrer"
+                        :aria-label="app.name"
+                    >
+                        <img :src="app.image" :alt="app.name" loading="lazy" decoding="async" />
+                    </a>
+                    <div class="app-card__body">
+                        <div class="app-card__header">
+                            <div class="app-card__identity">
+                                <h3 class="app-card__name">{{ app.name }}</h3>
+                                <p class="app-card__author">{{ app.author }}</p>
+                            </div>
+                            <span v-if="app.building" class="app-card__status">{{ copy.building }}</span>
+                        </div>
+                        <p class="app-card__blurb">{{ app.description }}</p>
+                        <div class="app-card__platform-row">
+                            <ul class="app-card__meta">
+                                <li>{{ app.platforms.join(" / ") }}</li>
+                            </ul>
+                            <time v-if="app.publishedAt" :datetime="app.publishedAt" :title="`${copy.published} ${formatDate(app.publishedAt)}`">{{ formatDate(app.publishedAt) }}</time>
+                        </div>
+                        <div class="app-card__footer">
+                            <div class="app-card__footer-start">
+                                <span v-if="!app.source" class="app-card__commercial">{{ copy.commercial }}</span>
+                                <span class="app-card__stats inline-flex items-center" role="img" v-if="app.stars !== null" :aria-label="`${app.stars.toLocaleString()} GitHub Stars`" :title="app.starsUpdatedAt ? `${copy.starsUpdated} ${app.starsUpdatedAt.slice(0, 10)}` : undefined"><Star aria-hidden="true" /><span>{{ formatStars(app.stars) }}</span></span>
+                            </div>
+                            <div class="app-card__links">
+                                <a v-if="app.website" class="app-card__icon-link" :href="app.website" :aria-label="`${app.name} — ${copy.visit}`" :title="copy.visit" target="_blank" rel="noopener noreferrer">
+                                    <Globe :size="16" aria-hidden="true" />
+                                </a>
+                                <a v-if="app.source" class="app-card__icon-link" :href="app.source" :aria-label="`${app.name} — ${copy.sourceLink}`" :title="copy.sourceLink" target="_blank" rel="noopener noreferrer">
+                                    <Github :size="16" aria-hidden="true" />
+                                </a>
+                            </div>
+                        </div>
                     </div>
-                </div>
-            </article>
+                </article>
+            </div>
+            <nav v-if="section.totalPages > 1" class="apps-pagination" :aria-label="section.id === 'featured' ? copy.featuredPagination : copy.allPagination">
+                <span class="apps-pagination__status" role="status">{{ copy.pageStatus(section.page, section.totalPages) }}</span>
+                <button type="button" :disabled="section.page === 1" :aria-label="copy.previousPage" :title="copy.previousPage" @click="setPage(section.id, section.page - 1)"><ChevronLeft aria-hidden="true" /></button>
+                <button v-for="page in section.totalPages" :key="page" type="button" :aria-label="copy.pageLabel(page)" :aria-current="section.page === page ? 'page' : undefined" @click="setPage(section.id, page)">{{ page }}</button>
+                <button type="button" :disabled="section.page === section.totalPages" :aria-label="copy.nextPage" :title="copy.nextPage" @click="setPage(section.id, section.page + 1)"><ChevronRight aria-hidden="true" /></button>
+            </nav>
+            <div v-if="section.id === 'all' && !filteredApps.length" class="apps-empty">
+                <SearchX aria-hidden="true" />
+                <h3>{{ copy.empty }}</h3>
+                <p>{{ copy.emptyHint }}</p>
+                <button type="button" @click="clearFilters">{{ copy.clearFilters }}</button>
             </div>
         </section>
-        <div v-if="!groups.featured.length && !groups.community.length" class="apps-empty">
-            <p>{{ copy.empty }}</p>
-            <button type="button" @click="query = ''; active = 'all'">{{ copy.clearFilters }}</button>
-        </div>
 
         <div class="apps-cta">
             <h2>{{ copy.ctaTitle }}</h2>
@@ -101,9 +125,10 @@
 </template>
 
 <script setup lang="ts">
-import { selectShowcases } from "../lib/showcase-browser.ts";
-import { computed, ref } from "vue";
-import { ArrowRight, ArrowUpRight, Boxes, Github, Monitor } from "lucide-vue-next";
+import AppSortSelect from "./AppSortSelect.vue";
+import { selectShowcases, paginateFeatured, paginateAll } from "../lib/showcase-browser.ts";
+import { computed, ref, watch } from "vue";
+import { ArrowRight, Boxes, ChevronLeft, ChevronRight, Github, Globe, Monitor, Search, SearchX, Star } from "lucide-vue-next";
 
 interface ShowcaseApp {
     id: string; name: string; author: string; hasReadme: boolean; category: string; platforms: string[];
@@ -114,6 +139,9 @@ interface ShowcaseApp {
 
 const props = defineProps<{ lang: 'en' | 'zh-CN'; apps: ShowcaseApp[] }>();
 const apps = props.apps;
+const starFormatter = new Intl.NumberFormat("en", { notation: "compact", maximumFractionDigits: 1 });
+const formatDate = (date: string) => date.slice(0, 10).replaceAll("-", "/");
+const formatStars = (stars: number) => starFormatter.format(stars);
 const detailUrl = (id: string) => `${props.lang === "zh-CN" ? "/zh-CN" : ""}/apps/${id}`;
 
 const isZh = computed(() => props.lang === 'zh-CN');
@@ -130,6 +158,12 @@ const CATEGORY_LABELS: Record<string, { en: string; zh: string }> = {
 const active = ref("all");
 const query = ref("");
 const sort = ref("newest");
+const featuredPage = ref(1);
+const allPage = ref(1);
+watch([query, active, sort], () => { allPage.value = 1; });
+const featured = computed(() => paginateFeatured(apps, featuredPage.value));
+const hasFilters = computed(() => query.value.trim() !== "" || active.value !== "all");
+const clearFilters = () => { query.value = ""; active.value = "all"; };
 
 const categories = computed(() =>
     Object.entries(CATEGORY_LABELS).map(([id, label]) => ({
@@ -139,88 +173,137 @@ const categories = computed(() =>
     })),
 );
 
-const groups = computed(() => selectShowcases(apps, { query: query.value, category: active.value, sort: sort.value }));
+const filteredApps = computed(() => selectShowcases(
+    apps,
+    { query: query.value, category: active.value, sort: sort.value },
+).all);
+const all = computed(() => paginateAll(filteredApps.value, allPage.value));
 const sections = computed(() => [
-    { id: "featured", title: copy.value.featured, description: copy.value.featuredLead, apps: groups.value.featured },
-    { id: "community", title: copy.value.community, description: copy.value.communityLead, apps: groups.value.community },
-].filter(section => section.apps.length));
+    { id: "featured", title: copy.value.featured, description: copy.value.featuredLead, ...featured.value },
+    { id: "all", title: copy.value.community, description: copy.value.communityLead, ...all.value },
+].filter(section => section.id === "all" || section.apps.length));
+
+function setPage(section: string, page: number) {
+    if (section === "featured") featuredPage.value = page;
+    else allPage.value = page;
+}
 
 const copy = computed(() =>
     isZh.value
-        ? { details: "查看详情", starsUpdated: "Stars 更新于", featured: "Featured · 精选应用", featuredLead: "由维护者挑选，展示完整、优质的应用案例。", community: "更多应用", communityLead: "探索社区应用，找到适合你的工具。GitHub Stars 每周及案例 PR 合并后更新。", searchLabel: "搜索应用", searchPlaceholder: "搜索名称、简介、平台或作者…", sortLabel: "更多应用排序", newest: "最新发布", mostStars: "GitHub Stars 最多", published: "发布于", results: (count: number) => `找到 ${count} 个应用`, empty: "没有找到匹配的应用。", clearFilters: "清除筛选", kicker: "应用案例", title: "用 GPUI Kit 做出来的真实应用。", lead: "下面每一个都基于 GPUI Kit 构建，是人们真正下载并每天使用的桌面软件——从生产环境的交易终端，到数据库客户端、终端与系统工具。", selectionPolicy: "向 Showcase 仓库提交 PR，审核合并后，应用都会列在 App Stories 中，但不保证进入 Featured。", rankingPolicy: "Featured 由维护者结合项目历史、实现情况、完整度与品质挑选。我们会根据各应用后续更新和整体情况微调名单，尽量展示更完整、有代表性的应用。其他应用可按发布时间或 GitHub Stars 排序，也可搜索。", signalCount: `${apps.length} 个应用`, signalLicense: "开源与商业产品", filterLabel: "按类别筛选", openSource: "开源", commercial: "商业产品", building: "开发中", visit: "官网", sourceLink: "源码", ctaTitle: "你也用 GPUI Kit 做了应用？", ctaLead: "请在 Showcase 仓库提交 PR，包含应用清单和清晰、完整、整洁的窗口截图。审核合并后自动列在本页，Featured 由维护者另行挑选。", ctaAction: "提交你的应用" }
-        : { details: "View details", starsUpdated: "Stars updated", featured: "Featured", featuredLead: "Complete, carefully crafted apps selected by the maintainers.", community: "More apps", communityLead: "Explore apps from the community. GitHub Stars refresh weekly and after Showcase PRs merge.", searchLabel: "Search apps", searchPlaceholder: "Search names, descriptions, platforms or authors…", sortLabel: "Sort more apps", newest: "Newest published", mostStars: "Most GitHub Stars", published: "Published", results: (count: number) => `${count} apps found`, empty: "No apps match your search.", clearFilters: "Clear filters", kicker: "App Stories", title: "Real apps, shipped with GPUI Kit.", lead: "Every app below is built on GPUI Kit — desktop software people download and use every day, from a production trading terminal to database clients, terminals and system utilities.", selectionPolicy: "Every app accepted through a merged PR in the Showcase repository is listed in App Stories. A listing does not guarantee a place in Featured.", rankingPolicy: "Maintainers select Featured apps based on project history, implementation, completeness and quality, and revisit the selection as apps evolve to highlight complete, representative examples. Browse other apps by publication date or GitHub Stars, or search the collection.", signalCount: `${apps.length} apps`, signalLicense: "Open source and commercial", filterLabel: "Filter by category", openSource: "Open source", commercial: "Commercial", building: "In development", visit: "Website", sourceLink: "Source", ctaTitle: "Built something with GPUI Kit?", ctaLead: "Open a PR in the Showcase repository with your app manifest and clear, complete, tidy window screenshots. Every merged app PR is published here automatically; maintainers select Featured apps separately.", ctaAction: "Submit your app" },
+        ? { featuredPagination: "精选应用分页", allPagination: "全部应用分页", previousPage: "上一页", nextPage: "下一页", pageLabel: (page: number) => `第 ${page} 页`, pageStatus: (page: number, total: number) => `第 ${page} / ${total} 页`, selectionLabel: "应用收录与精选规则", emptyHint: "试试其他关键词或分类。", starsUpdated: "Stars 更新于", featured: "Featured · 精选应用", featuredLead: "由维护者挑选，展示完整、优质的应用案例。", community: "全部应用", communityLead: "探索社区应用，找到适合你的工具。GitHub Stars 每周及案例 PR 合并后更新。", searchLabel: "搜索应用", searchPlaceholder: "名称、作者、平台…", sortLabel: "应用排序", newest: "最新发布", mostStars: "GitHub Stars 最多", published: "发布于", results: (count: number) => `找到 ${count} 个应用`, empty: "没有找到匹配的应用。", clearFilters: "清除筛选", kicker: "应用案例", title: "用 GPUI Kit 做出来的真实应用。", lead: "探索基于 GPUI Kit 构建的桌面应用，从交易终端、开发工具到日常效率软件。", selectionPolicy: "向 Showcase 仓库提交 PR，审核合并后，应用都会列在 App Stories 中，但不保证进入 Featured。", rankingPolicy: "Featured 由维护者结合项目历史、实现情况、完整度与品质挑选。我们会根据各应用后续更新和整体情况微调名单，尽量展示更完整、有代表性的应用。全部应用可按发布时间或 GitHub Stars 排序，也可搜索。", signalCount: `${apps.length} 个应用`, signalLicense: "开源与商业产品", filterLabel: "按类别筛选", commercial: "商业产品", building: "开发中", visit: "官网", sourceLink: "源码", ctaTitle: "你也用 GPUI Kit 做了应用？", ctaLead: "请在 Showcase 仓库提交 PR，包含应用清单和清晰、完整、整洁的窗口截图。审核合并后自动列在本页，Featured 由维护者另行挑选。", ctaAction: "提交你的应用" }
+        : { featuredPagination: "Featured apps pagination", allPagination: "All apps pagination", previousPage: "Previous page", nextPage: "Next page", pageLabel: (page: number) => `Page ${page}`, pageStatus: (page: number, total: number) => `Page ${page} of ${total}`, selectionLabel: "How apps are selected", emptyHint: "Try another keyword or category.", starsUpdated: "Stars updated", featured: "Featured", featuredLead: "Complete, carefully crafted apps selected by the maintainers.", community: "All apps", communityLead: "Explore apps from the community. GitHub Stars refresh weekly and after Showcase PRs merge.", searchLabel: "Search apps", searchPlaceholder: "Name, author, platform…", sortLabel: "Sort apps", newest: "Newest published", mostStars: "Most GitHub Stars", published: "Published", results: (count: number) => `${count} ${count === 1 ? "app" : "apps"} found`, empty: "No apps match your search.", clearFilters: "Clear filters", kicker: "App Stories", title: "Real apps, shipped with GPUI Kit.", lead: "Explore desktop apps built with GPUI Kit, from trading terminals and developer tools to everyday productivity software.", selectionPolicy: "Every app accepted through a merged PR in the Showcase repository is listed in App Stories. A listing does not guarantee a place in Featured.", rankingPolicy: "Maintainers select Featured apps based on project history, implementation, completeness and quality, and revisit the selection as apps evolve to highlight complete, representative examples. Browse all apps by publication date or GitHub Stars, or search the collection.", signalCount: `${apps.length} apps`, signalLicense: "Open source and commercial", filterLabel: "Filter by category", commercial: "Commercial", building: "In development", visit: "Website", sourceLink: "Source", ctaTitle: "Built something with GPUI Kit?", ctaLead: "Open a PR in the Showcase repository with your app manifest and clear, complete, tidy window screenshots. Every merged app PR is published here automatically; maintainers select Featured apps separately.", ctaAction: "Submit your app" },
 );
 </script>
 
-<style>
-.apps-page { color: var(--foreground); }
+<style scoped>
+.apps-page {
+    --apps-space-1: 0.25rem;
+    --apps-space-2: 0.5rem;
+    --apps-space-3: 0.75rem;
+    --apps-space-4: 1rem;
+    --apps-space-6: 1.5rem;
+    --apps-space-8: 2rem;
+    --apps-meta-size: 0.8125rem;
+    color: var(--foreground);
+}
 
-.apps-hero { max-width: 46rem; margin-bottom: clamp(2.5rem, 5vw, 3.5rem); }
+.apps-hero { max-width: 46rem; margin-bottom: 2.5rem; }
+.apps-kicker { display: block; margin-bottom: var(--apps-space-4); color: var(--muted-foreground); font: 600 0.6875rem/1 var(--font-mono); letter-spacing: 0.14em; text-transform: uppercase; }
+.apps-hero h1 { margin: 0; padding: 0; border: 0; font-size: clamp(2rem, 3.6vw, 3rem); font-weight: 660; letter-spacing: -0.045em; line-height: 1.15; text-wrap: balance; }
+.apps-lead { margin: var(--apps-space-4) 0 0; color: var(--muted-foreground); font-size: 1rem; line-height: 1.65; }
+.apps-policy { margin: var(--apps-space-4) 0 0; color: var(--muted-foreground); font-size: 0.875rem; }
+.apps-policy summary { width: fit-content; cursor: pointer; border-radius: var(--radius-control); }
+.apps-policy summary:hover { color: var(--foreground); }
+.apps-policy p { margin: var(--apps-space-3) 0 0; line-height: 1.6; }
+.apps-signals { display: flex; flex-wrap: wrap; gap: var(--apps-space-2) var(--apps-space-6); margin: var(--apps-space-4) 0 0; padding: 0; list-style: none; color: var(--muted-foreground); font-size: var(--apps-meta-size); font-variant-numeric: tabular-nums; }
+.apps-signals li { display: inline-flex; align-items: center; gap: var(--apps-space-2); margin: 0; line-height: 1.5; }
+.apps-signals svg { flex-shrink: 0; width: 1rem; height: 1rem; }
 
-.apps-kicker {
-    display: block; margin-bottom: 0.9rem;
-    color: var(--muted-foreground);
-    font: 600 0.68rem/1 var(--font-mono);
-    letter-spacing: 0.14em; text-transform: uppercase;
-}
+.apps-section + .apps-section { margin-top: 3rem; border-top: 1px solid var(--border); padding-top: var(--apps-space-8); }
+.apps-section h2 { display: flex; align-items: baseline; justify-content: space-between; gap: var(--apps-space-4); margin: 0; padding: 0; border: 0; font-size: 1.5rem; font-weight: 620; line-height: 1.3; }
+.apps-section h2 span { flex-shrink: 0; color: var(--muted-foreground); font-size: 0.875rem; font-weight: 400; font-variant-numeric: tabular-nums; }
+.apps-section__lead { margin: var(--apps-space-2) 0 var(--apps-space-6); color: var(--muted-foreground); font-size: 0.875rem; line-height: 1.5; }
+.apps-browser { margin-bottom: var(--apps-space-6); border: 1px solid var(--border); border-radius: var(--radius-card); }
+.apps-toolbar { display: flex; flex-wrap: wrap; align-items: end; gap: var(--apps-space-2); padding: var(--apps-space-2); border-bottom: 1px solid var(--border); }
+.apps-search { flex: 0 1 20rem; min-width: 0; }
+.apps-sort { flex: 0 1 12rem; min-width: 0; }
+.apps-field-label { display: block; margin-bottom: 0.375rem; font-size: 0.75rem; font-weight: 550; line-height: 1; }
+.apps-search__control { display: block; position: relative; }
+.apps-toolbar input { width: 100%; height: 2rem; border: 1px solid var(--border); border-radius: var(--radius-control); background: var(--card); color: var(--foreground); padding: var(--apps-space-1) var(--apps-space-2); font: inherit; font-size: var(--apps-meta-size); line-height: 1.5; }
+.apps-search__control input { padding-left: 2rem; }
+.apps-search__control > svg { position: absolute; top: 50%; transform: translateY(-50%); width: 0.875rem; height: 0.875rem; color: var(--muted-foreground); pointer-events: none; }
+.apps-search__control > svg { left: 0.625rem; }
+.apps-toolbar input:hover { border-color: var(--brand-line); }
+.apps-filter { display: flex; flex-wrap: wrap; align-items: center; gap: var(--apps-space-1); padding: var(--apps-space-2); }
+.apps-filter__chip { display: inline-flex; align-items: center; gap: var(--apps-space-2); min-height: 1.75rem; border: 1px solid var(--border); border-radius: var(--radius-control); padding: 0.125rem var(--apps-space-2); color: var(--muted-foreground); font-size: var(--apps-meta-size); line-height: 1.5; cursor: pointer; }
+.apps-filter__chip:hover { background: var(--secondary); color: var(--foreground); }
+.apps-filter__chip[aria-pressed="true"] { border-color: var(--brand-line); background: var(--secondary); color: var(--foreground); }
+.apps-filter__count { font-size: 0.75rem; font-variant-numeric: tabular-nums; }
+.apps-results { margin: 0; color: var(--muted-foreground); font-size: var(--apps-meta-size); line-height: 1.5; }
+.apps-reset { margin-left: auto; min-height: 1.75rem; border-radius: var(--radius-control); padding: var(--apps-space-1) var(--apps-space-2); color: var(--muted-foreground); font-size: var(--apps-meta-size); cursor: pointer; }
+.apps-reset:disabled { opacity: 0.4; cursor: default; }
+.apps-reset:hover:not(:disabled) { color: var(--foreground); background: var(--secondary); }
+.apps-empty { display: flex; flex-direction: column; align-items: center; gap: var(--apps-space-3); padding: 3rem var(--apps-space-4); border: 1px dashed var(--border); border-radius: var(--radius-card); text-align: center; }
+.apps-empty > svg { width: 1.5rem; height: 1.5rem; color: var(--muted-foreground); }
+.apps-empty h3 { margin: 0; font-size: 1rem; font-weight: 550; line-height: 1.5; }
+.apps-empty p { margin: 0; color: var(--muted-foreground); font-size: 0.875rem; line-height: 1.5; }
+.apps-empty button { margin-top: var(--apps-space-1); min-height: 2.25rem; padding: var(--apps-space-2) var(--apps-space-3); border: 1px solid var(--border); border-radius: var(--radius-control); background: var(--card); font-size: 0.875rem; cursor: pointer; }
+.apps-empty button:hover { background: var(--secondary); }
 
-html[lang^="zh"] .apps-kicker { letter-spacing: 0.06em; }
-
-.apps-hero h1 { margin: 0; border: 0; padding: 0; font-size: clamp(2rem, 3.6vw, 3rem); font-weight: 660; letter-spacing: -0.045em; line-height: 1.1; }
-html[lang^="zh"] .apps-hero h1 { letter-spacing: normal; }
-.apps-lead { margin: 1.1rem 0 0; color: var(--muted-foreground); font-size: 1.05rem; line-height: 1.7; }
-
-.apps-policy { margin: 0.8rem 0 0; color: var(--muted-foreground); font-size: 0.9rem; line-height: 1.7; }
-
-.apps-signals { display: flex; flex-wrap: wrap; gap: 0.5rem 1.5rem; margin: 1.6rem 0 0; padding: 0; list-style: none; color: var(--muted-foreground); font-size: 0.85rem; font-variant-numeric: tabular-nums; }
-.apps-signals li { display: inline-flex; align-items: center; gap: 0.45rem; margin: 0; }
-
-.apps-toolbar { display: flex; flex-wrap: wrap; align-items: end; gap: 1rem; margin-bottom: 1.25rem; }
-.apps-search { flex: 1 1 18rem; }
-.apps-sort { flex: 0 1 15rem; }
-.apps-toolbar label > span { display: block; margin-bottom: 0.4rem; font-size: 0.85rem; font-weight: 550; }
-.apps-toolbar input, .apps-toolbar select { width: 100%; border: 1px solid var(--border); border-radius: var(--radius-control); background: var(--card); color: var(--foreground); padding: 0.65rem 0.8rem; font: inherit; }
-.apps-toolbar input:focus-visible, .apps-toolbar select:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; }
-.apps-results, .apps-section__lead { color: var(--muted-foreground); font-size: 0.9rem; }
-.apps-section { margin-top: 2rem; }
-.apps-section + .apps-section { margin-top: 3.5rem; border-top: 1px solid var(--border); padding-top: 2rem; }
-.apps-section h2 { margin: 0; padding: 0; border: 0; font-size: 1.5rem; }
-.apps-section h2 span { margin-left: 0.4rem; color: var(--muted-foreground); font-size: 0.9rem; font-weight: 400; }
-.apps-section__lead { margin: 0.5rem 0 1.5rem; }
-.apps-empty { padding: 3rem 1rem; text-align: center; }
-.apps-empty button { color: var(--brand); text-decoration: underline; cursor: pointer; }
-
-.apps-filter { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-bottom: 1.75rem; border-top: 1px solid var(--border); padding-top: 1.75rem; }
-
-.apps-filter__chip { display: inline-flex; align-items: center; gap: 0.45rem; border: 1px solid var(--border); border-radius: 999px; padding: 0.35rem 0.85rem; color: var(--foreground); font-size: 0.85rem; line-height: 1.4; cursor: pointer; transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease; }
-.apps-filter__chip:hover { background: var(--secondary); }
-.apps-filter__chip[aria-pressed="true"] { border-color: var(--brand); background: var(--brand); color: var(--brand-contrast); }
-.apps-filter__count { color: var(--muted-foreground); font-size: 0.75rem; font-variant-numeric: tabular-nums; }
-.apps-filter__chip[aria-pressed="true"] .apps-filter__count { color: var(--brand-contrast); opacity: 0.65; }
-
-.apps-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(20rem, 100%), 1fr)); gap: 1.5rem; }
-
-.app-card { display: flex; flex-direction: column; overflow: hidden; border: 1px solid var(--border); border-radius: var(--radius-card); background: var(--card); transition: border-color 0.18s ease, box-shadow 0.18s ease; }
-.app-card:hover { border-color: var(--brand-line); box-shadow: var(--shadow-raise); }
-.app-card__shot { display: block; border-bottom: 1px solid var(--border); background: var(--secondary); }
-.app-card__shot img { display: block; width: 100%; aspect-ratio: 16 / 10; object-fit: contain; object-position: center; }
-.app-card__body { display: flex; flex: 1; flex-direction: column; padding: 1.15rem 1.25rem 1.25rem; }
-.app-card__name { margin: 0; border: 0; padding: 0; font-size: 1.05rem; font-weight: 620; letter-spacing: -0.015em; line-height: 1.3; }
-html[lang^="zh"] .app-card__name { letter-spacing: normal; }
-.app-card__author { margin: 0.35rem 0 0; color: var(--muted-foreground); font-size: 0.8rem; }
-.app-card__blurb { margin: 0.55rem 0 auto; padding-bottom: 1rem; color: var(--muted-foreground); font-size: 0.875rem; line-height: 1.65; }
-.app-card__meta { display: flex; flex-wrap: wrap; gap: 0.4rem; margin: 0 0 0.9rem; padding: 0; list-style: none; }
-.app-card__meta li { margin: 0; border: 1px solid var(--border); border-radius: var(--radius-control); padding: 0.15rem 0.45rem; color: var(--muted-foreground); font-size: 0.72rem; line-height: 1.5; white-space: nowrap; }
-.app-card__links { display: flex; flex-wrap: wrap; gap: 1rem; border-top: 1px solid var(--border); padding-top: 0.9rem; }
-.app-card__links a { display: inline-flex; align-items: center; gap: 0.2rem; color: var(--foreground); font-size: 0.85rem; font-weight: 500; text-decoration: none; transition: opacity 0.15s ease; }
-.app-card__links a:hover { opacity: 0.66; }
-
-.apps-cta { margin-top: clamp(3rem, 6vw, 4.5rem); border-top: 1px solid var(--border); padding-top: clamp(2rem, 4vw, 3rem); }
-.apps-cta h2 { margin: 0; border: 0; padding: 0; font-size: 1.4rem; font-weight: 640; letter-spacing: -0.02em; line-height: 1.3; }
-html[lang^="zh"] .apps-cta h2 { letter-spacing: normal; }
-.apps-cta p { margin: 0.6rem 0 1.3rem; color: var(--muted-foreground); font-size: 0.95rem; line-height: 1.7; }
-.apps-cta__action { display: inline-flex; align-items: center; gap: 0.4rem; border-radius: var(--radius-control); background: var(--brand); padding: 0.55rem 1.1rem; color: var(--brand-contrast); font-size: 0.9rem; font-weight: 500; text-decoration: none; transition: background-color 0.15s ease; }
-.apps-cta__action:hover { background: var(--brand-hover); }
-
-@media (max-width: 640px) { .apps-grid { gap: 1.15rem; } }
+.apps-pagination { display: flex; flex-wrap: wrap; align-items: center; justify-content: end; gap: var(--apps-space-1); margin-top: var(--apps-space-4); }
+.apps-pagination__status { margin-right: auto; color: var(--muted-foreground); font-size: var(--apps-meta-size); font-variant-numeric: tabular-nums; }
+.apps-pagination button { display: inline-flex; align-items: center; justify-content: center; min-width: 2rem; height: 2rem; border: 1px solid transparent; border-radius: var(--radius-control); font-size: var(--apps-meta-size); cursor: pointer; }
+.apps-pagination button:hover:not(:disabled) { background: var(--secondary); }
+.apps-pagination button[aria-current="page"] { border-color: var(--border); background: var(--secondary); }
+.apps-pagination button:disabled { opacity: 0.4; cursor: default; }
+.apps-pagination svg { width: 1rem; height: 1rem; }
+
+.apps-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(20rem, 100%), 1fr)); gap: var(--apps-space-4); }
+.app-card { display: flex; flex-direction: column; min-width: 0; overflow: hidden; border: 1px solid var(--border); border-radius: var(--radius-card); background: var(--card); }
+.app-card:hover { border-color: var(--brand-line); }
+.app-card__shot { display: block; flex-shrink: 0; border-bottom: 1px solid var(--border); background: var(--secondary); }
+.app-card__shot:focus-visible { outline-offset: -2px; }
+.app-card__shot img { display: block; width: 100%; aspect-ratio: 16 / 9; object-fit: cover; object-position: top center; }
+.app-card__body { display: flex; flex: 1; flex-direction: column; min-width: 0; padding: var(--apps-space-4) var(--apps-space-4) var(--apps-space-2); overflow-wrap: anywhere; }
+.app-card__header { display: flex; align-items: start; justify-content: space-between; gap: var(--apps-space-3); }
+.app-card__identity { min-width: 0; }
+.app-card__name { margin: 0; border: 0; padding: 0; font-size: 1.0625rem; font-weight: 620; letter-spacing: -0.015em; line-height: 1.3; }
+.app-card__author { margin: var(--apps-space-1) 0 0; color: var(--muted-foreground); font-size: var(--apps-meta-size); line-height: 1.5; }
+.app-card__status { flex-shrink: 0; margin-top: 0; border: 1px solid var(--border); border-radius: var(--radius-control); padding: 0 var(--apps-space-2); color: var(--muted-foreground); font-size: 0.75rem; line-height: 1.75; }
+.app-card__blurb { margin: var(--apps-space-3) 0 auto; padding-bottom: var(--apps-space-4); color: var(--foreground); font-size: 0.875rem; line-height: 1.5; }
+.app-card__platform-row { display: flex; align-items: baseline; justify-content: space-between; gap: var(--apps-space-2); margin-bottom: var(--apps-space-3); color: var(--muted-foreground); font-size: var(--apps-meta-size); line-height: 1.5; }
+.app-card__platform-row > time { flex-shrink: 0; font-variant-numeric: tabular-nums; }
+.app-card__meta { min-width: 0; display: flex; flex-wrap: wrap; gap: var(--apps-space-2); margin: 0; padding: 0; list-style: none; }
+.app-card__meta li { margin: 0; padding: 0; line-height: inherit; }
+.app-card__footer { display: flex; align-items: center; justify-content: space-between; gap: var(--apps-space-2); border-top: 1px solid var(--border); padding-top: var(--apps-space-2); color: var(--muted-foreground); font-size: var(--apps-meta-size); line-height: 1; min-height: 2.5rem; }
+.app-card__footer-start { display: flex; flex-wrap: wrap; align-items: center; gap: var(--apps-space-3); min-width: 0; }
+.app-card__commercial, .app-card__stats { display: inline-flex; align-items: center; gap: var(--apps-space-1); min-height: 2rem; }
+.app-card__stats { font-variant-numeric: tabular-nums; }
+/* Numeral ink sits above its line-box center; align it optically with the star. */
+.app-card__stats > span { display: inline-flex; align-items: center; height: 1rem; line-height: 1; transform: translateY(0.03125rem); }
+.app-card__links { display: flex; flex-shrink: 0; align-items: center; gap: var(--apps-space-1); }
+.app-card__icon-link { display: inline-flex; align-items: center; justify-content: center; width: 2rem; height: 2rem; border-radius: var(--radius-control); color: inherit; text-decoration: none; }
+.app-card__icon-link:hover { color: var(--foreground); background: var(--secondary); }
+.app-card__stats svg, .app-card__links svg { display: block; flex-shrink: 0; width: 1rem; height: 1rem; }
+
+.apps-cta { display: flex; flex-direction: column; align-items: start; gap: var(--apps-space-3); margin-top: 3rem; padding-top: var(--apps-space-8); border-top: 1px solid var(--border); }
+.apps-cta h2 { margin: 0; padding: 0; border: 0; font-size: 1.375rem; font-weight: 620; letter-spacing: -0.02em; line-height: 1.3; }
+.apps-cta p { margin: 0; max-width: 46rem; color: var(--muted-foreground); font-size: 0.875rem; line-height: 1.6; }
+.apps-cta__action { display: inline-flex; align-items: center; gap: var(--apps-space-2); margin-top: var(--apps-space-1); min-height: 2.5rem; border: 1px solid var(--border); border-radius: var(--radius-control); padding: var(--apps-space-2) var(--apps-space-4); color: var(--foreground); background: var(--card); font-size: 0.875rem; font-weight: 500; text-decoration: none; }
+.apps-cta__action:hover { background: var(--secondary); }
+.apps-cta__action svg { width: 1rem; height: 1rem; }
+.apps-page :is(a, button, input, select, summary):focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; }
+.apps-page .app-card__shot:focus-visible { outline-offset: -2px; }
+.apps-page button:active, .app-card__icon-link:active { background: var(--secondary); color: var(--foreground); }
+:global(html[lang^="zh"]) :is(.apps-hero h1, .app-card__name, .apps-cta h2) { letter-spacing: normal; }
+:global(html[lang^="zh"]) .apps-kicker { letter-spacing: 0.06em; }
+@media (prefers-reduced-motion: no-preference) {
+    .app-card { transition: border-color 150ms ease; }
+    .app-card__icon-link, .apps-filter__chip, .apps-reset, .apps-cta__action { transition: background-color 150ms ease, color 150ms ease; }
+}
+@media (max-width: 640px) {
+    .apps-search { flex: 1 1 15rem; }
+    .apps-sort { flex: 1 1 11rem; }
+    .apps-section + .apps-section { margin-top: var(--apps-space-8); }
+}
 </style>
diff --git a/website/src/components/GitHubStar.vue b/website/src/components/GitHubStar.vue
deleted file mode 100644
index 5aec6e2682..0000000000
--- a/website/src/components/GitHubStar.vue
+++ /dev/null
@@ -1,47 +0,0 @@
-<template>
-    <a
-        href="https://github.com/longbridge/gpui-kit"
-        target="_blank"
-        rel="noopener noreferrer"
-        class="github-star-button"
-        :title="`${stargazersCount} stars on GitHub`"
-    >
-        <Github :size="16" :stroke-width="1.8" />
-        <span>{{ starLabel }}</span>
-    </a>
-</template>
-
-<script setup lang="ts">
-import { computed } from "vue";
-import { Github } from "lucide-vue-next";
-
-const props = defineProps<{
-    stargazersCount: number;
-}>();
-
-const starLabel = computed(() =>
-    props.stargazersCount / 1000 >= 1
-        ? (props.stargazersCount / 1000.0).toFixed(1) + "k"
-        : props.stargazersCount.toString()
-);
-</script>
-
-<style scoped>
-.github-star-button {
-    display: inline-flex;
-    width: auto;
-    padding: 0 0.5rem;
-    align-items: center;
-    font-size: 0.76rem;
-    gap: 0.5rem;
-    color: var(--foreground);
-    text-decoration: none;
-    border-radius: var(--radius);
-    font-variant-numeric: tabular-nums;
-    transition: color 140ms ease;
-}
-
-.github-star-button:hover {
-    color: var(--brand);
-}
-</style>
diff --git a/website/src/components/Nav.astro b/website/src/components/Nav.astro
index 33f27e9df3..2dd109bc78 100644
--- a/website/src/components/Nav.astro
+++ b/website/src/components/Nav.astro
@@ -134,7 +134,7 @@ const resourcesLabel = isZh ? '资源' : 'Resources';
 
       <!-- Language switch -->
       <a href={langSwitchHref} class="site-nav__lang-btn site-nav__link">
-        {langLabel}
+        <span>{langLabel}</span>
       </a>
 
       <!-- Theme toggle -->
@@ -257,15 +257,26 @@ const resourcesLabel = isZh ? '资源' : 'Resources';
   display: inline-flex;
   align-items: center;
   gap: 0.4rem;
-  font-size: 0.76rem;
+  font-size: 0.8125rem;
   font-variant-numeric: tabular-nums;
 }
 
 .site-nav__lang-btn {
-  font-size: 0.78rem;
+  font-size: 0.8125rem;
   font-weight: 560;
 }
 
+/* Give toolbar labels the same centered line box as their icons. */
+.site-nav__actions .site-nav__link { height: 2rem; padding-block: 0; }
+.github-star-btn__label,
+.site-nav__lang-btn > span {
+  display: inline-flex;
+  align-items: center;
+  height: 1rem;
+  line-height: 1rem;
+}
+.site-nav__actions svg { display: block; flex-shrink: 0; }
+
 .site-nav__burger {
   display: none;
   align-items: center;
diff --git a/website/src/components/SidebarFilter.vue b/website/src/components/SidebarFilter.vue
deleted file mode 100644
index 3a057a7a09..0000000000
--- a/website/src/components/SidebarFilter.vue
+++ /dev/null
@@ -1,197 +0,0 @@
-<script setup lang="ts">
-import { computed, nextTick, ref, shallowRef, watch } from "vue";
-
-interface Page { text: string; link: string; group: string; }
-
-const props = defineProps<{
-    pages: Page[];
-    currentPath: string;
-    lang: 'en' | 'zh-CN';
-}>();
-
-const query = ref("");
-const activeIndex = ref(0);
-const list = shallowRef<HTMLElement | null>(null);
-
-const labels = computed(() =>
-    props.lang === 'zh-CN'
-        ? { placeholder: "过滤", empty: "没有匹配的页面", clear: "清除" }
-        : { placeholder: "Filter", empty: "No matching pages", clear: "Clear" },
-);
-
-function score(text: string, q: string): number | null {
-    const haystack = text.toLowerCase();
-    if (haystack.startsWith(q)) return 0;
-    const at = haystack.indexOf(q);
-    if (at >= 0) return 1 + at / 1000;
-    let matched = 0;
-    for (const char of haystack) {
-        if (char === q[matched]) matched++;
-    }
-    return matched === q.length ? 2 : null;
-}
-
-const results = computed(() => {
-    const needle = query.value.trim().toLowerCase();
-    if (!needle) return [];
-    return props.pages
-        .map((item) => ({ item, rank: score(item.text, needle) }))
-        .filter((h): h is { item: Page; rank: number } => h.rank !== null)
-        .sort((a, b) => a.rank - b.rank || a.item.text.length - b.item.text.length)
-        .map((h) => h.item);
-});
-
-const filtering = computed(() => query.value.trim().length > 0);
-const showGroup = computed(() => new Set(results.value.map((i) => i.group)).size > 1);
-
-watch(results, () => { activeIndex.value = 0; });
-
-function clear() { query.value = ""; }
-
-async function move(delta: number) {
-    const total = results.value.length;
-    if (!total) return;
-    activeIndex.value = (activeIndex.value + delta + total) % total;
-    await nextTick();
-    list.value?.querySelector(".is-active")?.scrollIntoView({ block: "nearest" });
-}
-
-function open() {
-    const hit = results.value[activeIndex.value];
-    if (hit) window.location.href = hit.link;
-}
-</script>
-
-<template>
-    <div class="SidebarFilter" :data-filtering="filtering">
-        <div class="field">
-            <svg class="icon" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
-                <circle cx="11" cy="11" r="8"/><path d="m21 21-4.35-4.35"/>
-            </svg>
-            <input
-                v-model="query"
-                type="search"
-                class="input"
-                :placeholder="labels.placeholder"
-                :aria-label="labels.placeholder"
-                autocomplete="off"
-                spellcheck="false"
-                @keydown.down.prevent="move(1)"
-                @keydown.up.prevent="move(-1)"
-                @keydown.enter.prevent="open"
-                @keydown.esc.prevent="clear"
-            />
-            <button v-if="filtering" class="clear" type="button" :aria-label="labels.clear" @click="clear">
-                <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
-                    <path d="M18 6 6 18M6 6l12 12"/>
-                </svg>
-            </button>
-        </div>
-
-        <div v-if="filtering" ref="list" class="results">
-            <a
-                v-for="(item, index) in results"
-                :key="item.link"
-                :href="item.link"
-                class="result"
-                :class="{ 'is-active': index === activeIndex }"
-                @mouseenter="activeIndex = index"
-            >
-                <span class="text">{{ item.text }}</span>
-                <span v-if="showGroup && item.group" class="group">{{ item.group }}</span>
-            </a>
-            <p v-if="!results.length" class="empty">{{ labels.empty }}</p>
-        </div>
-    </div>
-</template>
-
-<style scoped>
-.SidebarFilter {
-    padding-top: 1.25rem;
-    padding-bottom: 0.25rem;
-}
-
-.field {
-    display: flex;
-    align-items: center;
-    gap: 0.4rem;
-    height: 2rem;
-    padding: 0 0.5rem;
-    border: 1px solid var(--border);
-    border-radius: var(--radius-control);
-    background: var(--background);
-    transition: border-color 140ms ease;
-}
-
-.field:focus-within {
-    border-color: color-mix(in srgb, var(--foreground) 22%, var(--border));
-}
-
-.icon {
-    flex-shrink: 0;
-    color: var(--muted-foreground);
-}
-
-.input {
-    width: 100%;
-    min-width: 0;
-    border: 0;
-    background: transparent;
-    color: var(--foreground);
-    font-size: 0.8125rem;
-}
-
-.input:focus { outline: 0; }
-.input::placeholder { color: var(--muted-foreground); }
-.input::-webkit-search-cancel-button { display: none; }
-
-.clear {
-    display: flex;
-    flex-shrink: 0;
-    align-items: center;
-    justify-content: center;
-    color: var(--muted-foreground);
-    border-radius: var(--radius-control);
-    cursor: pointer;
-}
-.clear:hover { color: var(--foreground); }
-
-.results { padding-top: 0.6rem; }
-
-.result {
-    display: flex;
-    align-items: baseline;
-    justify-content: space-between;
-    gap: 0.5rem;
-    padding: 0.25rem 0.4rem;
-    border-radius: var(--radius);
-    color: var(--muted-foreground);
-    font-size: 0.8125rem;
-    line-height: 1.5;
-    text-decoration: none;
-}
-
-.result.is-active {
-    background: var(--secondary);
-    color: var(--foreground);
-}
-
-.group {
-    flex-shrink: 0;
-    color: var(--muted-foreground);
-    font-size: 0.68rem;
-}
-
-.empty {
-    padding: 0.25rem 0.4rem;
-    color: var(--muted-foreground);
-    font-size: 0.8125rem;
-}
-</style>
-
-<style>
-/* Hide sidebar tree when filter is active */
-.docs-sidebar:has(.SidebarFilter[data-filtering="true"]) .sidebar-group > ul {
-    display: none;
-}
-</style>
diff --git a/website/src/lib/showcase-browser.ts b/website/src/lib/showcase-browser.ts
index 9214a1a115..bf78712639 100644
--- a/website/src/lib/showcase-browser.ts
+++ b/website/src/lib/showcase-browser.ts
@@ -7,9 +7,26 @@ export function selectShowcases(apps, { query = '', category = 'all', sort = 'ne
   });
   const featured = matches.filter(app => app.featured);
   const community = matches.filter(app => !app.featured);
-  community.sort((a, b) => {
+  const compare = (a, b) => {
     if (sort === 'stars' && a.stars !== b.stars) return (b.stars ?? -1) - (a.stars ?? -1);
     return (Date.parse(b.publishedAt) || 0) - (Date.parse(a.publishedAt) || 0) || a.name.localeCompare(b.name);
-  });
-  return { featured, community };
+  };
+  community.sort(compare);
+  return { featured, community, all: [...matches].sort(compare) };
+}
+
+/** Six editorial selections per page; browsing never changes catalog order. */
+export function paginateFeatured<T extends { featured: boolean }>(apps: T[], requestedPage = 1) {
+  return paginate(apps.filter(app => app.featured), requestedPage, 6);
+}
+
+/** Nine filtered and sorted catalog entries per page. */
+export function paginateAll<T>(apps: T[], requestedPage = 1) {
+  return paginate(apps, requestedPage, 9);
+}
+
+function paginate<T>(apps: T[], requestedPage: number, pageSize: number) {
+  const totalPages = Math.ceil(apps.length / pageSize);
+  const page = Math.max(1, Math.min(requestedPage, totalPages));
+  return { apps: apps.slice((page - 1) * pageSize, page * pageSize), page, totalPages, total: apps.length };
 }
diff --git a/website/tests/showcase-browser.test.ts b/website/tests/showcase-browser.test.ts
index bd7361b04d..97516a03d9 100644
--- a/website/tests/showcase-browser.test.ts
+++ b/website/tests/showcase-browser.test.ts
@@ -1,6 +1,6 @@
 import assert from 'node:assert/strict';
 import test from 'node:test';
-import { selectShowcases } from '../src/lib/showcase-browser.ts';
+import { selectShowcases, paginateFeatured } from '../src/lib/showcase-browser.ts';
 const apps = [
   { id: 'picked', name: 'Picked', featured: true, category: 'dev', description: 'A database', author: 'Database Team', platforms: ['Linux'], stars: 1, publishedAt: '2026-01-01' },
   { id: 'older', name: 'Older', featured: false, category: 'dev', description: 'A terminal', platforms: ['Linux'], stars: 100, publishedAt: '2026-01-01' },
@@ -21,3 +21,34 @@ test('search matches descriptions and authors and combines with categories', ()
   assert.equal(selectShowcases(apps, { query: '  TERMINAL ', category: 'dev' }).community[0].id, 'older');
   assert.equal(selectShowcases(apps, { query: 'notes', category: 'dev' }).community.length, 0);
 });
+test('all apps includes Featured in the requested order without changing editorial data', () => {
+  const before = structuredClone(apps);
+  assert.deepEqual(selectShowcases(apps, { sort: 'stars' }).all.map(a => a.id), ['older', 'picked', 'newer']);
+  assert.deepEqual(selectShowcases(apps).all.map(a => a.id), ['newer', 'older', 'picked']);
+  assert.deepEqual(selectShowcases(apps, { query: 'Database Team', category: 'dev' }).all.map(a => a.id), ['picked']);
+  assert.deepEqual(apps, before);
+});
+test('Featured pagination shows six apps per page in editorial order', () => {
+  const featuredApps = Array.from({ length: 16 }, (_, id) => ({ id, featured: true }));
+  const catalog = [...featuredApps, { id: 99, featured: false }];
+  assert.deepEqual(paginateFeatured(catalog, 1), { apps: featuredApps.slice(0, 6), page: 1, totalPages: 3, total: 16 });
+  assert.deepEqual(paginateFeatured(catalog, 2).apps.map(a => a.id), [6, 7, 8, 9, 10, 11]);
+  assert.deepEqual(paginateFeatured(catalog, 3).apps.map(a => a.id), [12, 13, 14, 15]);
+  assert.equal(paginateFeatured(catalog, 9).page, 3);
+  assert.equal(paginateFeatured(catalog, 0).page, 1);
+  assert.deepEqual(paginateFeatured([], 1), { apps: [], page: 1, totalPages: 0, total: 0 });
+  assert.equal(catalog.length, 17);
+});
+
+
+test('All apps pagination keeps sorted results in pages of nine and clamps boundaries', async () => {
+  const { paginateAll } = await import('../src/lib/showcase-browser.ts');
+  const apps = Array.from({ length: 23 }, (_, id) => ({ id }));
+  const pages = [1, 2, 3].map(page => paginateAll(apps, page));
+  assert.deepEqual(pages.map(page => page.apps.length), [9, 9, 5]);
+  assert.deepEqual(pages.flatMap(page => page.apps), apps);
+  assert.equal(paginateAll(apps, 99).page, 3);
+  assert.equal(paginateAll(apps, 0).page, 1);
+  assert.deepEqual(paginateAll([], 3), { apps: [], page: 1, totalPages: 0, total: 0 });
+  assert.equal(paginateAll(apps.slice(0, 2), 3).page, 1);
+});
diff --git a/website/zh-CN/base/dock.md b/website/zh-CN/base/dock.md
index 7a4d49a1db..0bd25beb4f 100644
--- a/website/zh-CN/base/dock.md
+++ b/website/zh-CN/base/dock.md
@@ -55,7 +55,7 @@ Dock 的数据模型比单一分栏组件更重，但换来可查询、可移动
 ## 可运行示例
 
 ```bash
-cargo run -p gpui-base --example dock
+cargo run -p gpui-base-examples -- dock
 ```
 
 <<< ../../../crates/base/examples/showcase/components/dock.rs{rust}
diff --git a/website/zh-CN/base/getting-started.md b/website/zh-CN/base/getting-started.md
index 2098792534..afe3c0ad80 100644
--- a/website/zh-CN/base/getting-started.md
+++ b/website/zh-CN/base/getting-started.md
@@ -77,7 +77,7 @@ Theme::global_mut(cx).tokens = SemanticThemeTokens {
 ## 运行共享示例
 
 ```sh
-cargo run -p gpui-base --example components -- button
+cargo run -p gpui-base-examples -- button
 ```
 
 将 `button` 替换为[原语目录](./primitives/index.md)中的 slug。网站会把同一份展示代码编译为 `wasm32-unknown-unknown` 并加载到各原语页面。
diff --git a/website/zh-CN/base/motion.md b/website/zh-CN/base/motion.md
index cc0bb5a3a5..60f13efd8f 100644
--- a/website/zh-CN/base/motion.md
+++ b/website/zh-CN/base/motion.md
@@ -13,7 +13,7 @@ exampleKind: base
 运行本文配套的交互示例：
 
 ```bash
-cargo run -p gpui-base --example motion
+cargo run -p gpui-base-examples --bin motion
 ```
 
 示例包含五个相互独立的页面，可通过顶部标签逐个查看。
diff --git a/website/zh-CN/base/primitives/accordion.md b/website/zh-CN/base/primitives/accordion.md
index 1f8d61b4ff..88d7393682 100644
--- a/website/zh-CN/base/primitives/accordion.md
+++ b/website/zh-CN/base/primitives/accordion.md
@@ -15,7 +15,7 @@ order: 1
 原生示例和页面上方的 WASM 预览共用同一份实现：
 
 ```bash
-cargo run -p gpui-base --example components -- accordion
+cargo run -p gpui-base-examples -- accordion
 ```
 
 ## 导入
diff --git a/website/zh-CN/base/primitives/alert-dialog.md b/website/zh-CN/base/primitives/alert-dialog.md
index fdb1dc73ba..9a46fa9175 100644
--- a/website/zh-CN/base/primitives/alert-dialog.md
+++ b/website/zh-CN/base/primitives/alert-dialog.md
@@ -15,7 +15,7 @@ order: 2
 原生示例和页面上方的 WASM 预览共用同一份实现：
 
 ```bash
-cargo run -p gpui-base --example components -- alert-dialog
+cargo run -p gpui-base-examples -- alert-dialog
 ```
 
 ## 导入
diff --git a/website/zh-CN/base/primitives/avatar.md b/website/zh-CN/base/primitives/avatar.md
index 3bf2df6e8b..308b59da4b 100644
--- a/website/zh-CN/base/primitives/avatar.md
+++ b/website/zh-CN/base/primitives/avatar.md
@@ -15,7 +15,7 @@ order: 3
 原生示例和页面上方的 WASM 预览共用同一份实现：
 
 ```bash
-cargo run -p gpui-base --example components -- avatar
+cargo run -p gpui-base-examples -- avatar
 ```
 
 ## 导入
diff --git a/website/zh-CN/base/primitives/button.md b/website/zh-CN/base/primitives/button.md
index df1dfd179c..5121b08773 100644
--- a/website/zh-CN/base/primitives/button.md
+++ b/website/zh-CN/base/primitives/button.md
@@ -13,7 +13,7 @@ order: 4
 原生示例和页面上方的 WASM 预览共用同一份实现：
 
 ```bash
-cargo run -p gpui-base --example components -- button
+cargo run -p gpui-base-examples -- button
 ```
 
 ## 导入
diff --git a/website/zh-CN/base/primitives/calendar.md b/website/zh-CN/base/primitives/calendar.md
index 393cc5a0a1..1d97415fa2 100644
--- a/website/zh-CN/base/primitives/calendar.md
+++ b/website/zh-CN/base/primitives/calendar.md
@@ -15,7 +15,7 @@ order: 5
 原生示例和页面上方的 WASM 预览共用同一份实现：
 
 ```bash
-cargo run -p gpui-base --example components -- calendar
+cargo run -p gpui-base-examples -- calendar
 ```
 
 ## 导入
diff --git a/website/zh-CN/base/primitives/checkbox.md b/website/zh-CN/base/primitives/checkbox.md
index 9f631c3936..78da6a57cf 100644
--- a/website/zh-CN/base/primitives/checkbox.md
+++ b/website/zh-CN/base/primitives/checkbox.md
@@ -15,7 +15,7 @@ order: 6
 原生示例和页面上方的 WASM 预览共用同一份实现：
 
 ```bash
-cargo run -p gpui-base --example components -- checkbox
+cargo run -p gpui-base-examples -- checkbox
 ```
 
 ## 导入
diff --git a/website/zh-CN/base/primitives/collapsible.md b/website/zh-CN/base/primitives/collapsible.md
index 00a35f5c4b..69fbaba06b 100644
--- a/website/zh-CN/base/primitives/collapsible.md
+++ b/website/zh-CN/base/primitives/collapsible.md
@@ -15,7 +15,7 @@ order: 7
 原生示例和页面上方的 WASM 预览共用同一份实现：
 
 ```bash
-cargo run -p gpui-base --example components -- collapsible
+cargo run -p gpui-base-examples -- collapsible
 ```
 
 ## 导入
diff --git a/website/zh-CN/base/primitives/color-picker.md b/website/zh-CN/base/primitives/color-picker.md
index 87375cd228..dfa45ed160 100644
--- a/website/zh-CN/base/primitives/color-picker.md
+++ b/website/zh-CN/base/primitives/color-picker.md
@@ -15,7 +15,7 @@ order: 8
 原生示例和页面上方的 WASM 预览共用同一份实现：
 
 ```bash
-cargo run -p gpui-base --example components -- color-picker
+cargo run -p gpui-base-examples -- color-picker
 ```
 
 ## 导入
diff --git a/website/zh-CN/base/primitives/combobox.md b/website/zh-CN/base/primitives/combobox.md
index 02ffc498cd..cf2e1198a7 100644
--- a/website/zh-CN/base/primitives/combobox.md
+++ b/website/zh-CN/base/primitives/combobox.md
@@ -15,7 +15,7 @@ order: 9
 原生示例和页面上方的 WASM 预览共用同一份实现：
 
 ```bash
-cargo run -p gpui-base --example components -- combobox
+cargo run -p gpui-base-examples -- combobox
 ```
 
 ## 导入
diff --git a/website/zh-CN/base/primitives/date-picker.md b/website/zh-CN/base/primitives/date-picker.md
index b01f1ed3ca..5e07e864af 100644
--- a/website/zh-CN/base/primitives/date-picker.md
+++ b/website/zh-CN/base/primitives/date-picker.md
@@ -15,7 +15,7 @@ order: 10
 原生示例和页面上方的 WASM 预览共用同一份实现：
 
 ```bash
-cargo run -p gpui-base --example components -- date-picker
+cargo run -p gpui-base-examples -- date-picker
 ```
 
 ## 导入
diff --git a/website/zh-CN/base/primitives/dialog.md b/website/zh-CN/base/primitives/dialog.md
index 1b0570588a..bb07abc4c0 100644
--- a/website/zh-CN/base/primitives/dialog.md
+++ b/website/zh-CN/base/primitives/dialog.md
@@ -15,7 +15,7 @@ order: 11
 原生示例和页面上方的 WASM 预览共用同一份实现：
 
 ```bash
-cargo run -p gpui-base --example components -- dialog
+cargo run -p gpui-base-examples -- dialog
 ```
 
 ## 导入
diff --git a/website/zh-CN/base/primitives/editor.md b/website/zh-CN/base/primitives/editor.md
index e97a7636e3..8c7c443588 100644
--- a/website/zh-CN/base/primitives/editor.md
+++ b/website/zh-CN/base/primitives/editor.md
@@ -45,5 +45,5 @@ Editor 没有独立字体设置，而是使用环境文本样式。可在外层
 ## 可运行示例
 
 ```bash
-cargo run -p gpui-base --example components -- editor
+cargo run -p gpui-base-examples -- editor
 ```
diff --git a/website/zh-CN/base/primitives/hover-card.md b/website/zh-CN/base/primitives/hover-card.md
index 473551ffe0..bda21e1df0 100644
--- a/website/zh-CN/base/primitives/hover-card.md
+++ b/website/zh-CN/base/primitives/hover-card.md
@@ -15,7 +15,7 @@ order: 13
 原生示例和页面上方的 WASM 预览共用同一份实现：
 
 ```bash
-cargo run -p gpui-base --example components -- hover-card
+cargo run -p gpui-base-examples -- hover-card
 ```
 
 ## 导入
diff --git a/website/zh-CN/base/primitives/input.md b/website/zh-CN/base/primitives/input.md
index cac6bb8ddd..d2fdbecfc9 100644
--- a/website/zh-CN/base/primitives/input.md
+++ b/website/zh-CN/base/primitives/input.md
@@ -59,7 +59,7 @@ let password = cx.new(|cx| {
 ## 可运行示例
 
 ```bash
-cargo run -p gpui-base --example components -- input
+cargo run -p gpui-base-examples -- input
 ```
 
 实现位于 [`input.rs`](https://github.com/longbridge/gpui-kit/blob/main/crates/base/examples/showcase/components/input.rs)。
diff --git a/website/zh-CN/base/primitives/link.md b/website/zh-CN/base/primitives/link.md
index 5ab2000459..94e2815f51 100644
--- a/website/zh-CN/base/primitives/link.md
+++ b/website/zh-CN/base/primitives/link.md
@@ -15,7 +15,7 @@ order: 15
 原生示例和页面上方的 WASM 预览共用同一份实现：
 
 ```bash
-cargo run -p gpui-base --example components -- link
+cargo run -p gpui-base-examples -- link
 ```
 
 ## 导入
diff --git a/website/zh-CN/base/primitives/nav-stack.md b/website/zh-CN/base/primitives/nav-stack.md
index 736b60fba0..c6dd2fb609 100644
--- a/website/zh-CN/base/primitives/nav-stack.md
+++ b/website/zh-CN/base/primitives/nav-stack.md
@@ -15,7 +15,7 @@ order: 16
 原生示例和页面上方的 WASM 预览共用同一份实现：
 
 ```bash
-cargo run -p gpui-base --example components -- nav-stack
+cargo run -p gpui-base-examples -- nav-stack
 ```
 
 ## 导入
diff --git a/website/zh-CN/base/primitives/number-input.md b/website/zh-CN/base/primitives/number-input.md
index 8eaa4f79c2..2644a1096e 100644
--- a/website/zh-CN/base/primitives/number-input.md
+++ b/website/zh-CN/base/primitives/number-input.md
@@ -15,7 +15,7 @@ order: 16
 原生示例和页面上方的 WASM 预览共用同一份实现：
 
 ```bash
-cargo run -p gpui-base --example components -- number-input
+cargo run -p gpui-base-examples -- number-input
 ```
 
 ## 导入
diff --git a/website/zh-CN/base/primitives/otp-input.md b/website/zh-CN/base/primitives/otp-input.md
index d22a9434b3..de3ec4ce85 100644
--- a/website/zh-CN/base/primitives/otp-input.md
+++ b/website/zh-CN/base/primitives/otp-input.md
@@ -15,7 +15,7 @@ order: 17
 原生示例和页面上方的 WASM 预览共用同一份实现：
 
 ```bash
-cargo run -p gpui-base --example components -- otp-input
+cargo run -p gpui-base-examples -- otp-input
 ```
 
 ## 导入
diff --git a/website/zh-CN/base/primitives/pagination.md b/website/zh-CN/base/primitives/pagination.md
index 4855c12c7f..3521998415 100644
--- a/website/zh-CN/base/primitives/pagination.md
+++ b/website/zh-CN/base/primitives/pagination.md
@@ -15,7 +15,7 @@ order: 18
 原生示例和页面上方的 WASM 预览共用同一份实现：
 
 ```bash
-cargo run -p gpui-base --example components -- pagination
+cargo run -p gpui-base-examples -- pagination
 ```
 
 ## 导入
diff --git a/website/zh-CN/base/primitives/popover.md b/website/zh-CN/base/primitives/popover.md
index 053124c373..b516dd11a7 100644
--- a/website/zh-CN/base/primitives/popover.md
+++ b/website/zh-CN/base/primitives/popover.md
@@ -15,7 +15,7 @@ order: 19
 原生示例和页面上方的 WASM 预览共用同一份实现：
 
 ```bash
-cargo run -p gpui-base --example components -- popover
+cargo run -p gpui-base-examples -- popover
 ```
 
 ## 导入
diff --git a/website/zh-CN/base/primitives/popup.md b/website/zh-CN/base/primitives/popup.md
index 068acdaf07..ec96ca679c 100644
--- a/website/zh-CN/base/primitives/popup.md
+++ b/website/zh-CN/base/primitives/popup.md
@@ -15,7 +15,7 @@ order: 22
 原生示例和页面上方的 WASM 预览共用同一份实现：
 
 ```bash
-cargo run -p gpui-base --example components -- popup
+cargo run -p gpui-base-examples -- popup
 ```
 
 ## 导入
diff --git a/website/zh-CN/base/primitives/progress.md b/website/zh-CN/base/primitives/progress.md
index 36a1443c62..d7ddaadf88 100644
--- a/website/zh-CN/base/primitives/progress.md
+++ b/website/zh-CN/base/primitives/progress.md
@@ -15,7 +15,7 @@ order: 20
 原生示例和页面上方的 WASM 预览共用同一份实现：
 
 ```bash
-cargo run -p gpui-base --example components -- progress
+cargo run -p gpui-base-examples -- progress
 ```
 
 ## 导入
diff --git a/website/zh-CN/base/primitives/radio-group.md b/website/zh-CN/base/primitives/radio-group.md
index 9ac5fac8b1..b3a4060799 100644
--- a/website/zh-CN/base/primitives/radio-group.md
+++ b/website/zh-CN/base/primitives/radio-group.md
@@ -15,7 +15,7 @@ order: 22
 原生示例和页面上方的 WASM 预览共用同一份实现：
 
 ```bash
-cargo run -p gpui-base --example components -- radio-group
+cargo run -p gpui-base-examples -- radio-group
 ```
 
 ## 导入
diff --git a/website/zh-CN/base/primitives/radio.md b/website/zh-CN/base/primitives/radio.md
index 4b8f3f0e24..20f492c499 100644
--- a/website/zh-CN/base/primitives/radio.md
+++ b/website/zh-CN/base/primitives/radio.md
@@ -15,7 +15,7 @@ order: 21
 原生示例和页面上方的 WASM 预览共用同一份实现：
 
 ```bash
-cargo run -p gpui-base --example components -- radio
+cargo run -p gpui-base-examples -- radio
 ```
 
 ## 导入
diff --git a/website/zh-CN/base/primitives/resizable.md b/website/zh-CN/base/primitives/resizable.md
index 93d4963940..b4d5fc2283 100644
--- a/website/zh-CN/base/primitives/resizable.md
+++ b/website/zh-CN/base/primitives/resizable.md
@@ -15,7 +15,7 @@ order: 23
 原生示例和页面上方的 WASM 预览共用同一份实现：
 
 ```bash
-cargo run -p gpui-base --example components -- resizable
+cargo run -p gpui-base-examples -- resizable
 ```
 
 ## 导入
diff --git a/website/zh-CN/base/primitives/scrollbar.md b/website/zh-CN/base/primitives/scrollbar.md
index 0d9e112c2c..56e0a9bb6d 100644
--- a/website/zh-CN/base/primitives/scrollbar.md
+++ b/website/zh-CN/base/primitives/scrollbar.md
@@ -11,7 +11,7 @@ order: 24
 ## 运行示例
 
 ```bash
-cargo run -p gpui-base --example components -- scrollbar
+cargo run -p gpui-base-examples -- scrollbar
 ```
 
 原生与 WASM 共用 [`scrollbar.rs`](https://github.com/longbridge/gpui-kit/blob/main/crates/base/examples/showcase/components/scrollbar.rs)。
diff --git a/website/zh-CN/base/primitives/select.md b/website/zh-CN/base/primitives/select.md
index ddd6a51275..3caa26cfb2 100644
--- a/website/zh-CN/base/primitives/select.md
+++ b/website/zh-CN/base/primitives/select.md
@@ -15,7 +15,7 @@ order: 25
 原生示例和页面上方的 WASM 预览共用同一份实现：
 
 ```bash
-cargo run -p gpui-base --example components -- select
+cargo run -p gpui-base-examples -- select
 ```
 
 ## 导入
diff --git a/website/zh-CN/base/primitives/sheet.md b/website/zh-CN/base/primitives/sheet.md
index e4deedf3e8..607ecc07f7 100644
--- a/website/zh-CN/base/primitives/sheet.md
+++ b/website/zh-CN/base/primitives/sheet.md
@@ -15,7 +15,7 @@ order: 26
 原生示例和页面上方的 WASM 预览共用同一份实现：
 
 ```bash
-cargo run -p gpui-base --example components -- sheet
+cargo run -p gpui-base-examples -- sheet
 ```
 
 ## 导入
diff --git a/website/zh-CN/base/primitives/slider.md b/website/zh-CN/base/primitives/slider.md
index f5e68c84e5..45a052d0fa 100644
--- a/website/zh-CN/base/primitives/slider.md
+++ b/website/zh-CN/base/primitives/slider.md
@@ -15,7 +15,7 @@ order: 27
 原生示例和页面上方的 WASM 预览共用同一份实现：
 
 ```bash
-cargo run -p gpui-base --example components -- slider
+cargo run -p gpui-base-examples -- slider
 ```
 
 ## 导入
diff --git a/website/zh-CN/base/primitives/switch.md b/website/zh-CN/base/primitives/switch.md
index 23e50e663a..560896e5ac 100644
--- a/website/zh-CN/base/primitives/switch.md
+++ b/website/zh-CN/base/primitives/switch.md
@@ -15,7 +15,7 @@ order: 28
 原生示例和页面上方的 WASM 预览共用同一份实现：
 
 ```bash
-cargo run -p gpui-base --example components -- switch
+cargo run -p gpui-base-examples -- switch
 ```
 
 ## 导入
diff --git a/website/zh-CN/base/primitives/table.md b/website/zh-CN/base/primitives/table.md
index 7df8ebb984..16f2c97ff0 100644
--- a/website/zh-CN/base/primitives/table.md
+++ b/website/zh-CN/base/primitives/table.md
@@ -15,7 +15,7 @@ order: 29
 原生示例和页面上方的 WASM 预览共用同一份实现：
 
 ```bash
-cargo run -p gpui-base --example components -- table
+cargo run -p gpui-base-examples -- table
 ```
 
 ## 导入
diff --git a/website/zh-CN/base/primitives/tabs.md b/website/zh-CN/base/primitives/tabs.md
index 514c1722c2..d6e30afec4 100644
--- a/website/zh-CN/base/primitives/tabs.md
+++ b/website/zh-CN/base/primitives/tabs.md
@@ -15,7 +15,7 @@ order: 30
 原生示例和页面上方的 WASM 预览共用同一份实现：
 
 ```bash
-cargo run -p gpui-base --example components -- tabs
+cargo run -p gpui-base-examples -- tabs
 ```
 
 ## 导入
diff --git a/website/zh-CN/base/primitives/textarea.md b/website/zh-CN/base/primitives/textarea.md
index db5b33afba..04b11fdbaa 100644
--- a/website/zh-CN/base/primitives/textarea.md
+++ b/website/zh-CN/base/primitives/textarea.md
@@ -56,5 +56,5 @@ let value = notes.read(cx).value();
 ## 可运行示例
 
 ```bash
-cargo run -p gpui-base --example components -- textarea
+cargo run -p gpui-base-examples -- textarea
 ```
diff --git a/website/zh-CN/base/primitives/toast.md b/website/zh-CN/base/primitives/toast.md
index 063c3161ca..33f54a1d96 100644
--- a/website/zh-CN/base/primitives/toast.md
+++ b/website/zh-CN/base/primitives/toast.md
@@ -15,7 +15,7 @@ order: 31
 原生示例和页面上方的 WASM 预览共用同一份实现：
 
 ```bash
-cargo run -p gpui-base --example components -- toast
+cargo run -p gpui-base-examples -- toast
 ```
 
 ## 导入
diff --git a/website/zh-CN/base/primitives/toggle-group.md b/website/zh-CN/base/primitives/toggle-group.md
index b3f419fa29..49125842b0 100644
--- a/website/zh-CN/base/primitives/toggle-group.md
+++ b/website/zh-CN/base/primitives/toggle-group.md
@@ -15,7 +15,7 @@ order: 33
 原生示例和页面上方的 WASM 预览共用同一份实现：
 
 ```bash
-cargo run -p gpui-base --example components -- toggle-group
+cargo run -p gpui-base-examples -- toggle-group
 ```
 
 ## 导入
diff --git a/website/zh-CN/base/primitives/toggle.md b/website/zh-CN/base/primitives/toggle.md
index 3ef9d17d29..c4ab4132ff 100644
--- a/website/zh-CN/base/primitives/toggle.md
+++ b/website/zh-CN/base/primitives/toggle.md
@@ -15,7 +15,7 @@ order: 32
 原生示例和页面上方的 WASM 预览共用同一份实现：
 
 ```bash
-cargo run -p gpui-base --example components -- toggle
+cargo run -p gpui-base-examples -- toggle
 ```
 
 ## 导入
diff --git a/website/zh-CN/base/primitives/tooltip.md b/website/zh-CN/base/primitives/tooltip.md
index b254a5d9c3..158a501b57 100644
--- a/website/zh-CN/base/primitives/tooltip.md
+++ b/website/zh-CN/base/primitives/tooltip.md
@@ -15,7 +15,7 @@ order: 34
 原生示例和页面上方的 WASM 预览共用同一份实现：
 
 ```bash
-cargo run -p gpui-base --example components -- tooltip
+cargo run -p gpui-base-examples -- tooltip
 ```
 
 ## 导入
diff --git a/website/zh-CN/base/primitives/tree.md b/website/zh-CN/base/primitives/tree.md
index 0f8a7ffcb2..5b4da1dcb1 100644
--- a/website/zh-CN/base/primitives/tree.md
+++ b/website/zh-CN/base/primitives/tree.md
@@ -15,7 +15,7 @@ order: 35
 原生示例和页面上方的 WASM 预览共用同一份实现：
 
 ```bash
-cargo run -p gpui-base --example components -- tree
+cargo run -p gpui-base-examples -- tree
 ```
 
 ## 导入
diff --git a/website/zh-CN/base/text-selection.md b/website/zh-CN/base/text-selection.md
index dca259c8c7..43931446d2 100644
--- a/website/zh-CN/base/text-selection.md
+++ b/website/zh-CN/base/text-selection.md
@@ -35,7 +35,7 @@ order: 3
 ## 完整 Rust 示例
 
 ```bash
-cargo run -p gpui-base --example text-selection
+cargo run -p gpui-base-examples -- text-selection
 ```
 
 <<< ../../../crates/base/examples/showcase/components/text_selection.rs{rust}
diff --git a/website/zh-CN/base/text-view.md b/website/zh-CN/base/text-view.md
index 40ec40ae03..eb3865c88c 100644
--- a/website/zh-CN/base/text-view.md
+++ b/website/zh-CN/base/text-view.md
@@ -126,5 +126,5 @@ document.update(cx, |state, cx| state.set_text(updated_source, cx));
 <<< ../../../crates/base/examples/showcase/components/text_view.rs{rust}
 
 ```bash
-cargo run -p gpui-base --example components -- text-view
+cargo run -p gpui-base-examples -- text-view
 ```
diff --git a/website/zh-CN/base/virtual-list.md b/website/zh-CN/base/virtual-list.md
index 8b8a860634..feac2ca1b8 100644
--- a/website/zh-CN/base/virtual-list.md
+++ b/website/zh-CN/base/virtual-list.md
@@ -52,7 +52,7 @@ v_virtual_list(cx.entity(), "customers", sizes, |_this, range, _window, _cx| {
 ## 完整 Rust 示例
 
 ```bash
-cargo run -p gpui-base --example components -- virtual-list
+cargo run -p gpui-base-examples -- virtual-list
 ```
 
 <<< ../../../crates/base/examples/showcase/components/virtual_list.rs{rust}