Vendor dependencies for 0.3.0 release

vendor/bevy/examples/testbed/2d.rs

@@ -0,0 +1,286 @@
+//! 2d testbed
+//!
+//! You can switch scene by pressing the spacebar
+
+mod helpers;
+
+use bevy::prelude::*;
+use helpers::Next;
+
+fn main() {
+    let mut app = App::new();
+    app.add_plugins((DefaultPlugins,))
+        .init_state::<Scene>()
+        .add_systems(OnEnter(Scene::Shapes), shapes::setup)
+        .add_systems(OnEnter(Scene::Bloom), bloom::setup)
+        .add_systems(OnEnter(Scene::Text), text::setup)
+        .add_systems(OnEnter(Scene::Sprite), sprite::setup)
+        .add_systems(OnEnter(Scene::Gizmos), gizmos::setup)
+        .add_systems(Update, switch_scene)
+        .add_systems(Update, gizmos::draw_gizmos.run_if(in_state(Scene::Gizmos)));
+
+    #[cfg(feature = "bevy_ci_testing")]
+    app.add_systems(Update, helpers::switch_scene_in_ci::<Scene>);
+
+    app.run();
+}
+
+#[derive(Debug, Clone, Eq, PartialEq, Hash, States, Default)]
+#[states(scoped_entities)]
+enum Scene {
+    #[default]
+    Shapes,
+    Bloom,
+    Text,
+    Sprite,
+    Gizmos,
+}
+
+impl Next for Scene {
+    fn next(&self) -> Self {
+        match self {
+            Scene::Shapes => Scene::Bloom,
+            Scene::Bloom => Scene::Text,
+            Scene::Text => Scene::Sprite,
+            Scene::Sprite => Scene::Gizmos,
+            Scene::Gizmos => Scene::Shapes,
+        }
+    }
+}
+
+fn switch_scene(
+    keyboard: Res<ButtonInput<KeyCode>>,
+    scene: Res<State<Scene>>,
+    mut next_scene: ResMut<NextState<Scene>>,
+) {
+    if keyboard.just_pressed(KeyCode::Space) {
+        info!("Switching scene");
+        next_scene.set(scene.get().next());
+    }
+}
+
+mod shapes {
+    use bevy::prelude::*;
+
+    const X_EXTENT: f32 = 900.;
+
+    pub fn setup(
+        mut commands: Commands,
+        mut meshes: ResMut<Assets<Mesh>>,
+        mut materials: ResMut<Assets<ColorMaterial>>,
+    ) {
+        commands.spawn((Camera2d, StateScoped(super::Scene::Shapes)));
+
+        let shapes = [
+            meshes.add(Circle::new(50.0)),
+            meshes.add(CircularSector::new(50.0, 1.0)),
+            meshes.add(CircularSegment::new(50.0, 1.25)),
+            meshes.add(Ellipse::new(25.0, 50.0)),
+            meshes.add(Annulus::new(25.0, 50.0)),
+            meshes.add(Capsule2d::new(25.0, 50.0)),
+            meshes.add(Rhombus::new(75.0, 100.0)),
+            meshes.add(Rectangle::new(50.0, 100.0)),
+            meshes.add(RegularPolygon::new(50.0, 6)),
+            meshes.add(Triangle2d::new(
+                Vec2::Y * 50.0,
+                Vec2::new(-50.0, -50.0),
+                Vec2::new(50.0, -50.0),
+            )),
+        ];
+        let num_shapes = shapes.len();
+
+        for (i, shape) in shapes.into_iter().enumerate() {
+            // Distribute colors evenly across the rainbow.
+            let color = Color::hsl(360. * i as f32 / num_shapes as f32, 0.95, 0.7);
+
+            commands.spawn((
+                Mesh2d(shape),
+                MeshMaterial2d(materials.add(color)),
+                Transform::from_xyz(
+                    // Distribute shapes from -X_EXTENT/2 to +X_EXTENT/2.
+                    -X_EXTENT / 2. + i as f32 / (num_shapes - 1) as f32 * X_EXTENT,
+                    0.0,
+                    0.0,
+                ),
+                StateScoped(super::Scene::Shapes),
+            ));
+        }
+    }
+}
+
+mod bloom {
+    use bevy::{
+        core_pipeline::{bloom::Bloom, tonemapping::Tonemapping},
+        prelude::*,
+    };
+
+    pub fn setup(
+        mut commands: Commands,
+        mut meshes: ResMut<Assets<Mesh>>,
+        mut materials: ResMut<Assets<ColorMaterial>>,
+    ) {
+        commands.spawn((
+            Camera2d,
+            Camera {
+                hdr: true,
+                ..default()
+            },
+            Tonemapping::TonyMcMapface,
+            Bloom::default(),
+            StateScoped(super::Scene::Bloom),
+        ));
+
+        commands.spawn((
+            Mesh2d(meshes.add(Circle::new(100.))),
+            MeshMaterial2d(materials.add(Color::srgb(7.5, 0.0, 7.5))),
+            Transform::from_translation(Vec3::new(-200., 0., 0.)),
+            StateScoped(super::Scene::Bloom),
+        ));
+
+        commands.spawn((
+            Mesh2d(meshes.add(RegularPolygon::new(100., 6))),
+            MeshMaterial2d(materials.add(Color::srgb(6.25, 9.4, 9.1))),
+            Transform::from_translation(Vec3::new(200., 0., 0.)),
+            StateScoped(super::Scene::Bloom),
+        ));
+    }
+}
+
+mod text {
+    use bevy::color::palettes;
+    use bevy::prelude::*;
+    use bevy::sprite::Anchor;
+    use bevy::text::TextBounds;
+
+    pub fn setup(mut commands: Commands, asset_server: Res<AssetServer>) {
+        commands.spawn((Camera2d, StateScoped(super::Scene::Text)));
+
+        for (i, justify) in [
+            JustifyText::Left,
+            JustifyText::Right,
+            JustifyText::Center,
+            JustifyText::Justified,
+        ]
+        .into_iter()
+        .enumerate()
+        {
+            let y = 230. - 150. * i as f32;
+            spawn_anchored_text(&mut commands, -300. * Vec3::X + y * Vec3::Y, justify, None);
+            spawn_anchored_text(
+                &mut commands,
+                300. * Vec3::X + y * Vec3::Y,
+                justify,
+                Some(TextBounds::new(150., 55.)),
+            );
+        }
+
+        let sans_serif = TextFont::from_font(asset_server.load("fonts/FiraSans-Bold.ttf"));
+
+        const NUM_ITERATIONS: usize = 10;
+        for i in 0..NUM_ITERATIONS {
+            let fraction = i as f32 / (NUM_ITERATIONS - 1) as f32;
+
+            commands.spawn((
+                Text2d::new("Bevy"),
+                sans_serif.clone(),
+                Transform::from_xyz(0.0, fraction * 200.0, i as f32)
+                    .with_scale(1.0 + Vec2::splat(fraction).extend(1.))
+                    .with_rotation(Quat::from_rotation_z(fraction * core::f32::consts::PI)),
+                TextColor(Color::hsla(fraction * 360.0, 0.8, 0.8, 0.8)),
+                StateScoped(super::Scene::Text),
+            ));
+        }
+
+        commands.spawn((
+            Text2d::new("This text is invisible."),
+            Visibility::Hidden,
+            StateScoped(super::Scene::Text),
+        ));
+    }
+
+    fn spawn_anchored_text(
+        commands: &mut Commands,
+        dest: Vec3,
+        justify: JustifyText,
+        bounds: Option<TextBounds>,
+    ) {
+        commands.spawn((
+            Sprite {
+                color: palettes::css::YELLOW.into(),
+                custom_size: Some(5. * Vec2::ONE),
+                ..Default::default()
+            },
+            Transform::from_translation(dest),
+            StateScoped(super::Scene::Text),
+        ));
+
+        for anchor in [
+            Anchor::TopLeft,
+            Anchor::TopRight,
+            Anchor::BottomRight,
+            Anchor::BottomLeft,
+        ] {
+            let mut text = commands.spawn((
+                Text2d::new("L R\n"),
+                TextLayout::new_with_justify(justify),
+                Transform::from_translation(dest + Vec3::Z),
+                anchor,
+                StateScoped(super::Scene::Text),
+            ));
+            text.with_children(|parent| {
+                parent.spawn((
+                    TextSpan::new(format!("{anchor:?}\n")),
+                    TextFont::from_font_size(14.0),
+                    TextColor(palettes::tailwind::BLUE_400.into()),
+                ));
+                parent.spawn((
+                    TextSpan::new(format!("{justify:?}")),
+                    TextFont::from_font_size(14.0),
+                    TextColor(palettes::tailwind::GREEN_400.into()),
+                ));
+            });
+
+            if let Some(bounds) = bounds {
+                text.insert(bounds);
+
+                commands.spawn((
+                    Sprite {
+                        color: palettes::tailwind::GRAY_900.into(),
+                        custom_size: Some(Vec2::new(bounds.width.unwrap(), bounds.height.unwrap())),
+                        anchor,
+                        ..Default::default()
+                    },
+                    Transform::from_translation(dest - Vec3::Z),
+                    StateScoped(super::Scene::Text),
+                ));
+            }
+        }
+    }
+}
+
+mod sprite {
+    use bevy::prelude::*;
+
+    pub fn setup(mut commands: Commands, asset_server: Res<AssetServer>) {
+        commands.spawn((Camera2d, StateScoped(super::Scene::Sprite)));
+        commands.spawn((
+            Sprite::from_image(asset_server.load("branding/bevy_bird_dark.png")),
+            StateScoped(super::Scene::Sprite),
+        ));
+    }
+}
+
+mod gizmos {
+    use bevy::{color::palettes::css::*, prelude::*};
+
+    pub fn setup(mut commands: Commands) {
+        commands.spawn((Camera2d, StateScoped(super::Scene::Gizmos)));
+    }
+
+    pub fn draw_gizmos(mut gizmos: Gizmos) {
+        gizmos.rect_2d(Isometry2d::IDENTITY, Vec2::new(200.0, 200.0), RED);
+        gizmos
+            .circle_2d(Isometry2d::IDENTITY, 200.0, GREEN)
+            .resolution(64);
+    }
+}

vendor/bevy/examples/testbed/3d.rs

@@ -0,0 +1,326 @@
+//! 3d testbed
+//!
+//! You can switch scene by pressing the spacebar
+
+mod helpers;
+
+use bevy::prelude::*;
+use helpers::Next;
+
+fn main() {
+    let mut app = App::new();
+    app.add_plugins((DefaultPlugins,))
+        .init_state::<Scene>()
+        .add_systems(OnEnter(Scene::Light), light::setup)
+        .add_systems(OnEnter(Scene::Bloom), bloom::setup)
+        .add_systems(OnEnter(Scene::Gltf), gltf::setup)
+        .add_systems(OnEnter(Scene::Animation), animation::setup)
+        .add_systems(OnEnter(Scene::Gizmos), gizmos::setup)
+        .add_systems(Update, switch_scene)
+        .add_systems(Update, gizmos::draw_gizmos.run_if(in_state(Scene::Gizmos)));
+
+    #[cfg(feature = "bevy_ci_testing")]
+    app.add_systems(Update, helpers::switch_scene_in_ci::<Scene>);
+
+    app.run();
+}
+
+#[derive(Debug, Clone, Eq, PartialEq, Hash, States, Default)]
+#[states(scoped_entities)]
+enum Scene {
+    #[default]
+    Light,
+    Bloom,
+    Gltf,
+    Animation,
+    Gizmos,
+}
+
+impl Next for Scene {
+    fn next(&self) -> Self {
+        match self {
+            Scene::Light => Scene::Bloom,
+            Scene::Bloom => Scene::Gltf,
+            Scene::Gltf => Scene::Animation,
+            Scene::Animation => Scene::Gizmos,
+            Scene::Gizmos => Scene::Light,
+        }
+    }
+}
+
+fn switch_scene(
+    keyboard: Res<ButtonInput<KeyCode>>,
+    scene: Res<State<Scene>>,
+    mut next_scene: ResMut<NextState<Scene>>,
+) {
+    if keyboard.just_pressed(KeyCode::Space) {
+        info!("Switching scene");
+        next_scene.set(scene.get().next());
+    }
+}
+
+mod light {
+    use std::f32::consts::PI;
+
+    use bevy::{
+        color::palettes::css::{DEEP_PINK, LIME, RED},
+        prelude::*,
+    };
+
+    const CURRENT_SCENE: super::Scene = super::Scene::Light;
+
+    pub fn setup(
+        mut commands: Commands,
+        mut meshes: ResMut<Assets<Mesh>>,
+        mut materials: ResMut<Assets<StandardMaterial>>,
+    ) {
+        commands.spawn((
+            Mesh3d(meshes.add(Plane3d::default().mesh().size(10.0, 10.0))),
+            MeshMaterial3d(materials.add(StandardMaterial {
+                base_color: Color::WHITE,
+                perceptual_roughness: 1.0,
+                ..default()
+            })),
+            StateScoped(CURRENT_SCENE),
+        ));
+
+        commands.spawn((
+            Mesh3d(meshes.add(Cuboid::default())),
+            MeshMaterial3d(materials.add(StandardMaterial {
+                base_color: DEEP_PINK.into(),
+                ..default()
+            })),
+            Transform::from_xyz(0.0, 1.0, 0.0),
+            StateScoped(CURRENT_SCENE),
+        ));
+
+        commands.spawn((
+            PointLight {
+                intensity: 100_000.0,
+                color: RED.into(),
+                shadows_enabled: true,
+                ..default()
+            },
+            Transform::from_xyz(1.0, 2.0, 0.0),
+            StateScoped(CURRENT_SCENE),
+        ));
+
+        commands.spawn((
+            SpotLight {
+                intensity: 100_000.0,
+                color: LIME.into(),
+                shadows_enabled: true,
+                inner_angle: 0.6,
+                outer_angle: 0.8,
+                ..default()
+            },
+            Transform::from_xyz(-1.0, 2.0, 0.0).looking_at(Vec3::new(-1.0, 0.0, 0.0), Vec3::Z),
+            StateScoped(CURRENT_SCENE),
+        ));
+
+        commands.spawn((
+            DirectionalLight {
+                illuminance: light_consts::lux::OVERCAST_DAY,
+                shadows_enabled: true,
+                ..default()
+            },
+            Transform {
+                translation: Vec3::new(0.0, 2.0, 0.0),
+                rotation: Quat::from_rotation_x(-PI / 4.),
+                ..default()
+            },
+            StateScoped(CURRENT_SCENE),
+        ));
+
+        commands.spawn((
+            Camera3d::default(),
+            Transform::from_xyz(-2.0, 2.5, 5.0).looking_at(Vec3::ZERO, Vec3::Y),
+            StateScoped(CURRENT_SCENE),
+        ));
+    }
+}
+
+mod bloom {
+    use bevy::{
+        core_pipeline::{bloom::Bloom, tonemapping::Tonemapping},
+        prelude::*,
+    };
+
+    const CURRENT_SCENE: super::Scene = super::Scene::Bloom;
+
+    pub fn setup(
+        mut commands: Commands,
+        mut meshes: ResMut<Assets<Mesh>>,
+        mut materials: ResMut<Assets<StandardMaterial>>,
+    ) {
+        commands.spawn((
+            Camera3d::default(),
+            Camera {
+                hdr: true,
+                ..default()
+            },
+            Tonemapping::TonyMcMapface,
+            Transform::from_xyz(-2.0, 2.5, 5.0).looking_at(Vec3::ZERO, Vec3::Y),
+            Bloom::NATURAL,
+            StateScoped(CURRENT_SCENE),
+        ));
+
+        let material_emissive1 = materials.add(StandardMaterial {
+            emissive: LinearRgba::rgb(13.99, 5.32, 2.0),
+            ..default()
+        });
+        let material_emissive2 = materials.add(StandardMaterial {
+            emissive: LinearRgba::rgb(2.0, 13.99, 5.32),
+            ..default()
+        });
+
+        let mesh = meshes.add(Sphere::new(0.5).mesh().ico(5).unwrap());
+
+        for z in -2..3_i32 {
+            let material = match (z % 2).abs() {
+                0 => material_emissive1.clone(),
+                1 => material_emissive2.clone(),
+                _ => unreachable!(),
+            };
+
+            commands.spawn((
+                Mesh3d(mesh.clone()),
+                MeshMaterial3d(material),
+                Transform::from_xyz(z as f32 * 2.0, 0.0, 0.0),
+                StateScoped(CURRENT_SCENE),
+            ));
+        }
+    }
+}
+
+mod gltf {
+    use bevy::prelude::*;
+
+    const CURRENT_SCENE: super::Scene = super::Scene::Gltf;
+
+    pub fn setup(mut commands: Commands, asset_server: Res<AssetServer>) {
+        commands.spawn((
+            Camera3d::default(),
+            Transform::from_xyz(0.7, 0.7, 1.0).looking_at(Vec3::new(0.0, 0.3, 0.0), Vec3::Y),
+            EnvironmentMapLight {
+                diffuse_map: asset_server.load("environment_maps/pisa_diffuse_rgb9e5_zstd.ktx2"),
+                specular_map: asset_server.load("environment_maps/pisa_specular_rgb9e5_zstd.ktx2"),
+                intensity: 250.0,
+                ..default()
+            },
+            StateScoped(CURRENT_SCENE),
+        ));
+
+        commands.spawn((
+            DirectionalLight {
+                shadows_enabled: true,
+                ..default()
+            },
+            StateScoped(CURRENT_SCENE),
+        ));
+        commands.spawn((
+            SceneRoot(asset_server.load(
+                GltfAssetLabel::Scene(0).from_asset("models/FlightHelmet/FlightHelmet.gltf"),
+            )),
+            StateScoped(CURRENT_SCENE),
+        ));
+    }
+}
+
+mod animation {
+    use std::{f32::consts::PI, time::Duration};
+
+    use bevy::{prelude::*, scene::SceneInstanceReady};
+
+    const CURRENT_SCENE: super::Scene = super::Scene::Animation;
+    const FOX_PATH: &str = "models/animated/Fox.glb";
+
+    #[derive(Resource)]
+    struct Animation {
+        animation: AnimationNodeIndex,
+        graph: Handle<AnimationGraph>,
+    }
+
+    pub fn setup(
+        mut commands: Commands,
+        asset_server: Res<AssetServer>,
+        mut graphs: ResMut<Assets<AnimationGraph>>,
+    ) {
+        let (graph, node) = AnimationGraph::from_clip(
+            asset_server.load(GltfAssetLabel::Animation(2).from_asset(FOX_PATH)),
+        );
+
+        let graph_handle = graphs.add(graph);
+        commands.insert_resource(Animation {
+            animation: node,
+            graph: graph_handle,
+        });
+
+        commands.spawn((
+            Camera3d::default(),
+            Transform::from_xyz(100.0, 100.0, 150.0).looking_at(Vec3::new(0.0, 20.0, 0.0), Vec3::Y),
+            StateScoped(CURRENT_SCENE),
+        ));
+
+        commands.spawn((
+            Transform::from_rotation(Quat::from_euler(EulerRot::ZYX, 0.0, 1.0, -PI / 4.)),
+            DirectionalLight {
+                shadows_enabled: true,
+                ..default()
+            },
+            StateScoped(CURRENT_SCENE),
+        ));
+
+        commands
+            .spawn((
+                SceneRoot(asset_server.load(GltfAssetLabel::Scene(0).from_asset(FOX_PATH))),
+                StateScoped(CURRENT_SCENE),
+            ))
+            .observe(pause_animation_frame);
+    }
+
+    fn pause_animation_frame(
+        trigger: Trigger<SceneInstanceReady>,
+        children: Query<&Children>,
+        mut commands: Commands,
+        animation: Res<Animation>,
+        mut players: Query<(Entity, &mut AnimationPlayer)>,
+    ) {
+        for child in children.iter_descendants(trigger.target()) {
+            if let Ok((entity, mut player)) = players.get_mut(child) {
+                let mut transitions = AnimationTransitions::new();
+                transitions
+                    .play(&mut player, animation.animation, Duration::ZERO)
+                    .seek_to(0.5)
+                    .pause();
+
+                commands
+                    .entity(entity)
+                    .insert(AnimationGraphHandle(animation.graph.clone()))
+                    .insert(transitions);
+            }
+        }
+    }
+}
+
+mod gizmos {
+    use bevy::{color::palettes::css::*, prelude::*};
+
+    pub fn setup(mut commands: Commands) {
+        commands.spawn((
+            Camera3d::default(),
+            Transform::from_xyz(-2.0, 2.5, 5.0).looking_at(Vec3::ZERO, Vec3::Y),
+            StateScoped(super::Scene::Gizmos),
+        ));
+    }
+
+    pub fn draw_gizmos(mut gizmos: Gizmos) {
+        gizmos.cuboid(
+            Transform::from_translation(Vec3::X * 2.0).with_scale(Vec3::splat(2.0)),
+            RED,
+        );
+        gizmos
+            .sphere(Isometry3d::from_translation(Vec3::X * -2.0), 1.0, GREEN)
+            .resolution(30_000 / 3);
+    }
+}

vendor/bevy/examples/testbed/full_ui.rs

@@ -0,0 +1,436 @@
+//! This example illustrates the various features of Bevy UI.
+
+use std::f32::consts::PI;
+
+use accesskit::{Node as Accessible, Role};
+use bevy::{
+    a11y::AccessibilityNode,
+    color::palettes::{basic::LIME, css::DARK_GRAY},
+    input::mouse::{MouseScrollUnit, MouseWheel},
+    picking::hover::HoverMap,
+    prelude::*,
+    ui::widget::NodeImageMode,
+};
+
+fn main() {
+    let mut app = App::new();
+    app.add_plugins(DefaultPlugins)
+        .add_systems(Startup, setup)
+        .add_systems(Update, update_scroll_position);
+
+    #[cfg(feature = "bevy_ui_debug")]
+    app.add_systems(Update, toggle_debug_overlay);
+
+    app.run();
+}
+
+fn setup(mut commands: Commands, asset_server: Res<AssetServer>) {
+    // Camera
+    commands.spawn((Camera2d, IsDefaultUiCamera, BoxShadowSamples(6)));
+
+    // root node
+    commands
+        .spawn(Node {
+            width: Val::Percent(100.0),
+            height: Val::Percent(100.0),
+            justify_content: JustifyContent::SpaceBetween,
+            ..default()
+        })
+        .insert(Pickable::IGNORE)
+        .with_children(|parent| {
+            // left vertical fill (border)
+            parent
+                .spawn((
+                    Node {
+                        width: Val::Px(200.),
+                        border: UiRect::all(Val::Px(2.)),
+                        ..default()
+                    },
+                    BackgroundColor(Color::srgb(0.65, 0.65, 0.65)),
+                ))
+                .with_children(|parent| {
+                    // left vertical fill (content)
+                    parent
+                        .spawn((
+                            Node {
+                                width: Val::Percent(100.),
+                                flex_direction: FlexDirection::Column,
+                                padding: UiRect::all(Val::Px(5.)),
+                                row_gap: Val::Px(5.),
+                                ..default()
+                            },
+                            BackgroundColor(Color::srgb(0.15, 0.15, 0.15)),
+                            Visibility::Visible,
+                        ))
+                        .with_children(|parent| {
+                            // text
+                            parent.spawn((
+                                Text::new("Text Example"),
+                                TextFont {
+                                    font: asset_server.load("fonts/FiraSans-Bold.ttf"),
+                                    font_size: 25.0,
+                                    ..default()
+                                },
+                                // Because this is a distinct label widget and
+                                // not button/list item text, this is necessary
+                                // for accessibility to treat the text accordingly.
+                                Label,
+                            ));
+
+                            #[cfg(feature = "bevy_ui_debug")]
+                            {
+                                // Debug overlay text
+                                parent.spawn((
+                                    Text::new("Press Space to toggle debug outlines."),
+                                    TextFont {
+                                        font: asset_server.load("fonts/FiraSans-Bold.ttf"),
+                                        ..default()
+                                    },
+                                    Label,
+                                ));
+
+                                parent.spawn((
+                                    Text::new("V: toggle UI root's visibility"),
+                                    TextFont {
+                                        font: asset_server.load("fonts/FiraSans-Bold.ttf"),
+                                        font_size: 12.,
+                                        ..default()
+                                    },
+                                    Label,
+                                ));
+
+                                parent.spawn((
+                                    Text::new("S: toggle outlines for hidden nodes"),
+                                    TextFont {
+                                        font: asset_server.load("fonts/FiraSans-Bold.ttf"),
+                                        font_size: 12.,
+                                        ..default()
+                                    },
+                                    Label,
+                                ));
+                                parent.spawn((
+                                    Text::new("C: toggle outlines for clipped nodes"),
+                                    TextFont {
+                                        font: asset_server.load("fonts/FiraSans-Bold.ttf"),
+                                        font_size: 12.,
+                                        ..default()
+                                    },
+                                    Label,
+                                ));
+                            }
+                            #[cfg(not(feature = "bevy_ui_debug"))]
+                            parent.spawn((
+                                Text::new("Try enabling feature \"bevy_ui_debug\"."),
+                                TextFont {
+                                    font: asset_server.load("fonts/FiraSans-Bold.ttf"),
+                                    ..default()
+                                },
+                                Label,
+                            ));
+                        });
+                });
+            // right vertical fill
+            parent
+                .spawn(Node {
+                    flex_direction: FlexDirection::Column,
+                    justify_content: JustifyContent::Center,
+                    align_items: AlignItems::Center,
+                    width: Val::Px(200.),
+                    ..default()
+                })
+                .with_children(|parent| {
+                    // Title
+                    parent.spawn((
+                        Text::new("Scrolling list"),
+                        TextFont {
+                            font: asset_server.load("fonts/FiraSans-Bold.ttf"),
+                            font_size: 21.,
+                            ..default()
+                        },
+                        Label,
+                    ));
+                    // Scrolling list
+                    parent
+                        .spawn((
+                            Node {
+                                flex_direction: FlexDirection::Column,
+                                align_self: AlignSelf::Stretch,
+                                height: Val::Percent(50.),
+                                overflow: Overflow::scroll_y(),
+                                ..default()
+                            },
+                            BackgroundColor(Color::srgb(0.10, 0.10, 0.10)),
+                        ))
+                        .with_children(|parent| {
+                            // List items
+                            for i in 0..25 {
+                                parent
+                                    .spawn((
+                                        Text(format!("Item {i}")),
+                                        TextFont {
+                                            font: asset_server.load("fonts/FiraSans-Bold.ttf"),
+                                            ..default()
+                                        },
+                                        Label,
+                                        AccessibilityNode(Accessible::new(Role::ListItem)),
+                                    ))
+                                    .insert(Pickable {
+                                        should_block_lower: false,
+                                        ..default()
+                                    });
+                            }
+                        });
+                });
+
+            parent
+                .spawn(Node {
+                    left: Val::Px(210.),
+                    bottom: Val::Px(10.),
+                    position_type: PositionType::Absolute,
+                    ..default()
+                })
+                .with_children(|parent| {
+                    parent
+                        .spawn((
+                            Node {
+                                width: Val::Px(200.0),
+                                height: Val::Px(200.0),
+                                border: UiRect::all(Val::Px(20.)),
+                                flex_direction: FlexDirection::Column,
+                                justify_content: JustifyContent::Center,
+                                ..default()
+                            },
+                            BorderColor(LIME.into()),
+                            BackgroundColor(Color::srgb(0.8, 0.8, 1.)),
+                        ))
+                        .with_children(|parent| {
+                            parent.spawn((
+                                ImageNode::new(asset_server.load("branding/bevy_logo_light.png")),
+                                // Uses the transform to rotate the logo image by 45 degrees
+                                Transform::from_rotation(Quat::from_rotation_z(0.25 * PI)),
+                                BorderRadius::all(Val::Px(10.)),
+                                Outline {
+                                    width: Val::Px(2.),
+                                    offset: Val::Px(4.),
+                                    color: DARK_GRAY.into(),
+                                },
+                            ));
+                        });
+                });
+
+            let shadow_style = ShadowStyle {
+                color: Color::BLACK.with_alpha(0.5),
+                blur_radius: Val::Px(2.),
+                x_offset: Val::Px(10.),
+                y_offset: Val::Px(10.),
+                ..default()
+            };
+
+            // render order test: reddest in the back, whitest in the front (flex center)
+            parent
+                .spawn(Node {
+                    width: Val::Percent(100.0),
+                    height: Val::Percent(100.0),
+                    position_type: PositionType::Absolute,
+                    align_items: AlignItems::Center,
+                    justify_content: JustifyContent::Center,
+                    ..default()
+                })
+                .insert(Pickable::IGNORE)
+                .with_children(|parent| {
+                    parent
+                        .spawn((
+                            Node {
+                                width: Val::Px(100.0),
+                                height: Val::Px(100.0),
+                                ..default()
+                            },
+                            BackgroundColor(Color::srgb(1.0, 0.0, 0.)),
+                            BoxShadow::from(shadow_style),
+                        ))
+                        .with_children(|parent| {
+                            parent.spawn((
+                                Node {
+                                    // Take the size of the parent node.
+                                    width: Val::Percent(100.0),
+                                    height: Val::Percent(100.0),
+                                    position_type: PositionType::Absolute,
+                                    left: Val::Px(20.),
+                                    bottom: Val::Px(20.),
+                                    ..default()
+                                },
+                                BackgroundColor(Color::srgb(1.0, 0.3, 0.3)),
+                                BoxShadow::from(shadow_style),
+                            ));
+                            parent.spawn((
+                                Node {
+                                    width: Val::Percent(100.0),
+                                    height: Val::Percent(100.0),
+                                    position_type: PositionType::Absolute,
+                                    left: Val::Px(40.),
+                                    bottom: Val::Px(40.),
+                                    ..default()
+                                },
+                                BackgroundColor(Color::srgb(1.0, 0.5, 0.5)),
+                                BoxShadow::from(shadow_style),
+                            ));
+                            parent.spawn((
+                                Node {
+                                    width: Val::Percent(100.0),
+                                    height: Val::Percent(100.0),
+                                    position_type: PositionType::Absolute,
+                                    left: Val::Px(60.),
+                                    bottom: Val::Px(60.),
+                                    ..default()
+                                },
+                                BackgroundColor(Color::srgb(0.0, 0.7, 0.7)),
+                                BoxShadow::from(shadow_style),
+                            ));
+                            // alpha test
+                            parent.spawn((
+                                Node {
+                                    width: Val::Percent(100.0),
+                                    height: Val::Percent(100.0),
+                                    position_type: PositionType::Absolute,
+                                    left: Val::Px(80.),
+                                    bottom: Val::Px(80.),
+                                    ..default()
+                                },
+                                BackgroundColor(Color::srgba(1.0, 0.9, 0.9, 0.4)),
+                                BoxShadow::from(ShadowStyle {
+                                    color: Color::BLACK.with_alpha(0.3),
+                                    ..shadow_style
+                                }),
+                            ));
+                        });
+                });
+            // bevy logo (flex center)
+            parent
+                .spawn(Node {
+                    width: Val::Percent(100.0),
+                    position_type: PositionType::Absolute,
+                    justify_content: JustifyContent::Center,
+                    align_items: AlignItems::FlexStart,
+                    ..default()
+                })
+                .with_children(|parent| {
+                    // bevy logo (image)
+                    parent
+                        .spawn((
+                            ImageNode::new(asset_server.load("branding/bevy_logo_dark_big.png"))
+                                .with_mode(NodeImageMode::Stretch),
+                            Node {
+                                width: Val::Px(500.0),
+                                height: Val::Px(125.0),
+                                margin: UiRect::top(Val::VMin(5.)),
+                                ..default()
+                            },
+                        ))
+                        .with_children(|parent| {
+                            // alt text
+                            // This UI node takes up no space in the layout and the `Text` component is used by the accessibility module
+                            // and is not rendered.
+                            parent.spawn((
+                                Node {
+                                    display: Display::None,
+                                    ..default()
+                                },
+                                Text::new("Bevy logo"),
+                            ));
+                        });
+                });
+
+            // four bevy icons demonstrating image flipping
+            parent
+                .spawn(Node {
+                    width: Val::Percent(100.0),
+                    height: Val::Percent(100.0),
+                    position_type: PositionType::Absolute,
+                    justify_content: JustifyContent::Center,
+                    align_items: AlignItems::FlexEnd,
+                    column_gap: Val::Px(10.),
+                    padding: UiRect::all(Val::Px(10.)),
+                    ..default()
+                })
+                .insert(Pickable::IGNORE)
+                .with_children(|parent| {
+                    for (flip_x, flip_y) in
+                        [(false, false), (false, true), (true, true), (true, false)]
+                    {
+                        parent.spawn((
+                            ImageNode {
+                                image: asset_server.load("branding/icon.png"),
+                                flip_x,
+                                flip_y,
+                                ..default()
+                            },
+                            Node {
+                                // The height will be chosen automatically to preserve the image's aspect ratio
+                                width: Val::Px(75.),
+                                ..default()
+                            },
+                        ));
+                    }
+                });
+        });
+}
+
+#[cfg(feature = "bevy_ui_debug")]
+// The system that will enable/disable the debug outlines around the nodes
+fn toggle_debug_overlay(
+    input: Res<ButtonInput<KeyCode>>,
+    mut debug_options: ResMut<UiDebugOptions>,
+    mut root_node_query: Query<&mut Visibility, (With<Node>, Without<ChildOf>)>,
+) {
+    info_once!("The debug outlines are enabled, press Space to turn them on/off");
+    if input.just_pressed(KeyCode::Space) {
+        // The toggle method will enable the debug overlay if disabled and disable if enabled
+        debug_options.toggle();
+    }
+
+    if input.just_pressed(KeyCode::KeyS) {
+        // Toggle debug outlines for nodes with `ViewVisibility` set to false.
+        debug_options.show_hidden = !debug_options.show_hidden;
+    }
+
+    if input.just_pressed(KeyCode::KeyC) {
+        // Toggle outlines for clipped UI nodes.
+        debug_options.show_clipped = !debug_options.show_clipped;
+    }
+
+    if input.just_pressed(KeyCode::KeyV) {
+        for mut visibility in root_node_query.iter_mut() {
+            // Toggle the UI root node's visibility
+            visibility.toggle_inherited_hidden();
+        }
+    }
+}
+
+/// Updates the scroll position of scrollable nodes in response to mouse input
+pub fn update_scroll_position(
+    mut mouse_wheel_events: EventReader<MouseWheel>,
+    hover_map: Res<HoverMap>,
+    mut scrolled_node_query: Query<&mut ScrollPosition>,
+    keyboard_input: Res<ButtonInput<KeyCode>>,
+) {
+    for mouse_wheel_event in mouse_wheel_events.read() {
+        let (mut dx, mut dy) = match mouse_wheel_event.unit {
+            MouseScrollUnit::Line => (mouse_wheel_event.x * 20., mouse_wheel_event.y * 20.),
+            MouseScrollUnit::Pixel => (mouse_wheel_event.x, mouse_wheel_event.y),
+        };
+
+        if keyboard_input.pressed(KeyCode::ShiftLeft) || keyboard_input.pressed(KeyCode::ShiftRight)
+        {
+            std::mem::swap(&mut dx, &mut dy);
+        }
+
+        for (_pointer, pointer_map) in hover_map.iter() {
+            for (entity, _hit) in pointer_map.iter() {
+                if let Ok(mut scroll_position) = scrolled_node_query.get_mut(*entity) {
+                    scroll_position.offset_x -= dx;
+                    scroll_position.offset_y -= dy;
+                }
+            }
+        }
+    }
+}

vendor/bevy/examples/testbed/helpers.rs

@@ -0,0 +1,45 @@
+#[cfg(feature = "bevy_ci_testing")]
+use bevy::{
+    dev_tools::ci_testing::{CiTestingConfig, CiTestingEvent, CiTestingEventOnFrame},
+    diagnostic::FrameCount,
+    platform::collections::HashSet,
+    prelude::*,
+    render::view::screenshot::Captured,
+    state::state::FreelyMutableState,
+};
+
+#[cfg(feature = "bevy_ci_testing")]
+pub fn switch_scene_in_ci<Scene: States + FreelyMutableState + Next>(
+    mut ci_config: ResMut<CiTestingConfig>,
+    scene: Res<State<Scene>>,
+    mut next_scene: ResMut<NextState<Scene>>,
+    mut scenes_visited: Local<HashSet<Scene>>,
+    frame_count: Res<FrameCount>,
+    captured: RemovedComponents<Captured>,
+) {
+    if scene.is_changed() {
+        // Changed scene! trigger a screenshot in 100 frames
+        ci_config.events.push(CiTestingEventOnFrame(
+            frame_count.0 + 100,
+            CiTestingEvent::NamedScreenshot(format!("{:?}", scene.get())),
+        ));
+        if scenes_visited.contains(scene.get()) {
+            // Exit once all scenes have been screenshotted
+            ci_config.events.push(CiTestingEventOnFrame(
+                frame_count.0 + 1,
+                CiTestingEvent::AppExit,
+            ));
+        }
+        return;
+    }
+
+    if !captured.is_empty() {
+        // Screenshot taken! Switch to the next scene
+        scenes_visited.insert(scene.get().clone());
+        next_scene.set(scene.get().next());
+    }
+}
+
+pub trait Next {
+    fn next(&self) -> Self;
+}

vendor/bevy/examples/testbed/ui.rs

@@ -0,0 +1,533 @@
+//! UI testbed
+//!
+//! You can switch scene by pressing the spacebar
+
+mod helpers;
+
+use bevy::prelude::*;
+use helpers::Next;
+
+fn main() {
+    let mut app = App::new();
+    app.add_plugins((DefaultPlugins,))
+        .init_state::<Scene>()
+        .add_systems(OnEnter(Scene::Image), image::setup)
+        .add_systems(OnEnter(Scene::Text), text::setup)
+        .add_systems(OnEnter(Scene::Grid), grid::setup)
+        .add_systems(OnEnter(Scene::Borders), borders::setup)
+        .add_systems(OnEnter(Scene::BoxShadow), box_shadow::setup)
+        .add_systems(OnEnter(Scene::TextWrap), text_wrap::setup)
+        .add_systems(OnEnter(Scene::Overflow), overflow::setup)
+        .add_systems(OnEnter(Scene::Slice), slice::setup)
+        .add_systems(OnEnter(Scene::LayoutRounding), layout_rounding::setup)
+        .add_systems(Update, switch_scene);
+
+    #[cfg(feature = "bevy_ci_testing")]
+    app.add_systems(Update, helpers::switch_scene_in_ci::<Scene>);
+
+    app.run();
+}
+
+#[derive(Debug, Clone, Eq, PartialEq, Hash, States, Default)]
+#[states(scoped_entities)]
+enum Scene {
+    #[default]
+    Image,
+    Text,
+    Grid,
+    Borders,
+    BoxShadow,
+    TextWrap,
+    Overflow,
+    Slice,
+    LayoutRounding,
+}
+
+impl Next for Scene {
+    fn next(&self) -> Self {
+        match self {
+            Scene::Image => Scene::Text,
+            Scene::Text => Scene::Grid,
+            Scene::Grid => Scene::Borders,
+            Scene::Borders => Scene::BoxShadow,
+            Scene::BoxShadow => Scene::TextWrap,
+            Scene::TextWrap => Scene::Overflow,
+            Scene::Overflow => Scene::Slice,
+            Scene::Slice => Scene::LayoutRounding,
+            Scene::LayoutRounding => Scene::Image,
+        }
+    }
+}
+
+fn switch_scene(
+    keyboard: Res<ButtonInput<KeyCode>>,
+    scene: Res<State<Scene>>,
+    mut next_scene: ResMut<NextState<Scene>>,
+) {
+    if keyboard.just_pressed(KeyCode::Space) {
+        info!("Switching scene");
+        next_scene.set(scene.get().next());
+    }
+}
+
+mod image {
+    use bevy::prelude::*;
+
+    pub fn setup(mut commands: Commands, asset_server: Res<AssetServer>) {
+        commands.spawn((Camera2d, StateScoped(super::Scene::Image)));
+        commands.spawn((
+            ImageNode::new(asset_server.load("branding/bevy_logo_dark.png")),
+            StateScoped(super::Scene::Image),
+        ));
+    }
+}
+
+mod text {
+    use bevy::prelude::*;
+
+    pub fn setup(mut commands: Commands, asset_server: Res<AssetServer>) {
+        commands.spawn((Camera2d, StateScoped(super::Scene::Text)));
+        commands.spawn((
+            Text::new("Hello World."),
+            TextFont {
+                font: asset_server.load("fonts/FiraSans-Bold.ttf"),
+                font_size: 200.,
+                ..default()
+            },
+            StateScoped(super::Scene::Text),
+        ));
+    }
+}
+
+mod grid {
+    use bevy::{color::palettes::css::*, prelude::*};
+
+    pub fn setup(mut commands: Commands) {
+        commands.spawn((Camera2d, StateScoped(super::Scene::Grid)));
+        // Top-level grid (app frame)
+        commands
+            .spawn((
+                Node {
+                    display: Display::Grid,
+                    width: Val::Percent(100.0),
+                    height: Val::Percent(100.0),
+                    grid_template_columns: vec![GridTrack::min_content(), GridTrack::flex(1.0)],
+                    grid_template_rows: vec![
+                        GridTrack::auto(),
+                        GridTrack::flex(1.0),
+                        GridTrack::px(40.),
+                    ],
+                    ..default()
+                },
+                BackgroundColor(Color::WHITE),
+                StateScoped(super::Scene::Grid),
+            ))
+            .with_children(|builder| {
+                // Header
+                builder.spawn((
+                    Node {
+                        display: Display::Grid,
+                        grid_column: GridPlacement::span(2),
+                        padding: UiRect::all(Val::Px(40.0)),
+                        ..default()
+                    },
+                    BackgroundColor(RED.into()),
+                ));
+
+                // Main content grid (auto placed in row 2, column 1)
+                builder
+                    .spawn((
+                        Node {
+                            height: Val::Percent(100.0),
+                            aspect_ratio: Some(1.0),
+                            display: Display::Grid,
+                            grid_template_columns: RepeatedGridTrack::flex(3, 1.0),
+                            grid_template_rows: RepeatedGridTrack::flex(2, 1.0),
+                            row_gap: Val::Px(12.0),
+                            column_gap: Val::Px(12.0),
+                            ..default()
+                        },
+                        BackgroundColor(Color::srgb(0.25, 0.25, 0.25)),
+                    ))
+                    .with_children(|builder| {
+                        builder.spawn((Node::default(), BackgroundColor(ORANGE.into())));
+                        builder.spawn((Node::default(), BackgroundColor(BISQUE.into())));
+                        builder.spawn((Node::default(), BackgroundColor(BLUE.into())));
+                        builder.spawn((Node::default(), BackgroundColor(CRIMSON.into())));
+                        builder.spawn((Node::default(), BackgroundColor(AQUA.into())));
+                    });
+
+                // Right side bar (auto placed in row 2, column 2)
+                builder.spawn((Node::DEFAULT, BackgroundColor(BLACK.into())));
+            });
+    }
+}
+
+mod borders {
+    use bevy::{color::palettes::css::*, prelude::*};
+
+    pub fn setup(mut commands: Commands) {
+        commands.spawn((Camera2d, StateScoped(super::Scene::Borders)));
+        let root = commands
+            .spawn((
+                Node {
+                    flex_wrap: FlexWrap::Wrap,
+                    ..default()
+                },
+                StateScoped(super::Scene::Borders),
+            ))
+            .id();
+
+        // all the different combinations of border edges
+        let borders = [
+            UiRect::default(),
+            UiRect::all(Val::Px(20.)),
+            UiRect::left(Val::Px(20.)),
+            UiRect::vertical(Val::Px(20.)),
+            UiRect {
+                left: Val::Px(40.),
+                top: Val::Px(20.),
+                ..Default::default()
+            },
+            UiRect {
+                right: Val::Px(20.),
+                bottom: Val::Px(30.),
+                ..Default::default()
+            },
+            UiRect {
+                right: Val::Px(20.),
+                top: Val::Px(40.),
+                bottom: Val::Px(20.),
+                ..Default::default()
+            },
+            UiRect {
+                left: Val::Px(20.),
+                top: Val::Px(20.),
+                bottom: Val::Px(20.),
+                ..Default::default()
+            },
+            UiRect {
+                left: Val::Px(20.),
+                right: Val::Px(20.),
+                bottom: Val::Px(40.),
+                ..Default::default()
+            },
+        ];
+
+        let non_zero = |x, y| x != Val::Px(0.) && y != Val::Px(0.);
+        let border_size = |x, y| if non_zero(x, y) { f32::MAX } else { 0. };
+
+        for border in borders {
+            for rounded in [true, false] {
+                let border_node = commands
+                    .spawn((
+                        Node {
+                            width: Val::Px(100.),
+                            height: Val::Px(100.),
+                            border,
+                            margin: UiRect::all(Val::Px(30.)),
+                            align_items: AlignItems::Center,
+                            justify_content: JustifyContent::Center,
+                            ..default()
+                        },
+                        BackgroundColor(MAROON.into()),
+                        BorderColor(RED.into()),
+                        Outline {
+                            width: Val::Px(10.),
+                            offset: Val::Px(10.),
+                            color: Color::WHITE,
+                        },
+                    ))
+                    .id();
+
+                if rounded {
+                    let border_radius = BorderRadius::px(
+                        border_size(border.left, border.top),
+                        border_size(border.right, border.top),
+                        border_size(border.right, border.bottom),
+                        border_size(border.left, border.bottom),
+                    );
+                    commands.entity(border_node).insert(border_radius);
+                }
+
+                commands.entity(root).add_child(border_node);
+            }
+        }
+    }
+}
+
+mod box_shadow {
+    use bevy::{color::palettes::css::*, prelude::*};
+
+    pub fn setup(mut commands: Commands) {
+        commands.spawn((Camera2d, StateScoped(super::Scene::BoxShadow)));
+
+        commands
+            .spawn((
+                Node {
+                    width: Val::Percent(100.0),
+                    height: Val::Percent(100.0),
+                    padding: UiRect::all(Val::Px(30.)),
+                    column_gap: Val::Px(200.),
+                    flex_wrap: FlexWrap::Wrap,
+                    ..default()
+                },
+                BackgroundColor(GREEN.into()),
+                StateScoped(super::Scene::BoxShadow),
+            ))
+            .with_children(|commands| {
+                let example_nodes = [
+                    (
+                        Vec2::splat(100.),
+                        Vec2::ZERO,
+                        10.,
+                        0.,
+                        BorderRadius::bottom_right(Val::Px(10.)),
+                    ),
+                    (Vec2::new(200., 50.), Vec2::ZERO, 10., 0., BorderRadius::MAX),
+                    (
+                        Vec2::new(100., 50.),
+                        Vec2::ZERO,
+                        10.,
+                        10.,
+                        BorderRadius::ZERO,
+                    ),
+                    (
+                        Vec2::splat(100.),
+                        Vec2::splat(20.),
+                        10.,
+                        10.,
+                        BorderRadius::bottom_right(Val::Px(10.)),
+                    ),
+                    (
+                        Vec2::splat(100.),
+                        Vec2::splat(50.),
+                        0.,
+                        10.,
+                        BorderRadius::ZERO,
+                    ),
+                    (
+                        Vec2::new(50., 100.),
+                        Vec2::splat(10.),
+                        0.,
+                        10.,
+                        BorderRadius::MAX,
+                    ),
+                ];
+
+                for (size, offset, spread, blur, border_radius) in example_nodes {
+                    commands.spawn((
+                        Node {
+                            width: Val::Px(size.x),
+                            height: Val::Px(size.y),
+                            border: UiRect::all(Val::Px(2.)),
+                            ..default()
+                        },
+                        BorderColor(WHITE.into()),
+                        border_radius,
+                        BackgroundColor(BLUE.into()),
+                        BoxShadow::new(
+                            Color::BLACK.with_alpha(0.9),
+                            Val::Percent(offset.x),
+                            Val::Percent(offset.y),
+                            Val::Percent(spread),
+                            Val::Px(blur),
+                        ),
+                    ));
+                }
+            });
+    }
+}
+
+mod text_wrap {
+    use bevy::prelude::*;
+
+    pub fn setup(mut commands: Commands) {
+        commands.spawn((Camera2d, StateScoped(super::Scene::TextWrap)));
+
+        let root = commands
+            .spawn((
+                Node {
+                    flex_direction: FlexDirection::Column,
+                    width: Val::Px(200.),
+                    height: Val::Percent(100.),
+                    overflow: Overflow::clip_x(),
+                    ..default()
+                },
+                BackgroundColor(Color::BLACK),
+                StateScoped(super::Scene::TextWrap),
+            ))
+            .id();
+
+        for linebreak in [
+            LineBreak::AnyCharacter,
+            LineBreak::WordBoundary,
+            LineBreak::WordOrCharacter,
+            LineBreak::NoWrap,
+        ] {
+            let messages = [
+                "Lorem ipsum dolor sit amet, consectetur adipiscing elit.".to_string(),
+                "pneumonoultramicroscopicsilicovolcanoconiosis".to_string(),
+            ];
+
+            for (j, message) in messages.into_iter().enumerate() {
+                commands.entity(root).with_child((
+                    Text(message.clone()),
+                    TextLayout::new(JustifyText::Left, linebreak),
+                    BackgroundColor(Color::srgb(0.8 - j as f32 * 0.3, 0., 0.)),
+                ));
+            }
+        }
+    }
+}
+
+mod overflow {
+    use bevy::{color::palettes::css::*, prelude::*};
+
+    pub fn setup(mut commands: Commands, asset_server: Res<AssetServer>) {
+        commands.spawn((Camera2d, StateScoped(super::Scene::Overflow)));
+        let image = asset_server.load("branding/icon.png");
+
+        commands
+            .spawn((
+                Node {
+                    width: Val::Percent(100.),
+                    height: Val::Percent(100.),
+                    align_items: AlignItems::Center,
+                    justify_content: JustifyContent::SpaceAround,
+                    ..Default::default()
+                },
+                BackgroundColor(BLUE.into()),
+                StateScoped(super::Scene::Overflow),
+            ))
+            .with_children(|parent| {
+                for overflow in [
+                    Overflow::visible(),
+                    Overflow::clip_x(),
+                    Overflow::clip_y(),
+                    Overflow::clip(),
+                ] {
+                    parent
+                        .spawn((
+                            Node {
+                                width: Val::Px(100.),
+                                height: Val::Px(100.),
+                                padding: UiRect {
+                                    left: Val::Px(25.),
+                                    top: Val::Px(25.),
+                                    ..Default::default()
+                                },
+                                border: UiRect::all(Val::Px(5.)),
+                                overflow,
+                                ..default()
+                            },
+                            BorderColor(RED.into()),
+                            BackgroundColor(Color::WHITE),
+                        ))
+                        .with_children(|parent| {
+                            parent.spawn((
+                                ImageNode::new(image.clone()),
+                                Node {
+                                    min_width: Val::Px(100.),
+                                    min_height: Val::Px(100.),
+                                    ..default()
+                                },
+                                Interaction::default(),
+                                Outline {
+                                    width: Val::Px(2.),
+                                    offset: Val::Px(2.),
+                                    color: Color::NONE,
+                                },
+                            ));
+                        });
+                }
+            });
+    }
+}
+
+mod slice {
+    use bevy::prelude::*;
+
+    pub fn setup(mut commands: Commands, asset_server: Res<AssetServer>) {
+        commands.spawn((Camera2d, StateScoped(super::Scene::Slice)));
+        let image = asset_server.load("textures/fantasy_ui_borders/numbered_slices.png");
+
+        let slicer = TextureSlicer {
+            border: BorderRect::all(16.0),
+            center_scale_mode: SliceScaleMode::Tile { stretch_value: 1.0 },
+            sides_scale_mode: SliceScaleMode::Tile { stretch_value: 1.0 },
+            ..default()
+        };
+        commands
+            .spawn((
+                Node {
+                    width: Val::Percent(100.0),
+                    height: Val::Percent(100.0),
+                    align_items: AlignItems::Center,
+                    justify_content: JustifyContent::SpaceAround,
+                    ..default()
+                },
+                StateScoped(super::Scene::Slice),
+            ))
+            .with_children(|parent| {
+                for [w, h] in [[150.0, 150.0], [300.0, 150.0], [150.0, 300.0]] {
+                    parent.spawn((
+                        Button,
+                        ImageNode {
+                            image: image.clone(),
+                            image_mode: NodeImageMode::Sliced(slicer.clone()),
+                            ..default()
+                        },
+                        Node {
+                            width: Val::Px(w),
+                            height: Val::Px(h),
+                            ..default()
+                        },
+                    ));
+                }
+            });
+    }
+}
+
+mod layout_rounding {
+    use bevy::{color::palettes::css::*, prelude::*};
+
+    pub fn setup(mut commands: Commands) {
+        commands.spawn((Camera2d, StateScoped(super::Scene::LayoutRounding)));
+
+        commands
+            .spawn((
+                Node {
+                    display: Display::Grid,
+                    width: Val::Percent(100.),
+                    height: Val::Percent(100.),
+                    grid_template_rows: vec![RepeatedGridTrack::fr(10, 1.)],
+                    ..Default::default()
+                },
+                BackgroundColor(Color::WHITE),
+                StateScoped(super::Scene::LayoutRounding),
+            ))
+            .with_children(|commands| {
+                for i in 2..12 {
+                    commands
+                        .spawn(Node {
+                            display: Display::Grid,
+                            grid_template_columns: vec![RepeatedGridTrack::fr(i, 1.)],
+                            ..Default::default()
+                        })
+                        .with_children(|commands| {
+                            for _ in 0..i {
+                                commands.spawn((
+                                    Node {
+                                        border: UiRect::all(Val::Px(5.)),
+                                        ..Default::default()
+                                    },
+                                    BackgroundColor(MAROON.into()),
+                                    BorderColor(DARK_BLUE.into()),
+                                ));
+                            }
+                        });
+                }
+            });
+    }
+}