Struct LayoutSize 

pub struct LayoutSize {
    pub width: LayoutDimension,
    pub height: LayoutDimension,
}

Fields

width: LayoutDimension

height: LayoutDimension

Implementations

impl LayoutSize

pub const AUTO: Self

pub const ZERO: Self

pub const FILL: Self

pub const fn new(width: LayoutDimension, height: LayoutDimension) -> Self

Examples found in repository

examples/showcase.rs (lines 6822-6825)

fn menu_widgets(ui: &mut UiDocument, parent: UiNodeId, state: &ShowcaseState) {
    let body = section_with_min_viewport(
        ui,
        parent,
        "menus",
        "Menu controls",
        UiSize::new(320.0, 0.0),
    );
    let menus = menu_bar_menus(state.menu_autosave, state.menu_grid);
    let active_items = state
        .menu_bar
        .open_menu
        .and_then(|index| menus.get(index))
        .map(|menu| menu.items.clone())
        .unwrap_or_default();
    widgets::label(
        ui,
        body,
        "menus.menu_bar.title",
        "Menu bar",
        text(12.0, color(166, 176, 190)),
        LayoutStyle::new().with_width_percent(1.0),
    );
    ext_widgets::menu_bar(
        ui,
        body,
        "menus.menu_bar",
        &menus,
        &state.menu_bar,
        None,
        ext_widgets::MenuBarOptions::default().with_action_prefix("menus.bar"),
    );

    if !active_items.is_empty() {
        let menu_columns = ui.add_child(
            body,
            UiNode::container(
                "menus.menu_columns",
                Layout::row()
                    .size(LayoutSize::new(
                        LayoutDimension::Auto,
                        LayoutDimension::Auto,
                    ))
                    .align_items(LayoutAlignment::Start)
                    .gap(LayoutGap::points(4.0, 4.0))
                    .flex(0.0, 0.0, LayoutDimension::Auto)
                    .to_layout_style(),
            ),
        );
        ext_widgets::menu_list(
            ui,
            menu_columns,
            "menus.menu_list",
            &active_items,
            state.menu_bar.active_item,
            ext_widgets::MenuListOptions::default().with_action_prefix("menus.item"),
        );
        if let Some(active_item) = state.menu_bar.active_item {
            if let Some(children) = active_items
                .get(active_item)
                .and_then(|item| item.children())
            {
                let submenu_column = ui.add_child(
                    menu_columns,
                    UiNode::container(
                        "menus.submenu_column",
                        Layout::column()
                            .size(LayoutSize::new(
                                LayoutDimension::Auto,
                                LayoutDimension::Auto,
                            ))
                            .gap(LayoutGap::points(0.0, 0.0))
                            .flex(0.0, 0.0, LayoutDimension::Auto)
                            .to_layout_style(),
                    ),
                );
                let offset = menu_item_top_offset(&active_items, active_item);
                if offset > 0.0 {
                    widgets::spacer(
                        ui,
                        submenu_column,
                        "menus.submenu_spacer",
                        LayoutStyle::new().with_width(1.0).with_height(offset),
                    );
                }
                ext_widgets::menu_list(
                    ui,
                    submenu_column,
                    "menus.submenu",
                    children,
                    Some(0),
                    ext_widgets::MenuListOptions::default().with_action_prefix("menus.item"),
                );
            }
        }
    }
    divider(ui, body, "menus.divider.buttons");
    widgets::label(
        ui,
        body,
        "menus.buttons.title",
        "Menu buttons",
        text(12.0, color(166, 176, 190)),
        LayoutStyle::new().with_width_percent(1.0),
    );
    let button_row = row(ui, body, "menus.buttons", 10.0);
    let button_items = menu_items(state.menu_autosave);
    ext_widgets::menu_button(
        ui,
        button_row,
        "menus.menu_button",
        "Menu button",
        &button_items,
        &state.menu_button,
        None,
        ext_widgets::MenuButtonOptions::default().with_action("menus.menu_button"),
    );
    ext_widgets::image_text_menu_button(
        ui,
        button_row,
        "menus.image_text_menu_button",
        "Image text",
        icon_image(BuiltInIcon::Folder),
        &button_items,
        &state.image_text_menu_button,
        None,
        ext_widgets::MenuButtonOptions::default().with_action("menus.image_text_menu_button"),
    );
    ext_widgets::image_menu_button(
        ui,
        button_row,
        "menus.image_menu_button",
        icon_image(BuiltInIcon::Settings),
        &button_items,
        &state.image_menu_button,
        None,
        ext_widgets::MenuButtonOptions::default().with_action("menus.image_menu_button"),
    );
    if state.menu_button.open || state.image_text_menu_button.open || state.image_menu_button.open {
        let active = state
            .menu_button
            .navigation
            .active_path
            .first()
            .copied()
            .or_else(|| {
                state
                    .image_text_menu_button
                    .navigation
                    .active_path
                    .first()
                    .copied()
            })
            .or_else(|| {
                state
                    .image_menu_button
                    .navigation
                    .active_path
                    .first()
                    .copied()
            });
        ext_widgets::menu_list(
            ui,
            body,
            "menus.button_menu",
            &button_items,
            active,
            ext_widgets::MenuListOptions::default().with_action_prefix("menus.item"),
        );
    }

    divider(ui, body, "menus.divider.context");
    widgets::label(
        ui,
        body,
        "menus.context.title",
        "Context menu",
        text(12.0, color(166, 176, 190)),
        LayoutStyle::new().with_width_percent(1.0),
    );
    let context_row = row(ui, body, "menus.context.controls", 8.0);
    button(
        ui,
        context_row,
        "menus.context.open",
        "Open context",
        "menus.context.open",
        button_visual(48, 112, 184),
    );
    button(
        ui,
        context_row,
        "menus.context.close",
        "Close",
        "menus.context.close",
        button_visual(58, 78, 96),
    );
    let mut context_options =
        ext_widgets::MenuListOptions::default().with_action_prefix("menus.context");
    context_options.width = 240.0;
    context_options.max_visible_rows = 6;
    let _ = ext_widgets::context_menu(
        ui,
        parent,
        "menus.context_menu",
        &button_items,
        &state.context_menu,
        UiRect::new(0.0, 0.0, 560.0, 460.0),
        ext_widgets::PopupPlacement::default(),
        context_options,
    );
}

fn menu_demo_context_anchor() -> UiPoint {
    UiPoint::new(30.0, 390.0)
}

fn command_palette(ui: &mut UiDocument, parent: UiNodeId, state: &ShowcaseState) {
    let body = section_with_min_viewport(
        ui,
        parent,
        "command_palette",
        "Command palette",
        UiSize::new(240.0, 72.0),
    );
    let items = command_palette_items_with_history(&state.command_history);
    let mut trigger_options =
        widgets::ButtonOptions::new(LayoutStyle::new().with_width(150.0).with_height(32.0))
            .with_action(if state.command_palette_open {
                "command_palette.close"
            } else {
                "command_palette.open"
            })
            .with_accessibility_label(if state.command_palette_open {
                "Close command palette"
            } else {
                "Open command palette"
            });
    trigger_options.visual = button_visual(48, 112, 184);
    trigger_options.hovered_visual = Some(button_visual(62, 126, 196));
    trigger_options.pressed_visual = Some(button_visual(38, 82, 136));
    trigger_options.text_style = text(13.0, color(246, 249, 252));
    widgets::button(
        ui,
        body,
        "command_palette.open",
        if state.command_palette_open {
            "Close palette"
        } else {
            "Open palette"
        },
        trigger_options,
    );
    widgets::label(
        ui,
        body,
        "command_palette.last",
        format!("Last command: {}", state.last_command),
        text(12.0, color(154, 166, 184)),
        LayoutStyle::new().with_width_percent(1.0),
    );
    if state.command_palette_open {
        let palette_width = command_palette_popup_width(state.last_desktop_size);
        let mut options =
            ext_widgets::CommandPaletteOptions::default().with_action_prefix("command_palette");
        options.width = palette_width;
        options.row_height = 44.0;
        options.max_visible_rows = 5;
        options.text_style = text(13.0, color(238, 244, 252));
        options.muted_text_style = text(12.0, color(166, 178, 196));
        options.z_index = SHOWCASE_WINDOW_Z_MAX.saturating_add(40);
        ext_widgets::command_palette(
            ui,
            body,
            "command_palette.panel",
            &items,
            &state.command_palette,
            Some(command_palette_popup(
                state.last_desktop_size,
                palette_width,
            )),
            options,
        );
    }
}

fn command_palette_popup_width(desktop_size: UiSize) -> f32 {
    (desktop_size.width - 48.0).clamp(320.0, 560.0)
}

fn command_palette_popup(desktop_size: UiSize, width: f32) -> ext_widgets::AnchoredPopup {
    let viewport = UiRect::new(0.0, 0.0, desktop_size.width, desktop_size.height);
    let x = ((desktop_size.width - width) * 0.5).max(12.0);
    let y = (desktop_size.height * 0.12).clamp(48.0, 96.0);
    ext_widgets::AnchoredPopup::new(
        UiRect::new(x, y, width, 0.0),
        viewport,
        ext_widgets::PopupPlacement::new(
            ext_widgets::PopupSide::Bottom,
            ext_widgets::PopupAlign::Center,
        )
        .with_offset(0.0)
        .with_flip(false)
        .with_viewport_margin(12.0),
    )
}

#[allow(clippy::field_reassign_with_default)]
fn progress_indicator(ui: &mut UiDocument, parent: UiNodeId, state: &ShowcaseState) {
    let body = section(ui, parent, "progress", "Progress indicator");
    let animated = smooth_loop(state.progress_phase * 0.85, 0.0) * 100.0;
    let mut progress = ext_widgets::ProgressIndicatorOptions::default();
    progress.layout = LayoutStyle::new().with_width_percent(1.0).with_height(10.0);
    progress.accessibility_label = Some("Progress".to_string());
    ext_widgets::progress_indicator(
        ui,
        body,
        "progress.primary",
        ext_widgets::ProgressIndicatorValue::percent(animated),
        progress,
    );
    let compact_value = smooth_loop(state.progress_phase * 1.15, 0.7) * 100.0;
    let mut compact = ext_widgets::ProgressIndicatorOptions::default();
    compact.layout = LayoutStyle::new().with_width_percent(1.0).with_height(6.0);
    compact.fill_visual = UiVisual::panel(color(111, 203, 159), None, 3.0);
    ext_widgets::progress_indicator(
        ui,
        body,
        "progress.compact",
        ext_widgets::ProgressIndicatorValue::percent(compact_value),
        compact,
    );
    let warning_value = smooth_loop(state.progress_phase * 0.65, 1.4) * 100.0;
    let mut warning = ext_widgets::ProgressIndicatorOptions::default();
    warning.layout = LayoutStyle::new().with_width_percent(1.0).with_height(14.0);
    warning.fill_visual = UiVisual::panel(color(232, 186, 88), None, 4.0);
    ext_widgets::progress_indicator(
        ui,
        body,
        "progress.warning",
        ext_widgets::ProgressIndicatorValue::percent(warning_value),
        warning,
    );
    let logged_value =
        (state.progress_loading_elapsed / PROGRESS_LOGGED_DURATION_SECONDS * 100.0).min(100.0);
    let logged_entries = progress_demo_logs(logged_value);
    progress_loading_panel(
        ui,
        body,
        "progress.logged",
        logged_value,
        &logged_entries,
        state,
    );
    let spinner_row = row(ui, body, "progress.spinner.row", 8.0);
    widgets::spinner(
        ui,
        spinner_row,
        "progress.spinner",
        widgets::SpinnerOptions::default()
            .with_phase(state.progress_phase)
            .with_accessibility_label("Loading spinner"),
    );
    widgets::label(
        ui,
        spinner_row,
        "progress.spinner.label",
        "Spinner",
        text(12.0, color(196, 210, 230)),
        LayoutStyle::new().with_width_percent(1.0),
    );
}

fn progress_loading_panel(
    ui: &mut UiDocument,
    parent: UiNodeId,
    name: &'static str,
    progress_value: f32,
    logs: &[ext_widgets::ProgressLogEntry],
    state: &ShowcaseState,
) {
    let panel = ui.add_child(
        parent,
        UiNode::container(
            name,
            LayoutStyle::column()
                .with_width_percent(1.0)
                .with_padding(10.0)
                .with_gap(8.0)
                .with_flex_shrink(0.0),
        )
        .with_visual(UiVisual::panel(
            color(17, 21, 27),
            Some(StrokeStyle::new(color(70, 82, 101), 1.0)),
            4.0,
        ))
        .with_accessibility(
            AccessibilityMeta::new(AccessibilityRole::Group).label("Loading progress with logs"),
        ),
    );

    let progress_row = row(ui, panel, "progress.logged.progress_row", 8.0);
    let progress_slot = ui.add_child(
        progress_row,
        UiNode::container(
            "progress.logged.progress_slot",
            LayoutStyle::new()
                .with_width(0.0)
                .with_height(30.0)
                .with_flex_grow(1.0)
                .with_flex_shrink(1.0),
        ),
    );
    let mut progress = ext_widgets::ProgressIndicatorOptions::default();
    progress.layout = LayoutStyle::new()
        .with_width_percent(1.0)
        .with_height(10.0)
        .with_flex_grow(1.0)
        .with_flex_shrink(1.0);
    progress.fill_visual = UiVisual::panel(color(111, 203, 159), None, 3.0);
    progress.accessibility_label = Some("Logged loading progress".to_string());
    ext_widgets::progress_indicator(
        ui,
        progress_slot,
        "progress.logged.progress",
        ext_widgets::ProgressIndicatorValue::percent(progress_value),
        progress,
    );
    let mut reset = widgets::ButtonOptions::new(
        LayoutStyle::new()
            .with_width(76.0)
            .with_height(30.0)
            .with_flex_shrink(0.0),
    )
    .with_action("progress.logged.reset");
    reset.visual = button_visual(38, 46, 58);
    reset.hovered_visual = Some(button_visual(65, 86, 106));
    reset.pressed_visual = Some(button_visual(34, 54, 84));
    reset.text_style = text(12.0, color(238, 244, 252));
    widgets::button(ui, progress_row, "progress.logged.reset", "Reset", reset);

    let log_scroll = progress_log_scroll_state(
        state.progress_logs_scroll.offset().y,
        logs.len(),
        state.progress_logs_follow_tail,
    );
    let logs_node = ui.add_child(
        panel,
        UiNode::container(
            "progress.logged.logs",
            LayoutStyle::column()
                .with_width_percent(1.0)
                .with_height(PROGRESS_LOG_VIEWPORT_HEIGHT)
                .with_flex_shrink(0.0),
        )
        .with_visual(UiVisual::panel(
            color(11, 15, 21),
            Some(StrokeStyle::new(color(45, 57, 73), 1.0)),
            3.0,
        ))
        .with_scroll(ScrollAxes::VERTICAL)
        .with_accessibility(
            AccessibilityMeta::new(AccessibilityRole::List)
                .label("Loading logs")
                .value(format!("{} entries", logs.len())),
        ),
    );
    {
        let node = ui.node_mut(logs_node);
        node.set_action("progress.logged.logs.scroll");
        node.set_scroll(log_scroll);
    }

    if logs.is_empty() {
        ui.add_child(
            logs_node,
            UiNode::text(
                "progress.logged.logs.empty",
                "Waiting for log output...",
                text(12.0, color(154, 166, 184)),
                LayoutStyle::new()
                    .with_width_percent(1.0)
                    .with_height(PROGRESS_LOG_ROW_HEIGHT)
                    .with_padding(4.0)
                    .with_flex_shrink(0.0),
            )
            .with_accessibility(AccessibilityMeta::new(AccessibilityRole::Status).label("No logs")),
        );
    } else {
        for (index, entry) in logs.iter().enumerate() {
            let mut text_style = text(12.0, entry.level.color());
            text_style.line_height = 18.0;
            ui.add_child(
                logs_node,
                UiNode::text(
                    format!("{name}.logs.row.{index}"),
                    format!("[{}] {}", entry.level.as_str(), entry.message),
                    text_style,
                    LayoutStyle::new()
                        .with_width_percent(1.0)
                        .with_height(PROGRESS_LOG_ROW_HEIGHT)
                        .with_padding(4.0)
                        .with_flex_shrink(0.0),
                )
                .with_accessibility(
                    AccessibilityMeta::new(AccessibilityRole::ListItem).label(format!(
                        "{}: {}",
                        entry.level.as_str(),
                        entry.message
                    )),
                ),
            );
        }
    }
}

fn progress_log_scroll_state(
    saved_offset_y: f32,
    log_count: usize,
    follow_tail: bool,
) -> operad::ScrollState {
    let content_height = log_count.max(1) as f32 * PROGRESS_LOG_ROW_HEIGHT;
    let max_offset = (content_height - PROGRESS_LOG_VIEWPORT_HEIGHT).max(0.0);
    let offset_y = if follow_tail {
        max_offset
    } else {
        saved_offset_y.min(max_offset)
    };
    operad::ScrollState::new(ScrollAxes::VERTICAL)
        .with_sizes(
            UiSize::new(8.0, PROGRESS_LOG_VIEWPORT_HEIGHT),
            UiSize::new(8.0, content_height),
        )
        .with_offset(UiPoint::new(0.0, offset_y))
}

fn progress_demo_logs(progress: f32) -> Vec<ext_widgets::ProgressLogEntry> {
    let mut logs = vec![
        ext_widgets::ProgressLogEntry::info("Initializing renderer"),
        ext_widgets::ProgressLogEntry::info("Mounting content archive"),
    ];
    if progress >= 24.0 {
        logs.push(ext_widgets::ProgressLogEntry::success(
            "Compiled material shaders",
        ));
    }
    if progress >= 48.0 {
        logs.push(ext_widgets::ProgressLogEntry::info("Decoded texture atlas"));
    }
    if progress >= 72.0 {
        logs.push(ext_widgets::ProgressLogEntry::warning(
            "Optional cloud profile is still pending",
        ));
    }
    if progress >= 96.0 {
        logs.push(ext_widgets::ProgressLogEntry::success("Ready"));
    }
    logs
}

#[derive(Debug, Clone, Copy, PartialEq, Eq)]
enum EaseCurveKind {
    Quad,
    Cubic,
    Quart,
    Expo,
    Back,
    Elastic,
    Bounce,
}

impl EaseCurveKind {
    fn id(self) -> &'static str {
        match self {
            Self::Quad => "quad",
            Self::Cubic => "cubic",
            Self::Quart => "quart",
            Self::Expo => "expo",
            Self::Back => "back",
            Self::Elastic => "elastic",
            Self::Bounce => "bounce",
        }
    }

    fn base_label(self) -> &'static str {
        match self {
            Self::Quad => "quad",
            Self::Cubic => "cubic",
            Self::Quart => "quart",
            Self::Expo => "expo",
            Self::Back => "back",
            Self::Elastic => "elastic",
            Self::Bounce => "bounce",
        }
    }

    fn sample_out(self, progress: f32) -> f32 {
        let t = unit(progress);
        match self {
            Self::Quad => 1.0 - (1.0 - t).powi(2),
            Self::Cubic => 1.0 - (1.0 - t).powi(3),
            Self::Quart => 1.0 - (1.0 - t).powi(4),
            Self::Expo => {
                if t >= 1.0 {
                    1.0
                } else {
                    1.0 - 2.0_f32.powf(-10.0 * t)
                }
            }
            Self::Back => {
                let c1 = 1.70158;
                let c3 = c1 + 1.0;
                1.0 + c3 * (t - 1.0).powi(3) + c1 * (t - 1.0).powi(2)
            }
            Self::Elastic => {
                if t <= 0.0 {
                    0.0
                } else if t >= 1.0 {
                    1.0
                } else {
                    let period = (2.0 * std::f32::consts::PI) / 3.0;
                    2.0_f32.powf(-10.0 * t) * ((t * 10.0 - 0.75) * period).sin() + 1.0
                }
            }
            Self::Bounce => ease_out_bounce(t),
        }
    }
}

#[derive(Debug, Clone, Copy, PartialEq, Eq)]
enum EaseDirection {
    In,
    Out,
}

impl EaseDirection {
    fn label_prefix(self) -> &'static str {
        match self {
            Self::In => "Ease in",
            Self::Out => "Ease out",
        }
    }
}

#[derive(Debug, Clone, Copy, PartialEq, Eq)]
struct EasingFunction {
    direction: EaseDirection,
    kind: EaseCurveKind,
}

impl EasingFunction {
    const fn new(direction: EaseDirection, kind: EaseCurveKind) -> Self {
        Self { direction, kind }
    }

    fn label(self) -> String {
        format!(
            "{} {}",
            self.direction.label_prefix(),
            self.kind.base_label()
        )
    }

    fn sample(self, progress: f32) -> f32 {
        let t = unit(progress);
        match self.direction {
            EaseDirection::In => 1.0 - self.kind.sample_out(1.0 - t),
            EaseDirection::Out => self.kind.sample_out(t),
        }
    }
}

fn ease_out_bounce(t: f32) -> f32 {
    let n1 = 7.5625;
    let d1 = 2.75;
    if t < 1.0 / d1 {
        n1 * t * t
    } else if t < 2.0 / d1 {
        let t = t - 1.5 / d1;
        n1 * t * t + 0.75
    } else if t < 2.5 / d1 {
        let t = t - 2.25 / d1;
        n1 * t * t + 0.9375
    } else {
        let t = t - 2.625 / d1;
        n1 * t * t + 0.984375
    }
}

fn easing_options(direction: EaseDirection) -> Vec<ext_widgets::SelectOption> {
    [
        EaseCurveKind::Quad,
        EaseCurveKind::Cubic,
        EaseCurveKind::Quart,
        EaseCurveKind::Expo,
        EaseCurveKind::Back,
        EaseCurveKind::Elastic,
        EaseCurveKind::Bounce,
    ]
    .into_iter()
    .map(|kind| {
        ext_widgets::SelectOption::new(kind.id(), EasingFunction::new(direction, kind).label())
    })
    .collect()
}

fn selected_easing(
    state: &ext_widgets::SelectMenuState,
    direction: EaseDirection,
) -> EasingFunction {
    let options = easing_options(direction);
    let kind = match state.selected_id(&options) {
        Some("quad") => EaseCurveKind::Quad,
        Some("quart") => EaseCurveKind::Quart,
        Some("expo") => EaseCurveKind::Expo,
        Some("back") => EaseCurveKind::Back,
        Some("elastic") => EaseCurveKind::Elastic,
        Some("bounce") => EaseCurveKind::Bounce,
        _ => EaseCurveKind::Cubic,
    };
    EasingFunction::new(direction, kind)
}

fn animation_widgets(ui: &mut UiDocument, parent: UiNodeId, state: &ShowcaseState) {
    let body = section(ui, parent, "animation", "Animation");

    if let Some(section) = animation_section(
        ui,
        body,
        "animation.timed",
        "Timed playback",
        state.animation_timed_expanded,
    ) {
        let live_stage = animation_stage(ui, section, "animation.live.stage");
        let live_amount = smooth_loop(state.progress_phase * 1.65, 0.0);
        let live_values = animation_blend_machine(
            ANIMATION_INPUT_PROGRESS,
            live_amount,
            UiPoint::new(220.0, 0.0),
            0.88,
            1.10,
            1.0,
        )
        .with_bool_input("looping", true)
        .values();
        ui.add_child(
            live_stage,
            UiNode::scene(
                "animation.live.orb",
                animation_orb_primitives(
                    color(108, 180, 255),
                    ANIMATION_ORB_SIZE * live_values.scale,
                    UiPoint::new(
                        28.0 + live_values.translate.x,
                        37.0 + live_values.translate.y,
                    ),
                ),
                animation_scene_layout(),
            )
            .with_accessibility(
                AccessibilityMeta::new(AccessibilityRole::Image).label("Looping orb"),
            ),
        );
    }

    if let Some(section) = animation_section(
        ui,
        body,
        "animation.scrub",
        "Scrubbed input",
        state.animation_scrub_expanded,
    ) {
        let scrub_row = row(ui, section, "animation.scrub.row", 10.0);
        widgets::slider(
            ui,
            scrub_row,
            "animation.scrub.slider",
            state.animation_scrub,
            0.0..1.0,
            widgets::SliderOptions::default()
                .with_layout(
                    LayoutStyle::new()
                        .with_width(200.0)
                        .with_height(28.0)
                        .with_flex_shrink(0.0),
                )
                .with_value_edit_action("animation.scrub"),
        );
        widgets::label(
            ui,
            scrub_row,
            "animation.scrub.value",
            format!("{:.0}%", state.animation_scrub * 100.0),
            text(12.0, color(186, 198, 216)),
            LayoutStyle::new().with_width_percent(1.0),
        );
        let scrub_stage = animation_stage(ui, section, "animation.scrub.stage");
        let scrub_values = animation_blend_machine(
            ANIMATION_INPUT_SCRUB,
            state.animation_scrub,
            UiPoint::new(220.0, 0.0),
            0.82,
            1.14,
            1.0,
        )
        .values();
        ui.add_child(
            scrub_stage,
            UiNode::scene(
                "animation.scrub.shape",
                animation_morph_shape_primitives(
                    color(111, 203, 159),
                    ANIMATION_SHAPE_SIZE * scrub_values.scale,
                    UiPoint::new(
                        28.0 + scrub_values.translate.x,
                        37.0 + scrub_values.translate.y,
                    ),
                    scrub_values.morph,
                ),
                animation_scene_layout(),
            )
            .with_accessibility(
                AccessibilityMeta::new(AccessibilityRole::Image).label("Scrubbed morphing shape"),
            ),
        );
    }

    if let Some(section) = animation_section(
        ui,
        body,
        "animation.state",
        "Boolean input transition",
        state.animation_state_expanded,
    ) {
        let state_row = row(ui, section, "animation.state.row", 10.0);
        let mut open = widgets::ButtonOptions::new(
            LayoutStyle::new()
                .with_width(92.0)
                .with_height(30.0)
                .with_flex_shrink(0.0),
        )
        .with_action("animation.open");
        open.visual = if state.animation_open {
            button_visual(48, 112, 184)
        } else {
            button_visual(38, 46, 58)
        };
        open.hovered_visual = Some(button_visual(65, 86, 106));
        open.pressed_visual = Some(button_visual(34, 54, 84));
        open.text_style = text(12.0, color(238, 244, 252));
        widgets::button(
            ui,
            state_row,
            "animation.open",
            if state.animation_open {
                "Close"
            } else {
                "Open"
            },
            open,
        );
        let open_stage = animation_stage(ui, section, "animation.state.stage");
        let panel_offset = if state.animation_open {
            UiPoint::new(
                ANIMATION_STAGE_MIN_WIDTH - ANIMATION_PANEL_WIDTH - ANIMATION_PANEL_INSET_X,
                ANIMATION_PANEL_Y,
            )
        } else {
            UiPoint::new(ANIMATION_PANEL_INSET_X, ANIMATION_PANEL_Y)
        };
        ui.add_child(
            open_stage,
            UiNode::scene(
                "animation.state.panel",
                animation_panel_primitives(panel_offset),
                animation_scene_layout(),
            )
            .with_animation(animation_open_machine(state.animation_open))
            .with_accessibility(
                AccessibilityMeta::new(AccessibilityRole::Image).label("Open state panel"),
            ),
        );
    }

    if let Some(section) = animation_section(
        ui,
        body,
        "animation.interaction",
        "Interaction inputs",
        state.animation_interaction_expanded,
    ) {
        let interaction_stage = animation_stage(ui, section, "animation.interaction.stage");
        ui.add_child(
            interaction_stage,
            UiNode::scene(
                "animation.interaction.target",
                animation_interaction_primitives(
                    color(176, 126, 230),
                    ANIMATION_ORB_SIZE,
                    UiPoint::new(40.0, 37.0),
                ),
                animation_scene_layout(),
            )
            .with_input(InputBehavior::BUTTON)
            .with_animation(animation_interaction_machine())
            .with_accessibility(
                AccessibilityMeta::new(AccessibilityRole::Button)
                    .label("Interaction animation target")
                    .focusable(),
            ),
        );
    }
}

fn easing_widgets(ui: &mut UiDocument, parent: UiNodeId, state: &ShowcaseState) {
    let body = section(ui, parent, "easing", "Easing");
    let linear_progress = (state.progress_phase * 0.25).rem_euclid(1.0);
    easing_curve_demo(
        ui,
        body,
        "easing.in",
        "Ease-in functions",
        EaseDirection::In,
        &state.easing_in,
        linear_progress,
    );
    divider(ui, body, "easing.divider");
    easing_curve_demo(
        ui,
        body,
        "easing.out",
        "Ease-out functions",
        EaseDirection::Out,
        &state.easing_out,
        linear_progress,
    );
}

fn easing_curve_demo(
    ui: &mut UiDocument,
    parent: UiNodeId,
    name: &'static str,
    title: &'static str,
    direction: EaseDirection,
    state: &ext_widgets::SelectMenuState,
    linear_progress: f32,
) {
    widgets::label(
        ui,
        parent,
        format!("{name}.title"),
        title,
        text(12.0, color(186, 198, 216)),
        LayoutStyle::new().with_width_percent(1.0),
    );

    let options = easing_options(direction);
    let selected = selected_easing(state, direction);
    let eased_progress = selected.sample(linear_progress);
    let controls = row(ui, parent, format!("{name}.controls"), 10.0);
    let dropdown_width = 184.0;
    let dropdown_name = format!("{name}.dropdown");
    let dropdown_anchor = ui.add_child(
        controls,
        UiNode::container(
            format!("{name}.dropdown.anchor"),
            LayoutStyle::new()
                .with_width(dropdown_width)
                .with_height(30.0)
                .with_flex_shrink(0.0),
        ),
    );
    let dropdown_nodes = ext_widgets::dropdown_select(
        ui,
        dropdown_anchor,
        dropdown_name.clone(),
        &options,
        state,
        Some(select_popup(
            UiRect::new(0.0, 0.0, dropdown_width, 30.0),
            UiRect::new(0.0, 0.0, EASING_STAGE_MIN_WIDTH, 260.0),
        )),
        dropdown_select_options(
            dropdown_width,
            dropdown_name.as_str(),
            "Ease function",
            title,
        ),
    );
    ui.node_mut(dropdown_nodes.trigger)
        .set_action(format!("{name}.dropdown.toggle"));
    widgets::label(
        ui,
        controls,
        format!("{name}.value"),
        format!(
            "{:.0}% -> {:.0}%",
            linear_progress * 100.0,
            eased_progress * 100.0
        ),
        text(12.0, color(186, 198, 216)),
        LayoutStyle::new().with_width_percent(1.0),
    );

    let stage = easing_stage(ui, parent, format!("{name}.stage"));
    ui.add_child(
        stage,
        UiNode::scene(
            format!("{name}.graph"),
            easing_curve_primitives(selected, linear_progress),
            animation_scene_layout(),
        )
        .with_accessibility(
            AccessibilityMeta::new(AccessibilityRole::Image)
                .label(format!("{} curve and looping marker", selected.label())),
        ),
    );
}

fn animation_section(
    ui: &mut UiDocument,
    parent: UiNodeId,
    name: &'static str,
    title: &'static str,
    expanded: bool,
) -> Option<UiNodeId> {
    let mut options = widgets::CollapsingHeaderOptions::default()
        .expanded(expanded)
        .with_toggle_action(format!("{name}.toggle"));
    options.text_style = text(12.0, color(220, 228, 238));
    options.indicator_text_style = text(12.0, color(186, 198, 216));
    options.root_visual = UiVisual::panel(
        color(17, 22, 29),
        Some(StrokeStyle::new(color(48, 58, 72), 1.0)),
        6.0,
    );
    options.header_visual = UiVisual::panel(color(21, 26, 33), None, 0.0);
    options.hovered_visual = UiVisual::panel(color(38, 48, 61), None, 0.0);
    options.pressed_visual = UiVisual::panel(color(27, 36, 48), None, 0.0);
    options.body_layout = LayoutStyle::column()
        .with_width_percent(1.0)
        .with_padding(10.0)
        .with_gap(10.0);
    widgets::collapsing_header(ui, parent, name, title, options).body
}

fn animation_stage(ui: &mut UiDocument, parent: UiNodeId, name: impl Into<String>) -> UiNodeId {
    let layout = LayoutStyle::row()
        .with_width_percent(1.0)
        .with_height(ANIMATION_STAGE_HEIGHT)
        .with_align_items(taffy::prelude::AlignItems::Center)
        .with_flex_shrink(0.0);
    let layout = operad::layout::with_min_size(
        layout,
        operad::length(ANIMATION_STAGE_MIN_WIDTH),
        operad::length(ANIMATION_STAGE_HEIGHT),
    );
    ui.add_child(
        parent,
        UiNode::container(name, layout).with_visual(UiVisual::panel(
            color(16, 21, 28),
            Some(StrokeStyle::new(color(48, 58, 72), 1.0)),
            6.0,
        )),
    )
}

fn easing_stage(ui: &mut UiDocument, parent: UiNodeId, name: impl Into<String>) -> UiNodeId {
    let layout = LayoutStyle::row()
        .with_width_percent(1.0)
        .with_height(EASING_STAGE_HEIGHT)
        .with_align_items(taffy::prelude::AlignItems::Center)
        .with_flex_shrink(0.0);
    let layout = operad::layout::with_min_size(
        layout,
        operad::length(EASING_STAGE_MIN_WIDTH),
        operad::length(EASING_STAGE_HEIGHT),
    );
    ui.add_child(
        parent,
        UiNode::container(name, layout).with_visual(UiVisual::panel(
            color(16, 21, 28),
            Some(StrokeStyle::new(color(48, 58, 72), 1.0)),
            6.0,
        )),
    )
}

fn animation_scene_layout() -> LayoutStyle {
    let layout = LayoutStyle::new()
        .with_width_percent(1.0)
        .with_height_percent(1.0)
        .with_flex_grow(1.0)
        .with_flex_shrink(1.0);
    operad::layout::with_min_size(layout, operad::length(0.0), operad::length(0.0))
}

fn easing_curve_primitives(function: EasingFunction, linear_progress: f32) -> Vec<ScenePrimitive> {
    let mut primitives = Vec::new();
    let graph = UiRect::new(24.0, 24.0, 172.0, 112.0);
    primitives.push(ScenePrimitive::Rect(
        PaintRect::solid(graph, color(12, 17, 24))
            .stroke(AlignedStroke::inside(StrokeStyle::new(
                color(58, 70, 88),
                1.0,
            )))
            .corner_radii(CornerRadii::uniform(4.0)),
    ));
    for index in 1..4 {
        let fraction = index as f32 / 4.0;
        let x = graph.x + graph.width * fraction;
        let y = graph.y + graph.height * fraction;
        primitives.push(ScenePrimitive::Line {
            from: UiPoint::new(x, graph.y),
            to: UiPoint::new(x, graph.y + graph.height),
            stroke: StrokeStyle::new(color(29, 38, 50), 1.0),
        });
        primitives.push(ScenePrimitive::Line {
            from: UiPoint::new(graph.x, y),
            to: UiPoint::new(graph.x + graph.width, y),
            stroke: StrokeStyle::new(color(29, 38, 50), 1.0),
        });
    }
    primitives.push(ScenePrimitive::Line {
        from: UiPoint::new(graph.x, graph.y + graph.height),
        to: UiPoint::new(graph.x + graph.width, graph.y + graph.height),
        stroke: StrokeStyle::new(color(118, 136, 162), 1.0),
    });
    primitives.push(ScenePrimitive::Line {
        from: UiPoint::new(graph.x, graph.y),
        to: UiPoint::new(graph.x, graph.y + graph.height),
        stroke: StrokeStyle::new(color(118, 136, 162), 1.0),
    });

    let samples = 40;
    let mut previous = None;
    for index in 0..=samples {
        let t = index as f32 / samples as f32;
        let eased = function.sample(t);
        let point = UiPoint::new(
            graph.x + graph.width * t,
            graph.y + graph.height - graph.height * eased.clamp(-0.16, 1.16),
        );
        if let Some(from) = previous {
            primitives.push(ScenePrimitive::Line {
                from,
                to: point,
                stroke: StrokeStyle::new(color(112, 181, 255), 2.0),
            });
        }
        previous = Some(point);
    }

    let eased_progress = function.sample(linear_progress);
    let graph_marker = UiPoint::new(
        graph.x + graph.width * linear_progress,
        graph.y + graph.height - graph.height * eased_progress.clamp(-0.16, 1.16),
    );
    primitives.push(ScenePrimitive::Circle {
        center: graph_marker,
        radius: 5.5,
        fill: color(248, 252, 255),
        stroke: Some(StrokeStyle::new(color(112, 181, 255), 2.0)),
    });

    let track = UiRect::new(232.0, 64.0, 96.0, 12.0);
    let marker_progress = eased_progress.clamp(-0.10, 1.10);
    primitives.push(ScenePrimitive::Rect(
        PaintRect::solid(track, color(37, 46, 58)).corner_radii(CornerRadii::uniform(6.0)),
    ));
    primitives.push(ScenePrimitive::Rect(
        PaintRect::solid(
            UiRect::new(
                track.x,
                track.y,
                track.width * eased_progress.clamp(0.0, 1.0),
                track.height,
            ),
            color(108, 180, 255),
        )
        .corner_radii(CornerRadii::uniform(6.0)),
    ));
    primitives.push(ScenePrimitive::Circle {
        center: UiPoint::new(
            track.x + track.width * marker_progress,
            track.y + track.height * 0.5,
        ),
        radius: 14.0,
        fill: color(112, 181, 255),
        stroke: Some(StrokeStyle::new(color(232, 242, 255), 2.0)),
    });
    primitives.push(ScenePrimitive::Text(
        PaintText::new(
            function.label(),
            UiRect::new(222.0, 98.0, 120.0, 20.0),
            text(10.0, color(186, 198, 216)),
        )
        .horizontal_align(TextHorizontalAlign::Center)
        .multiline(false),
    ));
    primitives
}

fn animation_blend_machine(
    input: &'static str,
    value: f32,
    translate: UiPoint,
    start_scale: f32,
    end_scale: f32,
    end_opacity: f32,
) -> AnimationMachine {
    let start_values = AnimatedValues::new(0.45, UiPoint::new(0.0, 0.0), start_scale);
    let end_values = AnimatedValues::new(end_opacity, translate, end_scale).with_morph(1.0);
    AnimationMachine::new(
        vec![
            AnimationState::new("start", start_values),
            AnimationState::new("end", end_values),
        ],
        Vec::new(),
        "start",
    )
    .unwrap_or_else(|_| AnimationMachine::single_state("start", start_values))
    .with_number_input(input, value)
    .with_blend_binding(AnimationBlendBinding::new(input, "start", "end"))
}

fn animation_open_machine(open: bool) -> AnimationMachine {
    let closed_values = AnimatedValues::new(0.35, UiPoint::new(0.0, 0.0), 1.0);
    let open_values = AnimatedValues::new(1.0, UiPoint::new(0.0, 0.0), 1.0);
    let fallback_values = if open { open_values } else { closed_values };
    AnimationMachine::new(
        vec![
            AnimationState::new("closed", closed_values),
            AnimationState::new("open", open_values),
        ],
        vec![
            AnimationTransition::when(
                "closed",
                "open",
                AnimationCondition::bool(ANIMATION_INPUT_OPEN, true),
                0.18,
            ),
            AnimationTransition::when(
                "open",
                "closed",
                AnimationCondition::bool(ANIMATION_INPUT_OPEN, false),
                0.14,
            ),
        ],
        "closed",
    )
    .unwrap_or_else(|_| AnimationMachine::single_state("closed", fallback_values))
    .with_bool_input(ANIMATION_INPUT_OPEN, open)
}

fn animation_interaction_machine() -> AnimationMachine {
    let rest_values = AnimatedValues::new(0.72, UiPoint::new(0.0, 0.0), 1.0);
    let right_values = AnimatedValues::new(1.0, UiPoint::new(0.0, 0.0), 1.0).with_morph(1.0);
    AnimationMachine::new(
        vec![
            AnimationState::new("rest", rest_values),
            AnimationState::new("right", right_values),
        ],
        Vec::new(),
        "rest",
    )
    .unwrap_or_else(|_| AnimationMachine::single_state("rest", rest_values))
    .with_number_input(ANIMATION_INPUT_POINTER_NORM_X, 0.0)
    .with_blend_binding(AnimationBlendBinding::new(
        ANIMATION_INPUT_POINTER_NORM_X,
        "rest",
        "right",
    ))
}

fn animation_interaction_primitives(
    fill: ColorRgba,
    size: f32,
    offset: UiPoint,
) -> Vec<ScenePrimitive> {
    vec![
        ScenePrimitive::MorphPolygon {
            from_points: animation_square_points(size, offset),
            to_points: animation_pentagon_points(size, offset),
            amount: 0.0,
            fill,
            stroke: Some(StrokeStyle::new(color(236, 244, 255), 1.0)),
        },
        ScenePrimitive::Circle {
            center: UiPoint::new(offset.x + size * 0.34, offset.y + size * 0.30),
            radius: size * 0.10,
            fill: color(244, 248, 255),
            stroke: None,
        },
    ]
}

fn animation_orb_primitives(fill: ColorRgba, size: f32, offset: UiPoint) -> Vec<ScenePrimitive> {
    let center = size * 0.5;
    let radius = size * 0.44;
    vec![
        ScenePrimitive::Circle {
            center: UiPoint::new(offset.x + center, offset.y + center),
            radius,
            fill,
            stroke: Some(StrokeStyle::new(color(236, 244, 255), 1.0)),
        },
        ScenePrimitive::Circle {
            center: UiPoint::new(offset.x + size * 0.34, offset.y + size * 0.30),
            radius: size * 0.12,
            fill: color(244, 248, 255),
            stroke: None,
        },
    ]
}

fn animation_morph_shape_primitives(
    fill: ColorRgba,
    size: f32,
    offset: UiPoint,
    amount: f32,
) -> Vec<ScenePrimitive> {
    vec![ScenePrimitive::MorphPolygon {
        from_points: animation_square_points(size, offset),
        to_points: animation_pentagon_points(size, offset),
        amount,
        fill,
        stroke: Some(StrokeStyle::new(color(226, 246, 236), 1.0)),
    }]
}

fn animation_square_points(size: f32, offset: UiPoint) -> Vec<UiPoint> {
    let inset = size * 0.08;
    let left = offset.x + inset;
    let top = offset.y + inset;
    let right = offset.x + size - inset;
    let bottom = offset.y + size - inset;
    let center_x = offset.x + size * 0.5;
    vec![
        UiPoint::new(center_x, top),
        UiPoint::new(right, top),
        UiPoint::new(right, bottom),
        UiPoint::new(left, bottom),
        UiPoint::new(left, top),
    ]
}

fn animation_pentagon_points(size: f32, offset: UiPoint) -> Vec<UiPoint> {
    let center = size * 0.5;
    let radius = size * 0.46;
    (0..5)
        .map(|index| {
            let angle = -std::f32::consts::FRAC_PI_2 + index as f32 * std::f32::consts::TAU / 5.0;
            UiPoint::new(
                offset.x + center + angle.cos() * radius,
                offset.y + center + angle.sin() * radius,
            )
        })
        .collect()
}

fn animation_panel_primitives(offset: UiPoint) -> Vec<ScenePrimitive> {
    vec![ScenePrimitive::Rect(
        PaintRect::solid(
            UiRect::new(
                offset.x,
                offset.y,
                ANIMATION_PANEL_WIDTH,
                ANIMATION_PANEL_HEIGHT,
            ),
            color(232, 186, 88),
        )
        .stroke(AlignedStroke::inside(StrokeStyle::new(
            color(255, 226, 154),
            1.0,
        )))
        .corner_radii(CornerRadii::uniform(6.0)),
    )]
}

fn list_and_table_widgets(ui: &mut UiDocument, parent: UiNodeId, state: &ShowcaseState) {
    let body = section_with_min_viewport(
        ui,
        parent,
        "lists_tables",
        "Lists and tables",
        UiSize::new(520.0, 0.0),
    );

    let list_row = ui.add_child(
        body,
        UiNode::container(
            "lists_tables.list_row",
            Layout::row()
                .size(LayoutSize::new(
                    LayoutDimension::percent(1.0),
                    LayoutDimension::Auto,
                ))
                .gap(LayoutGap::points(10.0, 10.0))
                .flex_wrap(LayoutFlexWrap::Wrap)
                .to_layout_style(),
        ),
    );
    let scroll_column = ui.add_child(
        list_row,
        UiNode::container(
            "lists_tables.scroll_area.column",
            Layout::column()
                .min_size(LayoutSize::points(220.0, 0.0))
                .gap(LayoutGap::points(6.0, 6.0))
                .flex(1.0, 1.0, LayoutDimension::points(245.0))
                .to_layout_style(),
        ),
    );
    widgets::label(
        ui,
        scroll_column,
        "lists_tables.scroll_area.title",
        "Scrollable list",
        text(12.0, color(166, 176, 190)),
        LayoutStyle::new().with_width_percent(1.0),
    );
    let nested_scroll = widgets::scroll_area(
        ui,
        scroll_column,
        "lists_tables.scroll_area",
        ScrollAxes::VERTICAL,
        LayoutStyle::column()
            .with_width_percent(1.0)
            .with_height(104.0),
    );
    ui.node_mut(nested_scroll)
        .set_action("lists_tables.scroll_area.scroll");
    if let Some(scroll) = ui.node_mut(nested_scroll).scroll_mut() {
        scroll.set_offset(UiPoint::new(0.0, state.list_scroll));
    }
    for index in 0..6 {
        widgets::label(
            ui,
            nested_scroll,
            format!("lists_tables.scroll_area.row.{index}"),
            format!("Scroll row {}", index + 1),
            text(12.0, color(200, 212, 228)),
            LayoutStyle::new()
                .with_width_percent(1.0)
                .with_height(26.0)
                .with_flex_shrink(0.0),
        );
    }

    let virtual_list_column = ui.add_child(
        list_row,
        UiNode::container(
            "lists_tables.virtual_list.column",
            Layout::column()
                .min_size(LayoutSize::points(220.0, 0.0))
                .gap(LayoutGap::points(6.0, 6.0))
                .flex(1.0, 1.0, LayoutDimension::points(245.0))
                .to_layout_style(),
        ),
    );

    widgets::label(
        ui,
        virtual_list_column,
        "lists_tables.virtual_list.title",
        "Virtualized list",
        text(12.0, color(166, 176, 190)),
        LayoutStyle::new().with_width_percent(1.0),
    );
    let virtual_list = widgets::virtual_list(
        ui,
        virtual_list_column,
        "lists_tables.virtual_list",
        widgets::VirtualListSpec {
            row_count: 24,
            row_height: 28.0,
            viewport_height: 104.0,
            scroll_offset: state.virtual_scroll,
            overscan: 1,
        },
        |ui, row_parent, row| {
            widgets::label(
                ui,
                row_parent,
                format!("lists_tables.virtual_list.row.{row}"),
                format!("Virtual row {}", row + 1),
                text(12.0, color(214, 224, 238)),
                LayoutStyle::new()
                    .with_width_percent(1.0)
                    .with_height(28.0)
                    .with_flex_shrink(0.0),
            );
        },
    );
    ui.node_mut(virtual_list)
        .set_action("lists_tables.virtual_list.scroll");

    widgets::separator(
        ui,
        body,
        "lists_tables.virtualized_table.separator",
        widgets::SeparatorOptions::default(),
    );
    widgets::label(
        ui,
        body,
        "lists_tables.data_table.title",
        "Virtualized selectable table",
        text(12.0, color(166, 176, 190)),
        LayoutStyle::new().with_width_percent(1.0),
    );
    let virtual_controls = wrapping_row(ui, body, "lists_tables.virtualized_table.controls", 8.0);
    button(
        ui,
        virtual_controls,
        "lists_tables.virtualized_table.sort.name",
        if state.virtual_table_descending {
            "Name desc"
        } else {
            "Name asc"
        },
        "lists_tables.virtualized_table.sort.name",
        button_visual(38, 52, 70),
    );
    button(
        ui,
        virtual_controls,
        "lists_tables.virtualized_table.filter.status",
        if state.virtual_table_ready_only {
            "Ready only"
        } else {
            "All status"
        },
        "lists_tables.virtualized_table.filter.status",
        button_visual(38, 52, 70),
    );
    button(
        ui,
        virtual_controls,
        "lists_tables.virtualized_table.resize.reset",
        "Reset width",
        "lists_tables.virtualized_table.resize.reset",
        button_visual(38, 52, 70),
    );

    let columns = virtual_table_columns(state);
    let visible_rows = virtual_table_visible_rows(state);
    let mut table_options = ext_widgets::DataTableOptions::default()
        .with_row_action_prefix("lists_tables.virtualized_table")
        .with_cell_action_prefix("lists_tables.virtualized_table")
        .with_scroll_action("lists_tables.virtualized_table.scroll");
    table_options.layout = LayoutStyle::column()
        .with_width_percent(1.0)
        .with_flex_shrink(0.0);
    table_options.header_visual = UiVisual::panel(
        color(34, 41, 50),
        Some(StrokeStyle::new(color(67, 78, 95), 1.0)),
        0.0,
    );
    table_options.header_text_style = text(12.0, color(222, 230, 240));
    table_options.selection = state.table_selection.clone();
    ext_widgets::virtualized_data_table(
        ui,
        body,
        "lists_tables.virtualized_table",
        &columns,
        ext_widgets::VirtualDataTableSpec {
            row_count: visible_rows.len(),
            row_height: 28.0,
            viewport_width: 520.0,
            viewport_height: 156.0,
            scroll_offset: UiPoint::new(0.0, state.virtual_table_scroll),
            overscan_rows: 1,
        },
        table_options,
        |ui, cell_parent, cell| {
            let source_row = visible_rows.get(cell.row).copied().unwrap_or(cell.row);
            let value = virtual_table_cell_value(source_row, cell.column);
            widgets::label(
                ui,
                cell_parent,
                format!(
                    "lists_tables.virtualized_table.cell.{}.{}.label",
                    cell.row, cell.column
                ),
                value,
                text(12.0, color(220, 228, 238)),
                LayoutStyle::new().with_width_percent(1.0),
            );
        },
    );
}

#[allow(clippy::field_reassign_with_default)]
fn property_inspector(ui: &mut UiDocument, parent: UiNodeId, state: &ShowcaseState) {
    let body = section(ui, parent, "property_inspector", "Property inspector");
    widgets::label(
        ui,
        body,
        "property_inspector.target",
        "Inspecting: Styling preview",
        text(12.0, color(196, 210, 230)),
        LayoutStyle::new().with_width_percent(1.0),
    );
    let mut options = ext_widgets::PropertyInspectorOptions::default();
    options.selected_index = Some(0);
    options.label_width = 120.0;
    options.row_height = 30.0;
    ext_widgets::property_inspector_grid(
        ui,
        body,
        "property_inspector.grid",
        &[
            ext_widgets::PropertyGridRow::new("target", "Widget", "Button preview").read_only(),
            ext_widgets::PropertyGridRow::new(
                "inner",
                "Inner margin",
                format!("{:.0}px", state.styling.inner_margin),
            )
            .with_kind(ext_widgets::PropertyValueKind::Number),
            ext_widgets::PropertyGridRow::new(
                "outer",
                "Outer margin",
                format!("{:.0}px", state.styling.outer_margin),
            )
            .with_kind(ext_widgets::PropertyValueKind::Number),
            ext_widgets::PropertyGridRow::new(
                "radius",
                "Corner radius",
                format!("{:.0}px", state.styling.corner_radius),
            )
            .with_kind(ext_widgets::PropertyValueKind::Number),
            ext_widgets::PropertyGridRow::new(
                "stroke",
                "Stroke",
                format!("{:.1}px", state.styling.stroke_width),
            )
            .with_kind(ext_widgets::PropertyValueKind::Number)
            .changed(),
            ext_widgets::PropertyGridRow::new("state", "Source", "Styling widget").read_only(),
        ],
        options,
    );
}

fn diagnostics_widgets(ui: &mut UiDocument, parent: UiNodeId, state: &ShowcaseState) {
    let body = section(ui, parent, "diagnostics", "Diagnostics");
    let debug_snapshot = &state.diagnostics_snapshot;

    diagnostics_selected_node_panel(ui, body, debug_snapshot);
    diagnostics_animation_panel(ui, body, state, debug_snapshot);

    widgets::label(
        ui,
        body,
        "diagnostics.a11y.title",
        "Accessibility",
        text(14.0, color(222, 230, 240)),
        LayoutStyle::new().with_width_percent(1.0),
    );
    let mut overlay_preview_style = UiNodeStyle::from(
        LayoutStyle::new()
            .with_width(320.0)
            .with_height(140.0)
            .with_flex_shrink(0.0),
    );
    overlay_preview_style.set_clip(ClipBehavior::Clip);
    let overlay_preview = ui.add_child(
        body,
        UiNode::container("diagnostics.a11y.preview", overlay_preview_style).with_visual(
            UiVisual::panel(
                color(12, 17, 24),
                Some(StrokeStyle::new(color(47, 62, 82), 1.0)),
                4.0,
            ),
        ),
    );
    let mut overlay_options = ext_widgets::AccessibilityDebugOverlayOptions {
        action_prefix: Some("diagnostics.a11y.visual".to_owned()),
        ..Default::default()
    };
    overlay_options.show_labels = false;
    ext_widgets::accessibility_debug_overlay(
        ui,
        overlay_preview,
        "diagnostics.a11y.visual",
        &debug_snapshot,
        overlay_options,
    );
    diagnostics_accessibility_details(ui, body, debug_snapshot);

    let diagnostic_columns = ui.add_child(
        body,
        UiNode::container(
            "diagnostics.columns",
            LayoutStyle::column()
                .with_width_percent(1.0)
                .with_flex_shrink(0.0)
                .gap(10.0),
        ),
    );
    let command_column = ui.add_child(
        diagnostic_columns,
        UiNode::container(
            "diagnostics.commands.column",
            LayoutStyle::column()
                .with_width_percent(1.0)
                .with_flex_shrink(0.0)
                .gap(8.0),
        ),
    );
    let theme_column = ui.add_child(
        diagnostic_columns,
        UiNode::container(
            "diagnostics.theme.column",
            LayoutStyle::column()
                .with_width_percent(1.0)
                .with_flex_shrink(0.0)
                .gap(8.0),
        ),
    );

    let registry = diagnostics_command_registry();
    diagnostics_commands_panel(ui, command_column, &registry);

    let theme_snapshot = DebugThemeSnapshot::from_theme(&Theme::dark());
    diagnostics_theme_panel(ui, theme_column, &theme_snapshot);
}

fn diagnostics_selected_node_panel(
    ui: &mut UiDocument,
    parent: UiNodeId,
    snapshot: &DebugInspectorSnapshot,
) {
    let panel = diagnostics_panel(ui, parent, "diagnostics.inspector", "Selected node");
    let rows = snapshot
        .node("diagnostics.sample.preview")
        .map(|node| {
            vec![
                ext_widgets::PropertyGridRow::new("name", "Node", "Preview action").read_only(),
                ext_widgets::PropertyGridRow::new("role", "Role", "Button").read_only(),
                ext_widgets::PropertyGridRow::new(
                    "bounds",
                    "Bounds",
                    format!(
                        "{:.0}, {:.0}; {:.0} x {:.0}",
                        node.rect.x, node.rect.y, node.rect.width, node.rect.height
                    ),
                )
                .with_kind(ext_widgets::PropertyValueKind::Number)
                .read_only(),
                ext_widgets::PropertyGridRow::new(
                    "clip",
                    "Clip",
                    format!("{:.0} x {:.0}", node.clip_rect.width, node.clip_rect.height),
                )
                .with_kind(ext_widgets::PropertyValueKind::Number)
                .read_only(),
                ext_widgets::PropertyGridRow::new(
                    "input",
                    "Input",
                    if node.input.pointer {
                        "Receives pointer input"
                    } else {
                        "Passive"
                    },
                )
                .read_only(),
            ]
        })
        .unwrap_or_else(|| {
            vec![
                ext_widgets::PropertyGridRow::new("missing", "Selected node", "No node selected")
                    .read_only(),
            ]
        });
    ext_widgets::property_inspector_grid(
        ui,
        panel,
        "diagnostics.inspector.rows",
        &rows,
        diagnostics_grid_options("Selected node details"),
    );
}

fn diagnostics_animation_panel(
    ui: &mut UiDocument,
    parent: UiNodeId,
    state: &ShowcaseState,
    snapshot: &DebugInspectorSnapshot,
) {
    let graph_panel =
        diagnostics_panel(ui, parent, "diagnostics.animation.graph", "Animation state");
    if let Some(animation) = snapshot.animation("diagnostics.sample.preview") {
        let state_row = row(ui, graph_panel, "diagnostics.animation.graph.states", 8.0);
        for state_name in ["idle", "hot"] {
            diagnostic_chip(
                ui,
                state_row,
                format!("diagnostics.animation.graph.state.{state_name}"),
                state_name,
                animation.current_state == state_name,
            );
        }

        let graph = animation.state_graph();
        for (index, edge) in graph.edges.iter().take(2).enumerate() {
            let value = if edge.kind == DebugAnimationGraphEdgeKind::Blend {
                "Input blend"
            } else {
                "State change"
            };
            let detail = if edge.label.is_empty() {
                if edge.active { "Active" } else { "Inactive" }.to_owned()
            } else if edge.active {
                format!("{}; active", edge.label)
            } else {
                edge.label.clone()
            };
            diagnostic_value_row(
                ui,
                graph_panel,
                format!("diagnostics.animation.graph.edge.{index}"),
                value,
                format!("{} -> {}", edge.from, edge.to),
            );
            diagnostic_muted_label(
                ui,
                graph_panel,
                format!("diagnostics.animation.graph.edge.{index}.detail"),
                detail,
            );
        }
    } else {
        diagnostic_muted_label(
            ui,
            graph_panel,
            "diagnostics.animation.graph.empty",
            "No animation state machine",
        );
    }

    let controls_panel = diagnostics_panel(
        ui,
        parent,
        "diagnostics.animation.controls",
        "Animation controls",
    );
    let transport = row(
        ui,
        controls_panel,
        "diagnostics.animation.controls.transport",
        8.0,
    );
    diagnostic_button(
        ui,
        transport,
        "diagnostics.animation.controls.transport.pause_toggle",
        if state.diagnostics_animation_paused {
            "Resume"
        } else {
            "Pause"
        },
        state.diagnostics_animation_paused,
    );
    diagnostic_button(
        ui,
        transport,
        "diagnostics.animation.controls.transport.step",
        "Step",
        false,
    );
    diagnostic_slider_row(
        ui,
        controls_panel,
        "diagnostics.animation.controls.transport.scrub",
        "Scrub progress",
        state.diagnostics_animation_scrub,
        "diagnostics.animation.controls.transport.scrub",
    );
    diagnostic_button(
        ui,
        controls_panel,
        "diagnostics.animation.controls.input.active.toggle",
        if state.diagnostics_animation_active {
            "Active input: true"
        } else {
            "Active input: false"
        },
        state.diagnostics_animation_active,
    );
    diagnostic_slider_row(
        ui,
        controls_panel,
        "diagnostics.animation.controls.input.hover.set",
        "Hover blend",
        state.diagnostics_animation_hover,
        "diagnostics.animation.controls.input.hover.set",
    );
    diagnostic_button(
        ui,
        controls_panel,
        "diagnostics.animation.controls.input.pulse.fire",
        "Fire pulse",
        false,
    );
    widgets::label(
        ui,
        controls_panel,
        "diagnostics.animation.controls.status",
        format!(
            "Scrub {:.0}%   Hover {:.0}%   Pulses {}",
            state.diagnostics_animation_scrub * 100.0,
            state.diagnostics_animation_hover * 100.0,
            state.diagnostics_animation_pulse_count
        ),
        text(12.0, color(166, 180, 198)),
        LayoutStyle::new().with_width_percent(1.0),
    );
}

fn diagnostics_accessibility_details(
    ui: &mut UiDocument,
    parent: UiNodeId,
    snapshot: &DebugInspectorSnapshot,
) {
    let rows = snapshot
        .accessibility_overlay
        .iter()
        .find(|node| node.name == "diagnostics.sample.preview")
        .map(|node| {
            let accessibility = node.accessibility.as_ref();
            vec![
                ext_widgets::PropertyGridRow::new("role", "Role", "Button").read_only(),
                ext_widgets::PropertyGridRow::new(
                    "label",
                    "Label",
                    accessibility
                        .and_then(|meta| meta.label.clone())
                        .unwrap_or_else(|| "Preview action".to_owned()),
                )
                .read_only(),
                ext_widgets::PropertyGridRow::new(
                    "focus",
                    "Focus order",
                    node.focus_index
                        .map(|index| format!("#{}", index + 1))
                        .unwrap_or_else(|| "Not focusable".to_owned()),
                )
                .read_only(),
                ext_widgets::PropertyGridRow::new(
                    "warnings",
                    "Warnings",
                    if node.warnings.is_empty() {
                        "None"
                    } else {
                        "Needs review"
                    },
                )
                .read_only(),
            ]
        })
        .unwrap_or_else(|| {
            vec![
                ext_widgets::PropertyGridRow::new("missing", "Accessibility", "No metadata")
                    .read_only(),
            ]
        });
    ext_widgets::property_inspector_grid(
        ui,
        parent,
        "diagnostics.a11y",
        &rows,
        diagnostics_grid_options("Accessibility metadata"),
    );
}

fn diagnostics_commands_panel(ui: &mut UiDocument, parent: UiNodeId, registry: &CommandRegistry) {
    let panel = diagnostics_panel(ui, parent, "diagnostics.commands", "Commands");
    let formatter = ShortcutFormatter::default();
    for command_id in [
        "diagnostics.palette",
        "diagnostics.inspect",
        "diagnostics.record",
        "diagnostics.export_theme",
    ] {
        if let Some(command) = registry.command(command_id) {
            let shortcut = registry
                .command_bindings(command.meta.id.clone())
                .first()
                .map(|binding| formatter.format(binding.shortcut))
                .unwrap_or_else(|| "Unbound".to_owned());
            let status = if command.enabled {
                command
                    .meta
                    .category
                    .clone()
                    .unwrap_or_else(|| "General".to_owned())
            } else {
                command
                    .disabled_reason
                    .clone()
                    .unwrap_or_else(|| "Disabled".to_owned())
            };
            diagnostic_command_row(
                ui,
                panel,
                format!(
                    "diagnostics.commands.row.{}",
                    command.meta.id.as_str().replace('.', "_")
                ),
                &command.meta.label,
                &shortcut,
                &status,
            );
        }
    }
    diagnostic_value_row(
        ui,
        panel,
        "diagnostics.commands.conflicts",
        "Shortcut conflicts",
        if registry.conflicts().is_empty() {
            "None"
        } else {
            "Needs review"
        },
    );
}

fn diagnostics_theme_panel(ui: &mut UiDocument, parent: UiNodeId, snapshot: &DebugThemeSnapshot) {
    let panel = diagnostics_panel(ui, parent, "diagnostics.theme", "Theme tokens");
    diagnostic_value_row(
        ui,
        panel,
        "diagnostics.theme.name",
        "Theme",
        snapshot.name.as_str(),
    );
    for token_path in ["colors.accent", "colors.surface", "typography.body"] {
        if let Some(token) = snapshot.token(token_path) {
            diagnostic_value_row(
                ui,
                panel,
                format!("diagnostics.theme.token.{}", token_path.replace('.', "_")),
                token_path,
                token.value.as_str(),
            );
        }
    }
    if let Some(component) = snapshot.component_states.first() {
        diagnostic_value_row(
            ui,
            panel,
            "diagnostics.theme.component.button",
            "Button normal",
            format!(
                "{:.0} x {:.0}, padding {:.0}",
                component.min_width, component.min_height, component.padding_x
            ),
        );
    }
}

fn diagnostics_panel(
    ui: &mut UiDocument,
    parent: UiNodeId,
    name: impl Into<String>,
    title: impl Into<String>,
) -> UiNodeId {
    let name = name.into();
    let title = title.into();
    let panel = ui.add_child(
        parent,
        UiNode::container(
            name.clone(),
            LayoutStyle::column()
                .with_width_percent(1.0)
                .with_padding(10.0)
                .with_gap(8.0)
                .with_flex_shrink(0.0),
        )
        .with_visual(UiVisual::panel(
            color(15, 20, 28),
            Some(StrokeStyle::new(color(52, 65, 84), 1.0)),
            4.0,
        ))
        .with_accessibility(AccessibilityMeta::new(AccessibilityRole::Group).label(title.clone())),
    );
    widgets::label(
        ui,
        panel,
        format!("{name}.title"),
        title,
        text(13.0, color(222, 230, 240)),
        LayoutStyle::new().with_width_percent(1.0),
    );
    panel
}

fn diagnostics_grid_options(label: impl Into<String>) -> ext_widgets::PropertyInspectorOptions {
    ext_widgets::PropertyInspectorOptions {
        label_width: 112.0,
        row_height: 28.0,
        accessibility_label: Some(label.into()),
        ..Default::default()
    }
}

fn diagnostic_value_row(
    ui: &mut UiDocument,
    parent: UiNodeId,
    name: impl Into<String>,
    label: impl Into<String>,
    value: impl Into<String>,
) -> UiNodeId {
    let name = name.into();
    let row = row(ui, parent, name.clone(), 8.0);
    widgets::label(
        ui,
        row,
        format!("{name}.label"),
        label.into(),
        text(12.0, color(166, 180, 198)),
        LayoutStyle::new().with_width(136.0).with_flex_shrink(0.0),
    );
    widgets::label(
        ui,
        row,
        format!("{name}.value"),
        value.into(),
        text(12.0, color(226, 234, 244)),
        LayoutStyle::new().with_width_percent(1.0),
    );
    row
}

fn diagnostic_muted_label(
    ui: &mut UiDocument,
    parent: UiNodeId,
    name: impl Into<String>,
    label: impl Into<String>,
) -> UiNodeId {
    let mut style = text(12.0, color(166, 180, 198));
    style.wrap = TextWrap::WordOrGlyph;
    widgets::label(
        ui,
        parent,
        name,
        label.into(),
        style,
        LayoutStyle::new().with_width_percent(1.0),
    )
}

fn diagnostic_command_row(
    ui: &mut UiDocument,
    parent: UiNodeId,
    name: impl Into<String>,
    label: &str,
    shortcut: &str,
    status: &str,
) -> UiNodeId {
    let name = name.into();
    let row = row(ui, parent, name.clone(), 8.0);
    widgets::label(
        ui,
        row,
        format!("{name}.label"),
        label,
        text(12.0, color(226, 234, 244)),
        LayoutStyle::new()
            .with_width_percent(1.0)
            .with_flex_grow(1.0),
    );
    widgets::label(
        ui,
        row,
        format!("{name}.shortcut"),
        shortcut,
        text(12.0, color(166, 180, 198)),
        LayoutStyle::new().with_width(78.0).with_flex_shrink(0.0),
    );
    widgets::label(
        ui,
        row,
        format!("{name}.status"),
        status,
        text(12.0, color(166, 180, 198)),
        LayoutStyle::new().with_width(140.0).with_flex_shrink(0.0),
    );
    row
}

fn diagnostic_slider_row(
    ui: &mut UiDocument,
    parent: UiNodeId,
    name: impl Into<String>,
    label: impl Into<String>,
    value: f32,
    action: impl Into<String>,
) -> UiNodeId {
    let name = name.into();
    let label = label.into();
    let row = row(ui, parent, format!("{name}.row"), 8.0);
    widgets::label(
        ui,
        row,
        format!("{name}.label"),
        label.clone(),
        text(12.0, color(166, 180, 198)),
        LayoutStyle::new().with_width(136.0).with_flex_shrink(0.0),
    );
    let slider_name = if name.ends_with(".set") {
        format!("{name}.slider")
    } else {
        name.clone()
    };
    let mut options = widgets::SliderOptions::default()
        .with_layout(LayoutStyle::new().with_width(160.0).with_height(24.0))
        .with_value_edit_action(action.into());
    options.accessibility_label = Some(label);
    widgets::slider(ui, row, slider_name, value, 0.0..1.0, options);
    widgets::label(
        ui,
        row,
        format!("{name}.percent"),
        format!("{:.0}%", value * 100.0),
        text(12.0, color(226, 234, 244)),
        LayoutStyle::new().with_width(46.0).with_flex_shrink(0.0),
    );
    row
}

fn diagnostic_button(
    ui: &mut UiDocument,
    parent: UiNodeId,
    name: impl Into<String>,
    label: impl Into<String>,
    active: bool,
) -> UiNodeId {
    let name = name.into();
    let mut options = widgets::ButtonOptions::default()
        .with_layout(LayoutStyle::new().with_height(32.0))
        .with_action(name.clone())
        .pressed(active);
    if active {
        options.visual = UiVisual::panel(
            color(47, 94, 150),
            Some(StrokeStyle::new(color(103, 164, 224), 1.0)),
            4.0,
        );
    }
    widgets::button(ui, parent, name, label, options)
}

fn diagnostic_chip(
    ui: &mut UiDocument,
    parent: UiNodeId,
    name: impl Into<String>,
    label: impl Into<String>,
    active: bool,
) -> UiNodeId {
    let name = name.into();
    let chip = ui.add_child(
        parent,
        UiNode::container(
            name.clone(),
            LayoutStyle::new()
                .with_width(82.0)
                .with_height(28.0)
                .with_padding(4.0)
                .with_flex_shrink(0.0),
        )
        .with_visual(if active {
            UiVisual::panel(
                color(47, 94, 150),
                Some(StrokeStyle::new(color(103, 164, 224), 1.0)),
                4.0,
            )
        } else {
            UiVisual::panel(
                color(31, 39, 50),
                Some(StrokeStyle::new(color(62, 76, 96), 1.0)),
                4.0,
            )
        }),
    );
    widgets::label(
        ui,
        chip,
        format!("{name}.label"),
        label.into(),
        text(12.0, color(226, 234, 244)),
        LayoutStyle::new().with_width_percent(1.0),
    );
    chip
}

fn diagnostics_sample_snapshot(state: &ShowcaseState) -> DebugInspectorSnapshot {
    diagnostics_sample_snapshot_for(
        state.diagnostics_animation_hover,
        state.diagnostics_animation_active,
    )
}

fn diagnostics_sample_snapshot_for(hover: f32, active: bool) -> DebugInspectorSnapshot {
    let mut sample = UiDocument::new(root_style(320.0, 180.0));
    let card = sample.add_child(
        sample.root(),
        UiNode::container(
            "diagnostics.sample.card",
            LayoutStyle::column()
                .with_width_percent(1.0)
                .with_height(120.0)
                .padding(12.0)
                .gap(8.0),
        )
        .with_visual(UiVisual::panel(
            color(16, 22, 30),
            Some(StrokeStyle::new(color(62, 77, 98), 1.0)),
            6.0,
        ))
        .with_accessibility(
            AccessibilityMeta::new(AccessibilityRole::Group).label("Diagnostics sample"),
        ),
    );
    sample.add_child(
        card,
        UiNode::container(
            "diagnostics.sample.preview",
            LayoutStyle::new().with_width(160.0).with_height(38.0),
        )
        .with_input(InputBehavior::BUTTON)
        .with_visual(UiVisual::panel(
            color(52, 112, 180),
            Some(StrokeStyle::new(color(116, 183, 255), 1.0)),
            5.0,
        ))
        .with_accessibility(
            AccessibilityMeta::new(AccessibilityRole::Button)
                .label("Preview action")
                .focusable(),
        )
        .with_animation(
            AnimationMachine::new(
                vec![
                    AnimationState::new(
                        "idle",
                        AnimatedValues::new(1.0, UiPoint::new(0.0, 0.0), 1.0),
                    ),
                    AnimationState::new(
                        "hot",
                        AnimatedValues::new(0.92, UiPoint::new(18.0, 0.0), 1.08),
                    ),
                ],
                vec![AnimationTransition::when(
                    "idle",
                    "hot",
                    AnimationCondition::bool("active", true),
                    0.18,
                )],
                "idle",
            )
            .expect("sample animation")
            .with_number_input("hover", hover)
            .with_blend_binding(AnimationBlendBinding::new("hover", "idle", "hot"))
            .with_bool_input("active", active)
            .with_trigger_input("pulse"),
        ),
    );
    widgets::label(
        &mut sample,
        card,
        "diagnostics.sample.label",
        "Sample node",
        text(12.0, color(198, 210, 226)),
        LayoutStyle::new().with_width_percent(1.0),
    );
    sample
        .compute_layout(UiSize::new(320.0, 180.0), &mut ApproxTextMeasurer)
        .expect("sample layout");
    DebugInspectorSnapshot::from_document(&sample, &mut ApproxTextMeasurer)
}

fn diagnostics_command_registry() -> CommandRegistry {
    let mut registry = CommandRegistry::new();
    registry
        .register(
            CommandMeta::new("diagnostics.palette", "Open command palette")
                .description("Show command search")
                .category("Debug"),
        )
        .expect("command");
    registry
        .register(
            CommandMeta::new("diagnostics.inspect", "Inspect selected node")
                .description("Focus the layout inspector")
                .category("Debug"),
        )
        .expect("command");
    registry
        .register(
            CommandMeta::new("diagnostics.record", "Start interaction recording")
                .description("Capture replay steps")
                .category("Testing"),
        )
        .expect("command");
    registry
        .register(CommandMeta::new(
            "diagnostics.export_theme",
            "Export theme patch",
        ))
        .expect("command");
    registry
        .bind_shortcut(
            CommandScope::Global,
            Shortcut::ctrl('k'),
            "diagnostics.palette",
        )
        .expect("shortcut");
    registry
        .bind_shortcut(
            CommandScope::Panel,
            Shortcut::ctrl('i'),
            "diagnostics.inspect",
        )
        .expect("shortcut");
    registry
        .bind_shortcut(
            CommandScope::Panel,
            Shortcut::ctrl('r'),
            "diagnostics.record",
        )
        .expect("shortcut");
    registry
        .disable("diagnostics.export_theme", "No changes to export")
        .expect("disable");
    registry
}

fn tree_widgets(ui: &mut UiDocument, parent: UiNodeId, state: &ShowcaseState) {
    let body = section(ui, parent, "trees", "Tree view");
    widgets::label(
        ui,
        body,
        "trees.tree_view.title",
        "Editable tree",
        text(12.0, color(166, 176, 190)),
        LayoutStyle::new().with_width_percent(1.0),
    );
    ext_widgets::tree_view(
        ui,
        body,
        "trees.tree_view",
        &editable_tree_items(&state.editable_tree),
        &state.tree,
        ext_widgets::TreeViewOptions::default().with_row_action_prefix("trees.tree"),
    );
    widgets::label(
        ui,
        body,
        "trees.editable.status",
        &state.editable_tree_status,
        text(12.0, color(154, 166, 184)),
        LayoutStyle::new().with_width_percent(1.0),
    );
    widgets::label(
        ui,
        body,
        "trees.virtual.title",
        "Virtualized tree",
        text(12.0, color(166, 176, 190)),
        LayoutStyle::new().with_width_percent(1.0),
    );
    let virtual_nodes = ext_widgets::virtualized_tree_view(
        ui,
        body,
        "trees.virtual",
        &virtual_tree_items(),
        &state.tree_virtual,
        ext_widgets::VirtualTreeViewSpec::new(24.0, 112.0)
            .scroll_offset(state.tree_virtual_scroll)
            .overscan_rows(1),
        ext_widgets::TreeViewOptions::default().with_row_action_prefix("trees.virtual"),
    );
    ui.node_mut(virtual_nodes.body)
        .set_action("trees.virtual.scroll");
    widgets::label(
        ui,
        body,
        "trees.table.title",
        "Tree table",
        text(12.0, color(166, 176, 190)),
        LayoutStyle::new().with_width_percent(1.0),
    );
    tree_table_widgets(ui, body, state);
}

fn tree_table_widgets(ui: &mut UiDocument, parent: UiNodeId, state: &ShowcaseState) {
    let rows = state.tree_table.visible_items(&tree_table_items());
    let columns = [
        ext_widgets::DataTableColumn::new("name", "Name", 220.0),
        ext_widgets::DataTableColumn::new("kind", "Kind", 84.0),
        ext_widgets::DataTableColumn::new("status", "Status", 92.0),
    ];
    let mut options = ext_widgets::DataTableOptions::default()
        .with_row_action_prefix("trees.table")
        .with_cell_action_prefix("trees.table")
        .with_scroll_action("trees.table.scroll");
    options.selection = state
        .tree_table
        .selected_index()
        .map(ext_widgets::DataTableSelection::single_row)
        .unwrap_or_default();
    options.layout = LayoutStyle::column()
        .with_width_percent(1.0)
        .with_height(132.0)
        .with_flex_shrink(0.0);
    ext_widgets::virtualized_data_table(
        ui,
        parent,
        "trees.table",
        &columns,
        ext_widgets::VirtualDataTableSpec {
            row_count: rows.len(),
            row_height: 24.0,
            viewport_width: 396.0,
            viewport_height: 96.0,
            scroll_offset: UiPoint::new(0.0, state.tree_table_scroll),
            overscan_rows: 1,
        },
        options,
        |ui, cell_parent, cell| {
            let Some(item) = rows.get(cell.row) else {
                return;
            };
            if cell.column == 0 {
                tree_table_name_cell(ui, cell_parent, cell.row, item);
            } else {
                widgets::label(
                    ui,
                    cell_parent,
                    format!("trees.table.cell.{}.{}.label", cell.row, cell.column),
                    tree_table_cell_value(item, cell.column),
                    text(12.0, color(220, 228, 238)),
                    LayoutStyle::new().with_width_percent(1.0),
                );
            }
        },
    );
}

fn tree_table_name_cell(
    ui: &mut UiDocument,
    parent: UiNodeId,
    row: usize,
    item: &ext_widgets::TreeVisibleItem,
) {
    if item.depth > 0 {
        ui.add_child(
            parent,
            UiNode::container(
                format!("trees.table.row.{}.indent", item.id),
                LayoutStyle::new()
                    .with_width(item.depth as f32 * 16.0)
                    .with_height_percent(1.0)
                    .with_flex_shrink(0.0),
            ),
        );
    }
    widgets::label(
        ui,
        parent,
        format!("trees.table.row.{}.disclosure", item.id),
        if item.has_children() {
            if item.expanded {
                "v"
            } else {
                ">"
            }
        } else {
            ""
        },
        text(12.0, color(166, 176, 190)),
        LayoutStyle::new()
            .with_width(18.0)
            .with_height_percent(1.0)
            .with_flex_shrink(0.0),
    );
    widgets::label(
        ui,
        parent,
        format!("trees.table.cell.{row}.0.label"),
        item.label.clone(),
        if item.disabled {
            text(12.0, color(154, 166, 184))
        } else {
            text(12.0, color(220, 228, 238))
        },
        LayoutStyle::new().with_width_percent(1.0),
    );
}

fn tree_table_cell_value(item: &ext_widgets::TreeVisibleItem, column: usize) -> String {
    match column {
        0 => item.label.clone(),
        1 => {
            if item.has_children() {
                "Folder".to_owned()
            } else {
                "File".to_owned()
            }
        }
        _ => {
            if item.disabled {
                "Locked".to_owned()
            } else if item.has_children() && item.expanded {
                "Expanded".to_owned()
            } else if item.has_children() {
                "Collapsed".to_owned()
            } else if item.expanded {
                "Expanded".to_owned()
            } else {
                "Ready".to_owned()
            }
        }
    }
}

fn tab_split_dock_widgets(ui: &mut UiDocument, parent: UiNodeId, state: &ShowcaseState) {
    let body = section_with_min_viewport(
        ui,
        parent,
        "layout_widgets",
        "Layout widgets",
        UiSize::new(640.0, 360.0),
    );
    let shell = ui.add_child(
        body,
        UiNode::container(
            "layout_widgets.dock_shell",
            LayoutStyle::column()
                .with_width_percent(1.0)
                .with_height(360.0)
                .with_flex_shrink(0.0),
        )
        .with_visual(UiVisual::panel(
            color(13, 17, 23),
            Some(StrokeStyle::new(color(54, 65, 80), 1.0)),
            0.0,
        )),
    );

    let mut panels = base_layout_dock_panels();
    state.layout_dock.apply_order_to_panels(&mut panels);
    state.layout_dock.apply_visibility_to_panels(&mut panels);

    let mut drawer_options = ext_widgets::DockDrawerRailOptions::default();
    drawer_options.layout = LayoutStyle::row()
        .with_width_percent(1.0)
        .with_height(34.0)
        .with_padding(4.0)
        .with_gap(4.0);
    ext_widgets::dock_drawer_rail(
        ui,
        shell,
        "layout_widgets.dock.drawers",
        &[
            ext_widgets::DockDrawerDescriptor::new(
                "panel_a",
                "Panel A",
                "panel_a",
                ext_widgets::DockSide::Left,
            )
            .open(!state.layout_dock.is_hidden("panel_a"))
            .with_action("layout_widgets.drawer.panel_a"),
            ext_widgets::DockDrawerDescriptor::new(
                "panel_b",
                "Panel B",
                "panel_b",
                ext_widgets::DockSide::Right,
            )
            .open(!state.layout_dock.is_hidden("panel_b"))
            .with_action("layout_widgets.drawer.panel_b"),
        ],
        drawer_options,
    );

    let mut options = ext_widgets::DockWorkspaceOptions::default();
    options.layout = LayoutStyle::column()
        .with_width_percent(1.0)
        .with_height(0.0)
        .with_flex_grow(1.0);
    options.show_titles = true;
    options.handle_thickness = 2.0;
    options.panel_visual = UiVisual::panel(
        color(18, 22, 29),
        Some(StrokeStyle::new(color(54, 65, 80), 1.0)),
        0.0,
    );
    options.center_visual = UiVisual::panel(
        color(15, 19, 25),
        Some(StrokeStyle::new(color(54, 65, 80), 1.0)),
        0.0,
    );
    options.resize_handle_visual = UiVisual::panel(color(65, 78, 96), None, 0.0);

    ext_widgets::dock_workspace(
        ui,
        shell,
        "layout_widgets.dock",
        &panels,
        options,
        |ui, parent, panel| match panel.id.as_str() {
            "panel_a" => layout_panel_contents(
                ui,
                parent,
                "layout.panel_a",
                state.layout_panel_a_scroll,
                &["Item 1", "Item 2", "Item 3", "Item 4", "Item 5", "Item 6"],
            ),
            "workspace" => layout_workspace_contents(
                ui,
                parent,
                "layout.workspace",
                state.layout_workspace_scroll,
            ),
            "panel_b" => layout_panel_contents(
                ui,
                parent,
                "layout.panel_b",
                state.layout_panel_b_scroll,
                &[
                    "Value A", "Value B", "Value C", "Value D", "Value E", "Value F",
                ],
            ),
            _ => {}
        },
    );

    if let Some(floating) = state.layout_dock.floating_panel("panel_a") {
        let floating_panel = ui.add_child(
            shell,
            UiNode::container(
                "layout_widgets.floating.panel_a",
                operad::layout::absolute(
                    floating.rect.x,
                    floating.rect.y,
                    floating.rect.width,
                    floating.rect.height,
                ),
            )
            .with_visual(UiVisual::panel(
                color(18, 22, 29),
                Some(StrokeStyle::new(color(86, 102, 124), 1.0)),
                4.0,
            )),
        );
        layout_panel_contents(
            ui,
            floating_panel,
            "layout.panel_a_floating",
            state.layout_panel_a_scroll,
            &["Item 1", "Item 2", "Item 3", "Item 4"],
        );
    }
}

fn base_layout_dock_panels() -> Vec<ext_widgets::DockPanelDescriptor> {
    vec![
        ext_widgets::DockPanelDescriptor::new(
            "panel_a",
            "Panel A",
            ext_widgets::DockSide::Left,
            200.0,
        )
        .with_min_size(150.0)
        .resizable(true),
        ext_widgets::DockPanelDescriptor::center("workspace", "Workspace").with_min_size(220.0),
        ext_widgets::DockPanelDescriptor::new(
            "panel_b",
            "Panel B",
            ext_widgets::DockSide::Right,
            200.0,
        )
        .with_min_size(150.0)
        .resizable(true),
    ]
}

fn container_widgets(ui: &mut UiDocument, parent: UiNodeId, state: &ShowcaseState) {
    let body = section_with_min_viewport(
        ui,
        parent,
        "containers",
        "Containers",
        UiSize::new(420.0, 0.0),
    );

    let frame = widgets::frame(
        ui,
        body,
        "containers.frame",
        widgets::FrameOptions::default().with_layout(
            LayoutStyle::column()
                .with_width_percent(1.0)
                .with_height(64.0)
                .with_padding(8.0)
                .with_gap(6.0),
        ),
    );
    widgets::strong_label(
        ui,
        frame,
        "containers.frame.title",
        "Frame",
        LayoutStyle::new().with_width_percent(1.0),
    );
    widgets::weak_label(
        ui,
        frame,
        "containers.frame.body",
        "Framed surface with padding.",
        LayoutStyle::new().with_width_percent(1.0),
    );

    let group = widgets::group(ui, body, "containers.group");
    widgets::label(
        ui,
        group,
        "containers.group.label",
        "Group helper",
        text(12.0, color(220, 228, 238)),
        LayoutStyle::new().with_width_percent(1.0),
    );
    let generic_panel = widgets::panel(
        ui,
        body,
        "containers.panel",
        widgets::PanelOptions::group().with_layout(
            LayoutStyle::column()
                .with_width_percent(1.0)
                .with_height(44.0)
                .with_padding(8.0),
        ),
    );
    widgets::label(
        ui,
        generic_panel,
        "containers.panel.label",
        "Generic panel",
        text(12.0, color(220, 228, 238)),
        LayoutStyle::new().with_width_percent(1.0),
    );
    let group_panel = widgets::group_panel(ui, body, "containers.group_panel");
    widgets::label(
        ui,
        group_panel,
        "containers.group_panel.label",
        "Group panel",
        text(12.0, color(220, 228, 238)),
        LayoutStyle::new().with_width_percent(1.0),
    );

    widgets::separator(
        ui,
        body,
        "containers.separator",
        widgets::SeparatorOptions::default(),
    );
    widgets::spacer(
        ui,
        body,
        "containers.spacer",
        LayoutStyle::new()
            .with_width_percent(1.0)
            .with_height(8.0)
            .with_flex_shrink(0.0),
    );

    let grid = widgets::grid::grid(
        ui,
        body,
        "containers.grid",
        widgets::grid::GridOptions::default().with_layout(
            LayoutStyle::column()
                .with_width_percent(1.0)
                .with_height(78.0)
                .with_gap(4.0),
        ),
    );
    for row_index in 0..2 {
        let row = widgets::grid::grid_row(
            ui,
            grid,
            format!("containers.grid.row.{row_index}"),
            widgets::grid::GridRowOptions::default(),
        );
        for column_index in 0..3 {
            widgets::grid::grid_text_cell(
                ui,
                row,
                format!("containers.grid.row.{row_index}.cell.{column_index}"),
                format!("R{} C{}", row_index + 1, column_index + 1),
                widgets::grid::GridCellOptions {
                    text_style: text(12.0, color(214, 224, 238)),
                    ..Default::default()
                },
            );
        }
    }

    widgets::sides(
        ui,
        body,
        "containers.sides",
        widgets::SidesOptions::default()
            .with_layout(LayoutStyle::row().with_width_percent(1.0).with_height(48.0))
            .with_gap(8.0)
            .with_visual(UiVisual::panel(
                color(20, 25, 32),
                Some(StrokeStyle::new(color(58, 68, 84), 1.0)),
                4.0,
            )),
        |ui, left| {
            widgets::label(
                ui,
                left,
                "containers.sides.left.label",
                "Left side",
                text(12.0, color(220, 228, 238)),
                LayoutStyle::new().with_width_percent(1.0),
            );
        },
        |ui, right| {
            widgets::label(
                ui,
                right,
                "containers.sides.right.label",
                "Right side",
                text(12.0, color(220, 228, 238)),
                LayoutStyle::new().with_width_percent(1.0),
            );
        },
    );

    widgets::columns(
        ui,
        body,
        "containers.columns",
        3,
        widgets::ColumnsOptions::default()
            .with_layout(LayoutStyle::row().with_width_percent(1.0).with_height(48.0))
            .with_gap(8.0),
        |ui, column, index| {
            widgets::label(
                ui,
                column,
                format!("containers.columns.{index}.label"),
                format!("Column {}", index + 1),
                text(12.0, color(220, 228, 238)),
                LayoutStyle::new().with_width_percent(1.0),
            );
        },
    );

    let indented = widgets::indented_section(
        ui,
        body,
        "containers.indented",
        widgets::IndentOptions::default().with_amount(24.0),
    );
    widgets::label(
        ui,
        indented,
        "containers.indented.label",
        "Indented section",
        text(12.0, color(196, 210, 230)),
        LayoutStyle::new().with_width_percent(1.0),
    );

    widgets::resize_container(
        ui,
        body,
        "containers.resize_container",
        widgets::ResizeContainerOptions::default().with_layout(
            LayoutStyle::column()
                .with_width_percent(1.0)
                .with_height(92.0)
                .with_flex_shrink(0.0),
        ),
        |ui, content| {
            widgets::label(
                ui,
                content,
                "containers.resize_container.label",
                "Resize container",
                text(12.0, color(220, 228, 238)),
                LayoutStyle::new().with_width_percent(1.0),
            );
        },
    );

    widgets::scene(
        ui,
        body,
        "containers.scene",
        vec![
            ScenePrimitive::Rect(
                PaintRect::solid(UiRect::new(8.0, 12.0, 108.0, 46.0), color(48, 112, 184))
                    .stroke(AlignedStroke::inside(StrokeStyle::new(
                        color(132, 174, 222),
                        1.0,
                    )))
                    .corner_radii(CornerRadii::uniform(6.0)),
            ),
            ScenePrimitive::Circle {
                center: UiPoint::new(150.0, 35.0),
                radius: 22.0,
                fill: color(111, 203, 159),
                stroke: Some(StrokeStyle::new(color(176, 236, 206), 1.0)),
            },
            ScenePrimitive::Line {
                from: UiPoint::new(188.0, 18.0),
                to: UiPoint::new(238.0, 52.0),
                stroke: StrokeStyle::new(color(232, 186, 88), 3.0),
            },
        ],
        widgets::SceneOptions::default()
            .with_layout(LayoutStyle::new().with_width(260.0).with_height(70.0))
            .accessibility_label("Scene primitives"),
    );

    widgets::scroll_container(
        ui,
        body,
        "containers.scroll_area_with_bars",
        state.containers_scroll,
        widgets::ScrollContainerOptions::default()
            .with_axes(ScrollAxes::VERTICAL)
            .with_layout(LayoutStyle::column().with_width(260.0).with_height(116.0))
            .with_viewport_layout(
                LayoutStyle::column()
                    .with_width(0.0)
                    .with_height_percent(1.0)
                    .with_flex_grow(1.0)
                    .with_flex_shrink(1.0),
            ),
        |ui, viewport| {
            for index in 0..5 {
                widgets::label(
                    ui,
                    viewport,
                    format!("containers.scroll_area_with_bars.row.{index}"),
                    format!("Scrollable row {}", index + 1),
                    text(12.0, color(200, 212, 228)),
                    LayoutStyle::new()
                        .with_width(232.0)
                        .with_height(28.0)
                        .with_flex_shrink(0.0),
                );
            }
        },
    );

    widgets::label(
        ui,
        body,
        "containers.area.title",
        "Absolute area",
        text(12.0, color(166, 176, 190)),
        LayoutStyle::new().with_width_percent(1.0),
    );
    let area_host = ui.add_child(
        body,
        UiNode::container(
            "containers.area.host",
            LayoutStyle::new()
                .with_width_percent(1.0)
                .with_height(82.0)
                .with_flex_shrink(0.0),
        )
        .with_visual(UiVisual::panel(
            color(17, 20, 25),
            Some(StrokeStyle::new(color(58, 68, 84), 1.0)),
            4.0,
        )),
    );
    widgets::container::area(
        ui,
        area_host,
        "containers.area",
        widgets::container::AreaOptions::new(UiRect::new(14.0, 14.0, 180.0, 44.0))
            .with_visual(UiVisual::panel(color(39, 72, 109), None, 4.0))
            .accessibility_label("Absolute positioned area"),
        |ui, area| {
            widgets::label(
                ui,
                area,
                "containers.area.label",
                "Area",
                text(12.0, color(238, 244, 252)),
                LayoutStyle::new().with_width_percent(1.0),
            );
        },
    );
}

fn panel_widgets(ui: &mut UiDocument, parent: UiNodeId, state: &ShowcaseState) {
    let body = section_with_min_viewport(ui, parent, "panels", "Panels", UiSize::new(520.0, 320.0));
    widgets::label(
        ui,
        body,
        "panels.title",
        "Drag the split bars to resize the docked panels.",
        text(12.0, color(166, 176, 190)),
        LayoutStyle::new().with_width_percent(1.0),
    );
    let shell = widgets::frame(
        ui,
        body,
        "panels.shell",
        widgets::FrameOptions::default().with_layout(
            LayoutStyle::column()
                .with_width_percent(1.0)
                .with_height(260.0)
                .with_flex_grow(1.0)
                .with_padding(0.0)
                .with_gap(0.0),
        ),
    );
    ext_widgets::split_pane(
        ui,
        shell,
        "panels.top_split",
        ext_widgets::SplitAxis::Vertical,
        state.panels_top_split,
        panel_split_options("panels.resize.top"),
        |ui, top| {
            panel_region(
                ui,
                top,
                "panels.top",
                widgets::PanelKind::Top,
                "Top",
                "Header controls",
            );
        },
        |ui, lower| {
            ext_widgets::split_pane(
                ui,
                lower,
                "panels.bottom_split",
                ext_widgets::SplitAxis::Vertical,
                state.panels_bottom_split,
                panel_split_options("panels.resize.bottom"),
                |ui, middle| {
                    ext_widgets::split_pane(
                        ui,
                        middle,
                        "panels.left_split",
                        ext_widgets::SplitAxis::Horizontal,
                        state.panels_left_split,
                        panel_split_options("panels.resize.left"),
                        |ui, left| {
                            panel_region(
                                ui,
                                left,
                                "panels.left",
                                widgets::PanelKind::Left,
                                "Left",
                                "Navigation",
                            );
                        },
                        |ui, center_and_right| {
                            ext_widgets::split_pane(
                                ui,
                                center_and_right,
                                "panels.right_split",
                                ext_widgets::SplitAxis::Horizontal,
                                state.panels_right_split,
                                panel_split_options("panels.resize.right"),
                                |ui, center| {
                                    panel_region(
                                        ui,
                                        center,
                                        "panels.center",
                                        widgets::PanelKind::Central,
                                        "Central",
                                        "Primary workspace",
                                    );
                                },
                                |ui, right| {
                                    panel_region(
                                        ui,
                                        right,
                                        "panels.right",
                                        widgets::PanelKind::Right,
                                        "Right",
                                        "Inspector",
                                    );
                                },
                            );
                        },
                    );
                },
                |ui, bottom| {
                    panel_region(
                        ui,
                        bottom,
                        "panels.bottom",
                        widgets::PanelKind::Bottom,
                        "Bottom",
                        "Status and output",
                    );
                },
            );
        },
    );
}

fn panel_split_options(action: &'static str) -> ext_widgets::SplitPaneOptions {
    let mut options = ext_widgets::SplitPaneOptions::default().with_handle_action(action);
    options.handle_thickness = PANELS_SPLIT_HANDLE_THICKNESS;
    options.handle_visual = UiVisual::panel(color(58, 70, 88), None, 0.0);
    options.handle_hover_visual = Some(UiVisual::panel(color(100, 172, 244), None, 0.0));
    options
}

fn panel_region(
    ui: &mut UiDocument,
    parent: UiNodeId,
    name: &'static str,
    kind: widgets::PanelKind,
    title: &'static str,
    detail: &'static str,
) -> UiNodeId {
    let panel = widgets::panel(
        ui,
        parent,
        name,
        widgets::PanelOptions {
            kind,
            layout: LayoutStyle::column()
                .with_width_percent(1.0)
                .with_height_percent(1.0)
                .with_padding(10.0)
                .with_gap(6.0),
            visual: UiVisual::panel(
                color(18, 23, 31),
                Some(StrokeStyle::new(color(66, 80, 98), 1.0)),
                0.0,
            ),
            accessibility_label: Some(title.to_string()),
            ..Default::default()
        },
    );
    widgets::label(
        ui,
        panel,
        format!("{name}.label"),
        title,
        text(13.0, color(232, 240, 250)),
        LayoutStyle::new().with_width_percent(1.0),
    );
    widgets::label(
        ui,
        panel,
        format!("{name}.detail"),
        detail,
        text(11.0, color(154, 166, 184)),
        LayoutStyle::new().with_width_percent(1.0),
    );
    panel
}

fn form_widgets(ui: &mut UiDocument, parent: UiNodeId, state: &ShowcaseState) {
    let body = section_with_min_viewport(ui, parent, "forms", "Forms", UiSize::new(390.0, 0.0));
    let section = widgets::form_section(
        ui,
        body,
        "forms.profile",
        None::<String>,
        widgets::FormSectionOptions::default().with_layout(
            LayoutStyle::column()
                .with_width_percent(1.0)
                .with_padding(12.0)
                .with_gap(10.0),
        ),
    );
    profile_form_summary(ui, section.root, state);

    let status_row = wrapping_row(ui, section.root, "forms.profile.status_flags", 6.0);
    form_status_chip(
        ui,
        status_row,
        "forms.profile.status.dirty",
        "dirty",
        state.form.dirty,
    );
    form_status_chip(
        ui,
        status_row,
        "forms.profile.status.pending",
        "pending",
        state.form.pending,
    );
    form_status_chip(
        ui,
        status_row,
        "forms.profile.status.submitted",
        "submitted",
        state.form.submitted,
    );

    let mut name_options = widgets::FormRowOptions::default().required();
    if state.form_name_text.text().trim().is_empty() {
        name_options = name_options.invalid("Name is required");
    }
    let name = widgets::form_row(ui, section.root, "forms.profile.name", name_options);
    widgets::field_label(
        ui,
        name,
        "forms.profile.name.label",
        "Name",
        widgets::FieldLabelOptions::default().required(),
    );
    form_text_field(
        ui,
        name,
        "forms.profile.name.input",
        &state.form_name_text,
        FocusedTextInput::FormName,
        state,
    );
    if state.form_name_text.text().trim().is_empty() {
        widgets::field_validation_message(
            ui,
            name,
            "forms.profile.name.validation",
            ValidationMessage::error("Name is required"),
            widgets::ValidationMessageOptions::default(),
        );
    } else {
        widgets::field_help_text(
            ui,
            name,
            "forms.profile.name.help",
            "Shown in window titles and project lists.",
            widgets::FieldHelpOptions::default(),
        );
    }

    let mut email_options = widgets::FormRowOptions::default().required();
    if !profile_email_valid(state.form_email_text.text()) {
        email_options = email_options.invalid("Use a complete email address");
    }
    let email = widgets::form_row(ui, section.root, "forms.profile.email", email_options);
    widgets::field_label(
        ui,
        email,
        "forms.profile.email.label",
        "Email",
        widgets::FieldLabelOptions::default().required(),
    );
    form_text_field(
        ui,
        email,
        "forms.profile.email.input",
        &state.form_email_text,
        FocusedTextInput::FormEmail,
        state,
    );
    if profile_email_valid(state.form_email_text.text()) {
        widgets::field_help_text(
            ui,
            email,
            "forms.profile.email.help",
            "Used for workspace invites and notifications.",
            widgets::FieldHelpOptions::default(),
        );
    } else {
        widgets::field_validation_message(
            ui,
            email,
            "forms.profile.email.validation",
            ValidationMessage::error("Use a complete email address"),
            widgets::ValidationMessageOptions::default(),
        );
    }

    let role = widgets::form_row(
        ui,
        section.root,
        "forms.profile.role",
        widgets::FormRowOptions::default(),
    );
    widgets::field_label(
        ui,
        role,
        "forms.profile.role.label",
        "Role",
        widgets::FieldLabelOptions::default(),
    );
    form_text_field(
        ui,
        role,
        "forms.profile.role.input",
        &state.form_role_text,
        FocusedTextInput::FormRole,
        state,
    );
    widgets::field_validation_message(
        ui,
        role,
        "forms.profile.role.help",
        if state.form_role_text.text().trim().is_empty() {
            ValidationMessage::warning("Role can be added later")
        } else {
            ValidationMessage::info(
                "Form rows compose labels, controls, help, and validation text.",
            )
        },
        widgets::ValidationMessageOptions::default(),
    );

    let newsletter = widgets::form_row(
        ui,
        section.root,
        "forms.profile.newsletter",
        widgets::FormRowOptions::default().with_accessibility_label("Newsletter preference"),
    );
    let mut newsletter_options =
        widgets::CheckboxOptions::default().with_action("forms.profile.newsletter.toggle");
    newsletter_options.layout = LayoutStyle::new().with_width_percent(1.0).with_height(30.0);
    newsletter_options.text_style = text(12.0, color(220, 228, 238));
    widgets::checkbox(
        ui,
        newsletter,
        "forms.profile.newsletter.input",
        "Send release notes",
        state.form_newsletter,
        newsletter_options,
    );
    widgets::field_help_text(
        ui,
        newsletter,
        "forms.profile.newsletter.help",
        "Checkboxes participate in the same form state as text fields.",
        widgets::FieldHelpOptions::default(),
    );

    widgets::form_error_summary(
        ui,
        section.root,
        "forms.profile.errors",
        &state.form,
        widgets::FormErrorSummaryOptions::default(),
    );
    widgets::label(
        ui,
        section.root,
        "forms.profile.action_help",
        "Apply changes saves this draft and keeps editing. Submit profile saves and marks it submitted.",
        text(11.0, color(154, 166, 184)),
        LayoutStyle::new().with_width_percent(1.0),
    );
    let action_layout = Layout::row()
        .size(LayoutSize::new(
            LayoutDimension::percent(1.0),
            LayoutDimension::Auto,
        ))
        .gap(LayoutGap::points(8.0, 8.0))
        .flex_wrap(LayoutFlexWrap::Wrap)
        .to_layout_style();
    widgets::form_action_buttons(
        ui,
        section.root,
        "forms.profile.actions",
        &state.form,
        widgets::FormActionButtonsOptions::default()
            .with_layout(action_layout)
            .with_labels(widgets::FormActionLabels {
                submit: "Submit profile".to_string(),
                apply: "Apply changes".to_string(),
                cancel: "Cancel".to_string(),
                reset: "Reset".to_string(),
            })
            .include_reset(true)
            .with_action_prefix("forms.profile"),
    );
    widgets::label(
        ui,
        section.root,
        "forms.profile.status",
        format!("Status: {}", state.form_status),
        text(11.0, color(154, 166, 184)),
        LayoutStyle::new().with_width_percent(1.0),
    );
}

fn overlay_widgets(ui: &mut UiDocument, parent: UiNodeId, state: &ShowcaseState) {
    let body =
        section_with_min_viewport(ui, parent, "overlays", "Overlays", UiSize::new(420.0, 0.0));
    let header = widgets::collapsing_header(
        ui,
        body,
        "overlays.collapsing",
        "Collapsing header",
        widgets::CollapsingHeaderOptions::default()
            .expanded(state.overlay_expanded)
            .with_toggle_action("overlays.collapsing.toggle"),
    );
    if let Some(panel) = header.body {
        widgets::label(
            ui,
            panel,
            "overlays.collapsing.body_text",
            "Expanded content lives under the header and remains part of normal layout.",
            text(12.0, color(196, 210, 230)),
            LayoutStyle::new().with_width_percent(1.0),
        );
    }

    let controls = wrapping_row(ui, body, "overlays.controls", 8.0);
    let tooltip_visual = button_visual(58, 78, 96);
    let mut tooltip_options = widgets::ButtonOptions::new(LayoutStyle::new().with_height(32.0));
    tooltip_options.visual = tooltip_visual;
    tooltip_options.hovered_visual = Some(readable_button_hover_visual(tooltip_visual));
    tooltip_options.pressed_visual = Some(adjusted_button_visual(tooltip_visual, -62));
    tooltip_options.pressed_hovered_visual = Some(adjusted_button_visual(tooltip_visual, -24));
    tooltip_options.text_style = text(13.0, color(246, 249, 252));
    let tooltip_target = widgets::button(
        ui,
        controls,
        "overlays.tooltip_target",
        "Tooltip target",
        tooltip_options,
    );
    ui.node_mut(tooltip_target).set_tooltip(
        TooltipContent::new("Tooltip")
            .body("Tooltips render as overlay surfaces anchored to a target.")
            .shortcut_label("Ctrl+K")
            .disabled_reason("Disabled reasons can be announced without changing the trigger."),
    );
    ui.node_mut(tooltip_target)
        .set_tooltip_placement(TooltipPlacement::Below);
    ui.node_mut(tooltip_target)
        .set_tooltip_size(UiSize::new(240.0, 148.0));
    button(
        ui,
        controls,
        "overlays.popup.toggle",
        if state.overlay_popup_open {
            "Close popup"
        } else {
            "Open popup"
        },
        "overlays.popup.toggle",
        button_visual(48, 112, 184),
    );
    button(
        ui,
        controls,
        "overlays.modal.open",
        "Open modal",
        "overlays.modal.open",
        button_visual(58, 78, 96),
    );

    widgets::label(
        ui,
        body,
        "overlays.tooltip_rect.label",
        "A right-edge target keeps its tooltip inside the preview.",
        text(12.0, color(166, 176, 190)),
        LayoutStyle::new().with_width_percent(1.0),
    );
    let preview_viewport = UiRect::new(0.0, 0.0, 420.0, 112.0);
    let tooltip_target = UiRect::new(328.0, 42.0, 64.0, 28.0);
    let tooltip_size = UiSize::new(176.0, 58.0);
    let placed_tooltip = widgets::tooltip::tooltip_rect(
        tooltip_target,
        tooltip_size,
        preview_viewport,
        TooltipPlacement::Right,
        8.0,
        None,
    );
    let clamped_preview = ui.add_child(
        body,
        UiNode::container(
            "overlays.tooltip_rect.preview",
            LayoutStyle::new()
                .with_width_percent(1.0)
                .with_height(112.0)
                .with_flex_shrink(0.0),
        )
        .with_visual(UiVisual::panel(
            color(12, 16, 22),
            Some(StrokeStyle::new(color(52, 64, 80), 1.0)),
            4.0,
        )),
    );
    ui.add_child(
        clamped_preview,
        UiNode::scene(
            "overlays.tooltip_rect.scene",
            vec![
                ScenePrimitive::Line {
                    from: UiPoint::new(placed_tooltip.right() + 2.0, placed_tooltip.y + 29.0),
                    to: UiPoint::new(tooltip_target.x - 2.0, tooltip_target.y + 14.0),
                    stroke: StrokeStyle::new(color(92, 106, 128), 1.0),
                },
                ScenePrimitive::Rect(
                    PaintRect::solid(placed_tooltip, color(24, 29, 38))
                        .stroke(AlignedStroke::inside(StrokeStyle::new(
                            color(92, 106, 128),
                            1.0,
                        )))
                        .corner_radii(CornerRadii::uniform(4.0)),
                ),
                ScenePrimitive::Text(
                    PaintText::new(
                        "Tooltip",
                        UiRect::new(
                            placed_tooltip.x + 12.0,
                            placed_tooltip.y + 9.0,
                            placed_tooltip.width - 24.0,
                            18.0,
                        ),
                        text(12.0, color(225, 233, 244)),
                    )
                    .multiline(false),
                ),
                ScenePrimitive::Text(
                    PaintText::new(
                        "Placed inside",
                        UiRect::new(
                            placed_tooltip.x + 12.0,
                            placed_tooltip.y + 31.0,
                            placed_tooltip.width - 24.0,
                            18.0,
                        ),
                        text(10.0, color(156, 170, 190)),
                    )
                    .multiline(false),
                ),
                ScenePrimitive::Rect(
                    PaintRect::solid(tooltip_target, color(48, 112, 184))
                        .stroke(AlignedStroke::inside(StrokeStyle::new(
                            color(132, 190, 255),
                            1.0,
                        )))
                        .corner_radii(CornerRadii::uniform(3.0)),
                ),
                ScenePrimitive::Text(
                    PaintText::new("Target", tooltip_target, text(10.0, color(240, 247, 255)))
                        .horizontal_align(TextHorizontalAlign::Center)
                        .vertical_align(TextVerticalAlign::Center)
                        .multiline(false),
                ),
            ],
            LayoutStyle::new()
                .with_width_percent(1.0)
                .with_height_percent(1.0),
        ),
    );

    widgets::label(
        ui,
        body,
        "overlays.popup.label",
        "Popup panel",
        text(12.0, color(166, 176, 190)),
        LayoutStyle::new().with_width_percent(1.0),
    );
    widgets::label(
        ui,
        body,
        "overlays.popup.status",
        if state.overlay_popup_open {
            "Popup overlay is open."
        } else {
            "Popup overlay is closed."
        },
        text(12.0, color(196, 210, 230)),
        LayoutStyle::new().with_width_percent(1.0),
    );
    let popup_host_layout = if state.overlay_popup_open {
        LayoutStyle::column()
            .with_width_percent(1.0)
            .with_height(128.0)
            .with_flex_shrink(0.0)
    } else {
        LayoutStyle::column()
            .with_width_percent(1.0)
            .with_padding(10.0)
            .with_flex_shrink(0.0)
    };
    let popup_host = ui.add_child(
        body,
        UiNode::container("overlays.popup.host", popup_host_layout).with_visual(UiVisual::panel(
            color(12, 16, 22),
            Some(StrokeStyle::new(color(52, 64, 80), 1.0)),
            4.0,
        )),
    );
    if state.overlay_popup_open {
        let popup = ext_widgets::popup_panel(
            ui,
            popup_host,
            "overlays.popup_panel",
            UiRect::new(10.0, 10.0, 220.0, 104.0),
            ext_widgets::PopupOptions {
                z_index: 4,
                portal: UiPortalTarget::Parent,
                accessibility: Some(
                    AccessibilityMeta::new(AccessibilityRole::Dialog).label("Popup preview"),
                ),
                ..Default::default()
            },
        );
        let popup_body = ui.add_child(
            popup,
            UiNode::container(
                "overlays.popup_panel.body",
                LayoutStyle::column()
                    .with_width_percent(1.0)
                    .with_height_percent(1.0)
                    .with_padding(10.0)
                    .with_gap(6.0),
            ),
        );
        let popup_header = row(ui, popup_body, "overlays.popup_panel.header", 8.0);
        widgets::label(
            ui,
            popup_header,
            "overlays.popup_panel.label",
            "Popup panel",
            text(12.0, color(220, 228, 238)),
            LayoutStyle::new().with_width_percent(1.0),
        );
        let mut close = widgets::ButtonOptions::new(LayoutStyle::size(26.0, 22.0))
            .with_action("overlays.popup.close");
        close.visual = UiVisual::panel(color(28, 34, 43), None, 3.0);
        close.hovered_visual = Some(button_visual(54, 70, 92));
        close.text_style = text(12.0, color(220, 228, 238));
        widgets::button(ui, popup_header, "overlays.popup_panel.close", "x", close);
        widgets::label(
            ui,
            popup_body,
            "overlays.popup_panel.body_text",
            "Popup content is conditionally rendered.",
            text(11.0, color(196, 210, 230)),
            LayoutStyle::new().with_width_percent(1.0),
        );
    } else {
        widgets::label(
            ui,
            popup_host,
            "overlays.popup.empty",
            "Open the popup to render an overlay inside this host.",
            text(12.0, color(154, 166, 184)),
            LayoutStyle::new().with_width_percent(1.0),
        );
    }

    widgets::label(
        ui,
        body,
        "overlays.toasts.label",
        "Toasts",
        text(12.0, color(166, 176, 190)),
        LayoutStyle::new().with_width_percent(1.0),
    );
    let toast_controls = row(ui, body, "overlays.toasts.controls", 10.0);
    button(
        ui,
        toast_controls,
        "overlays.toasts.show",
        "Show toast",
        "toast.show",
        button_visual(48, 112, 184),
    );
    button(
        ui,
        toast_controls,
        "overlays.toasts.hide",
        "Hide",
        "toast.hide",
        button_visual(58, 78, 96),
    );
    widgets::label(
        ui,
        body,
        "overlays.toasts.status",
        if state.toast_visible {
            "Toast overlay is visible."
        } else {
            "Toast overlay is hidden."
        },
        text(12.0, color(196, 210, 230)),
        LayoutStyle::new().with_width_percent(1.0),
    );
    widgets::label(
        ui,
        body,
        "overlays.toasts.action_status",
        format!("Action: {}", state.toast_action_status),
        text(12.0, color(154, 166, 184)),
        LayoutStyle::new().with_width_percent(1.0),
    );

    if state.overlay_modal_open {
        let modal = widgets::modal_dialog(
            ui,
            parent,
            "overlays.modal",
            "Modal dialog",
            widgets::ModalDialogOptions::default()
                .with_size(320.0, 180.0)
                .with_close_action("overlays.modal.close")
                .with_dismissal(ext_widgets::DialogDismissal::MODAL)
                .with_focus_restore(FocusRestoreTarget::Previous),
        );
        widgets::label(
            ui,
            modal.body,
            "overlays.modal.body.text",
            "Modal dialogs are portaled to the application overlay, include a scrim, and trap focus.",
            text(12.0, color(220, 228, 238)),
            LayoutStyle::new().with_width_percent(1.0),
        );
        button(
            ui,
            modal.body,
            "overlays.modal.body.close",
            "Close modal",
            "overlays.modal.close",
            button_visual(48, 112, 184),
        );
    }
}

fn drag_drop_widgets(ui: &mut UiDocument, parent: UiNodeId, state: &ShowcaseState) {
    let body = section_with_min_viewport(
        ui,
        parent,
        "drag_drop",
        "Drag and drop",
        UiSize::new(420.0, 0.0),
    );
    widgets::label(
        ui,
        body,
        "drag_drop.sources.label",
        "Drag sources",
        text(12.0, color(166, 176, 190)),
        LayoutStyle::new().with_width_percent(1.0),
    );
    let sources = wrapping_row(ui, body, "drag_drop.sources", 8.0);
    widgets::dnd_drag_source(
        ui,
        sources,
        "drag_drop.text_source",
        "Text payload",
        DragPayload::text("Operad payload"),
        widgets::DragSourceOptions::default()
            .with_layout(drag_source_layout())
            .with_kind(DragDropSurfaceKind::ListRow)
            .with_allowed_operations([DragOperation::Copy, DragOperation::Move])
            .with_action("drag_drop.text_source")
            .with_accessibility_hint("Start a text drag operation"),
    );
    widgets::dnd_drag_source(
        ui,
        sources,
        "drag_drop.file_source",
        "File payload",
        DragPayload::files(["/tmp/showcase.scene"]),
        widgets::DragSourceOptions::default()
            .with_layout(drag_source_layout())
            .with_kind(DragDropSurfaceKind::Asset)
            .with_drag_image_policy(widgets::DragImagePolicy::image_key(
                BuiltInIcon::Folder.key(),
                UiSize::new(120.0, 36.0),
                UiPoint::new(10.0, 10.0),
            ))
            .with_allowed_operations([DragOperation::Copy])
            .with_action("drag_drop.file_source"),
    );
    widgets::dnd_drag_source(
        ui,
        sources,
        "drag_drop.bytes_source",
        "Image bytes",
        DragPayload::bytes(DragBytes::new("image/png", vec![137, 80, 78, 71]).name("sprite.png")),
        widgets::DragSourceOptions::default()
            .with_layout(drag_source_layout())
            .with_kind(DragDropSurfaceKind::Asset)
            .with_action("drag_drop.bytes_source")
            .without_drag_image(),
    );

    widgets::label(
        ui,
        body,
        "drag_drop.zones.label",
        "Drop zones",
        text(12.0, color(166, 176, 190)),
        LayoutStyle::new().with_width_percent(1.0),
    );
    let zones = wrapping_row(ui, body, "drag_drop.zones", 8.0);
    let accepted_options = widgets::DropZoneOptions::default()
        .with_layout(drop_zone_layout())
        .with_kind(DragDropSurfaceKind::EditorSurface)
        .with_accepted_payload(DropPayloadFilter::empty().text())
        .with_accepted_operations([DragOperation::Copy, DragOperation::Move])
        .with_action("drag_drop.accept_text")
        .with_accessibility_hint("Accepts text payloads");
    let accepted = widgets::dnd_drop_zone(
        ui,
        zones,
        "drag_drop.accept_text",
        "Text accepted",
        accepted_options.clone(),
    );
    widgets::drag_drop::dnd_apply_drop_zone_preview(
        ui,
        accepted.root,
        &accepted_options,
        widgets::drag_drop::DropZonePreviewState::Accepted,
    );

    let rejected_options = widgets::DropZoneOptions::default()
        .with_layout(drop_zone_layout())
        .with_kind(DragDropSurfaceKind::Asset)
        .with_accepted_payload(DropPayloadFilter::empty().files())
        .with_action("drag_drop.files_only");
    let rejected = widgets::dnd_drop_zone(
        ui,
        zones,
        "drag_drop.files_only",
        "Files only",
        rejected_options.clone(),
    );
    widgets::drag_drop::dnd_apply_drop_zone_preview(
        ui,
        rejected.root,
        &rejected_options,
        widgets::drag_drop::DropZonePreviewState::Rejected,
    );
    let image_options = widgets::DropZoneOptions::default()
        .with_layout(drop_zone_layout())
        .with_kind(DragDropSurfaceKind::Asset)
        .with_accepted_payload(DropPayloadFilter::empty().mime_type("image/*"))
        .with_accepted_operations([DragOperation::Copy])
        .with_action("drag_drop.image_bytes");
    let image_zone = widgets::dnd_drop_zone(
        ui,
        zones,
        "drag_drop.image_bytes",
        "Image bytes",
        image_options.clone(),
    );
    widgets::drag_drop::dnd_apply_drop_zone_preview(
        ui,
        image_zone.root,
        &image_options,
        widgets::drag_drop::DropZonePreviewState::Hovered,
    );

    let disabled_options = widgets::DropZoneOptions::default()
        .with_layout(drop_zone_layout())
        .with_kind(DragDropSurfaceKind::EditorSurface)
        .with_accepted_payload(DropPayloadFilter::any())
        .with_action("drag_drop.disabled")
        .disabled();
    let disabled_zone = widgets::dnd_drop_zone(
        ui,
        zones,
        "drag_drop.disabled",
        "Disabled",
        disabled_options.clone(),
    );
    widgets::drag_drop::dnd_apply_drop_zone_preview(
        ui,
        disabled_zone.root,
        &disabled_options,
        widgets::drag_drop::DropZonePreviewState::Disabled,
    );

    let operation_row = wrapping_row(ui, body, "drag_drop.operations", 6.0);
    dnd_operation_chip(ui, operation_row, "drag_drop.operation.copy", "copy");
    dnd_operation_chip(ui, operation_row, "drag_drop.operation.move", "move");
    dnd_operation_chip(ui, operation_row, "drag_drop.operation.link", "link");
    widgets::label(
        ui,
        body,
        "drag_drop.status",
        format!("Status: {}", state.drag_drop_status),
        text(11.0, color(154, 166, 184)),
        LayoutStyle::new().with_width_percent(1.0),
    );
}

fn media_widgets(ui: &mut UiDocument, parent: UiNodeId, state: &ShowcaseState) {
    let body = section_with_min_viewport(
        ui,
        parent,
        "media",
        "Media",
        UiSize::new(MEDIA_ICON_TILE_WIDTH, 0.0),
    );
    widgets::label(
        ui,
        body,
        "media.icons.label",
        "Built-in icons",
        text(12.0, color(166, 176, 190)),
        LayoutStyle::new().with_width_percent(1.0),
    );
    let icon_columns = media_icon_columns(state);
    let icons = media_icon_grid(
        ui,
        body,
        "media.icons",
        icon_columns,
        BuiltInIcon::COMMON.len(),
    );
    for icon in BuiltInIcon::COMMON {
        media_icon_tile(ui, icons, icon);
    }

    widgets::label(
        ui,
        body,
        "media.variants.label",
        "Image variants",
        text(12.0, color(166, 176, 190)),
        LayoutStyle::new().with_width_percent(1.0),
    );
    let variants = wrapping_row(ui, body, "media.variants", 10.0);
    widgets::image(
        ui,
        variants,
        "media.image.user_png",
        ImageContent::from(ImageHandle::app(SHOWCASE_USER_IMAGE_KEY)),
        widgets::ImageOptions::default()
            .with_layout(media_preview_image_layout())
            .with_accessibility_label("User supplied PNG image"),
    );
    widgets::image(
        ui,
        variants,
        "media.image.untinted",
        icon_image(BuiltInIcon::Play),
        widgets::ImageOptions::default()
            .with_layout(media_preview_image_layout())
            .with_accessibility_label("Untinted play icon"),
    );
    widgets::image(
        ui,
        variants,
        "media.image.warning",
        ImageContent::new(BuiltInIcon::Warning.key()).tinted(color(232, 186, 88)),
        widgets::ImageOptions::default()
            .with_layout(media_preview_image_layout())
            .with_accessibility_label("Tinted warning icon"),
    );
    widgets::image(
        ui,
        variants,
        "media.image.shader",
        ImageContent::new(BuiltInIcon::Grid.key()).tinted(color(118, 183, 255)),
        widgets::ImageOptions::default()
            .with_layout(media_preview_image_layout())
            .with_shader(ShaderEffect::tint(color(169, 119, 255), 0.65))
            .with_accessibility_label("Shader-decorated grid icon"),
    );
}

fn shader_effect_widgets(ui: &mut UiDocument, parent: UiNodeId, state: &ShowcaseState) {
    let body = section_with_min_viewport(
        ui,
        parent,
        "shaders",
        "Shader effects",
        UiSize::new(420.0, 280.0),
    );
    widgets::label(
        ui,
        body,
        "shaders.effects.label",
        "Built-in effects",
        text(12.0, color(166, 176, 190)),
        LayoutStyle::new().with_width_percent(1.0),
    );
    let phase = (state.progress_phase / std::f32::consts::TAU).fract();
    let previews = wrapping_row(ui, body, "shaders.effects", 10.0);
    shader_effect_preview_card(ui, previews, "base", "Base", None);
    shader_effect_preview_card(
        ui,
        previews,
        "tint",
        "Tint",
        Some(ShaderEffect::tint(color(252, 186, 90), 0.72)),
    );
    shader_effect_preview_card(
        ui,
        previews,
        "shine",
        "Shine",
        Some(ShaderEffect::shine(phase, 0.55).uniform("width", 0.14)),
    );
    shader_effect_preview_card(
        ui,
        previews,
        "glow",
        "Glow",
        Some(ShaderEffect::glow(color(118, 183, 255), 0.9, 7.0)),
    );

    widgets::label(
        ui,
        body,
        "shaders.widgets.label",
        "Applied to widgets",
        text(12.0, color(166, 176, 190)),
        LayoutStyle::new().with_width_percent(1.0),
    );
    let panel = ui.add_child(
        body,
        UiNode::container(
            "shaders.widgets",
            LayoutStyle::column()
                .with_width_percent(1.0)
                .with_padding(10.0)
                .with_gap(10.0)
                .with_flex_shrink(0.0),
        )
        .with_visual(UiVisual::panel(
            color(13, 18, 25),
            Some(StrokeStyle::new(color(48, 61, 78), 1.0)),
            4.0,
        )),
    );
    let control_row = wrapping_row(ui, panel, "shaders.widgets.controls", 10.0);
    let mut shine_button = widgets::ButtonOptions::new(
        LayoutStyle::new()
            .with_width(150.0)
            .with_height(34.0)
            .with_flex_shrink(0.0),
    );
    shine_button.leading_image = Some(icon_image(BuiltInIcon::Settings));
    shine_button.image_shader = Some(ShaderEffect::tint(color(111, 203, 159), 0.85));
    shine_button.shader = Some(ShaderEffect::shine(phase, 0.45).uniform("width", 0.12));
    widgets::button(
        ui,
        control_row,
        "shaders.widgets.button",
        "Shine button",
        shine_button,
    );

    widgets::checkbox_with_state(
        ui,
        control_row,
        "shaders.widgets.checkbox",
        "Glow check",
        widgets::CheckboxState::Checked,
        widgets::CheckboxOptions::default()
            .with_check_color(color(118, 183, 255))
            .with_check_shader(ShaderEffect::glow(color(118, 183, 255), 1.0, 4.0)),
    );

    let progress_value = smooth_loop(state.progress_phase * 0.8, 0.2) * 100.0;
    let mut progress = ext_widgets::ProgressIndicatorOptions::default();
    progress.layout = LayoutStyle::new().with_width_percent(1.0).with_height(12.0);
    progress.fill_visual = UiVisual::panel(color(111, 203, 159), None, 4.0);
    progress.fill_shader = Some(ShaderEffect::shine(phase, 0.5).uniform("width", 0.16));
    progress.accessibility_label = Some("Shadered progress fill".to_string());
    ext_widgets::progress_indicator(
        ui,
        panel,
        "shaders.widgets.progress",
        ext_widgets::ProgressIndicatorValue::percent(progress_value),
        progress,
    );

    let mut slider_options = widgets::SliderOptions::default();
    slider_options.layout = LayoutStyle::new()
        .with_width_percent(1.0)
        .with_height(28.0)
        .with_flex_shrink(0.0);
    slider_options.fill_shader = Some(ShaderEffect::tint(color(169, 119, 255), 0.55));
    slider_options.thumb_shader = Some(ShaderEffect::glow(color(252, 186, 90), 0.9, 4.0));
    slider_options.accessibility_label = Some("Shadered slider".to_string());
    widgets::slider(
        ui,
        panel,
        "shaders.widgets.slider",
        smooth_loop(state.progress_phase * 0.6, 0.4),
        0.0..1.0,
        slider_options,
    );
}

fn shader_effect_preview_card(
    ui: &mut UiDocument,
    parent: UiNodeId,
    name: &'static str,
    label: &'static str,
    shader: Option<ShaderEffect>,
) {
    let tile = ui.add_child(
        parent,
        UiNode::container(
            format!("shaders.effect_tile.{name}"),
            LayoutStyle::column()
                .with_width(96.0)
                .with_height(104.0)
                .with_padding(8.0)
                .with_gap(8.0)
                .with_flex_shrink(0.0),
        )
        .with_visual(UiVisual::panel(
            color(17, 22, 30),
            Some(StrokeStyle::new(color(50, 62, 78), 1.0)),
            4.0,
        ))
        .with_accessibility(AccessibilityMeta::new(AccessibilityRole::Group).label(label)),
    );
    let mut swatch = UiNode::container(
        format!("shaders.effect.{name}.swatch"),
        LayoutStyle::new()
            .with_width_percent(1.0)
            .with_height(50.0)
            .with_flex_shrink(0.0),
    )
    .with_visual(UiVisual::panel(
        color(64, 109, 194),
        Some(StrokeStyle::new(color(138, 164, 194), 1.0)),
        8.0,
    ));
    if let Some(shader) = shader {
        swatch = swatch.with_shader(shader);
    }
    ui.add_child(tile, swatch);
    widgets::label(
        ui,
        tile,
        format!("shaders.effect.{name}.label"),
        label,
        text(11.0, color(204, 216, 232)),
        LayoutStyle::new().with_width_percent(1.0),
    );
}

fn shader_lab_widgets(ui: &mut UiDocument, parent: UiNodeId, state: &ShowcaseState) {
    let body = section_with_min_viewport(
        ui,
        parent,
        "shader_lab",
        "Shader lab",
        UiSize::new(SHADER_LAB_CONTENT_MIN_WIDTH, SHADER_LAB_CONTENT_MIN_HEIGHT),
    );
    let source_error = state.shader_lab_source_error.as_deref();
    let source_valid = source_error.is_none();

    let mut split_options = ext_widgets::SplitPaneOptions::default()
        .with_handle_action("shader_lab.workspace.resize")
        .with_handle_hover_visual(UiVisual::panel(color(96, 166, 238), None, 2.0));
    split_options.layout = Layout::row()
        .size(LayoutSize::new(
            LayoutDimension::percent(1.0),
            LayoutDimension::points(SHADER_LAB_WORKSPACE_HEIGHT),
        ))
        .min_size(LayoutSize::points(
            SHADER_LAB_CONTENT_MIN_WIDTH,
            SHADER_LAB_WORKSPACE_HEIGHT,
        ))
        .flex(0.0, 0.0, LayoutDimension::Auto)
        .to_layout_style();
    split_options.handle_thickness = SHADER_LAB_SPLIT_HANDLE_THICKNESS;
    split_options.handle_visual = UiVisual::panel(color(48, 61, 78), None, 2.0);

    ext_widgets::split_pane(
        ui,
        body,
        "shader_lab.workspace",
        ext_widgets::SplitAxis::Horizontal,
        state.shader_lab_split,
        split_options,
        |ui, preview_pane| {
            shader_lab_preview_column(ui, preview_pane, state, source_error, source_valid);
        },
        |ui, editor_pane| {
            shader_lab_editor_column(ui, editor_pane, state, source_error);
        },
    );
}

fn shader_lab_preview_column(
    ui: &mut UiDocument,
    parent: UiNodeId,
    state: &ShowcaseState,
    source_error: Option<&str>,
    source_valid: bool,
) {
    let preview_column = ui.add_child(
        parent,
        UiNode::container(
            "shader_lab.preview.column",
            LayoutStyle::column()
                .with_width_percent(1.0)
                .with_height_percent(1.0)
                .with_gap(8.0)
                .with_flex_shrink(1.0),
        ),
    );
    let target_row = row(ui, preview_column, "shader_lab.target.row", 8.0);
    widgets::label(
        ui,
        target_row,
        "shader_lab.target.caption",
        "Preview",
        text(12.0, color(166, 176, 190)),
        LayoutStyle::new()
            .with_width(58.0)
            .with_height(30.0)
            .with_flex_shrink(0.0),
    );
    shader_lab_dropdown_select(
        ui,
        target_row,
        "shader_lab.target",
        &shader_lab_target_options(),
        &state.shader_lab_target_menu,
        160.0,
        "Preview target",
        "Shader lab preview target",
    );
    shader_lab_preview_controls(ui, preview_column, state);

    let preview = ui.add_child(
        preview_column,
        UiNode::container(
            "shader_lab.preview.surface",
            LayoutStyle::column()
                .with_width_percent(1.0)
                .with_height(0.0)
                .with_flex_grow(1.0)
                .with_padding(18.0)
                .with_gap(8.0)
                .with_align_items(taffy::prelude::AlignItems::Center)
                .with_justify_content(taffy::prelude::JustifyContent::Center)
                .with_flex_shrink(0.0),
        )
        .with_visual(UiVisual::panel(
            color(8, 12, 18),
            Some(StrokeStyle::new(color(48, 61, 78), 1.0)),
            4.0,
        )),
    );
    shader_lab_preview(ui, preview, state, source_valid);

    if let Some(status) = shader_lab_status_label(state, source_error) {
        widgets::label(
            ui,
            preview_column,
            "shader_lab.preview.status",
            status,
            text(11.0, color(166, 176, 190)),
            LayoutStyle::new().with_width_percent(1.0),
        );
    }
    shader_lab_material_contract_demo(ui, preview_column, state);
}

fn shader_lab_preview_controls(ui: &mut UiDocument, parent: UiNodeId, state: &ShowcaseState) {
    let controls = ui.add_child(
        parent,
        UiNode::container(
            "shader_lab.preview.controls",
            LayoutStyle::column()
                .with_width_percent(1.0)
                .with_gap(6.0)
                .with_flex_shrink(0.0),
        ),
    );
    let text_row = wrapping_row(ui, controls, "shader_lab.preview.text_controls", 8.0);
    shader_lab_option_checkbox(
        ui,
        text_row,
        "shader_lab.frame_text.toggle",
        "Frame",
        state.shader_lab_show_frame_text,
    );
    shader_lab_option_checkbox(
        ui,
        text_row,
        "shader_lab.button_text.toggle",
        "Button",
        state.shader_lab_show_button_text,
    );

    let style_row = wrapping_row(ui, controls, "shader_lab.preview.style_controls", 8.0);
    shader_lab_slider_control(
        ui,
        style_row,
        "shader_lab.surface.stroke",
        "Border",
        state.shader_lab_surface_stroke_width,
        SHADER_LAB_SURFACE_STROKE_MAX,
        1,
    );
    shader_lab_slider_control(
        ui,
        style_row,
        "shader_lab.surface.radius",
        "Radius",
        state.shader_lab_surface_radius,
        SHADER_LAB_SURFACE_RADIUS_MAX,
        0,
    );
}

fn shader_lab_material_contract_demo(ui: &mut UiDocument, parent: UiNodeId, state: &ShowcaseState) {
    let panel = ui.add_child(
        parent,
        UiNode::container(
            "shader_lab.material",
            LayoutStyle::column()
                .with_width_percent(1.0)
                .with_gap(6.0)
                .with_flex_shrink(0.0),
        ),
    );
    widgets::label(
        ui,
        panel,
        "shader_lab.material.title",
        "Material",
        text(12.0, color(186, 198, 216)),
        LayoutStyle::new().with_width_percent(1.0),
    );
    let controls = wrapping_row(ui, panel, "shader_lab.material.controls", 8.0);
    shader_lab_labeled_dropdown(
        ui,
        controls,
        "shader_lab.material.shader",
        "Shader",
        &shader_lab_material_shader_options(),
        &state.shader_lab_material_shader_menu,
        132.0,
    );
    shader_lab_labeled_dropdown(
        ui,
        controls,
        "shader_lab.material.shape",
        "Shape",
        &shader_lab_material_shape_options(),
        &state.shader_lab_material_shape_menu,
        132.0,
    );
    shader_lab_labeled_dropdown(
        ui,
        controls,
        "shader_lab.material.geometry",
        "Geometry",
        &shader_lab_material_geometry_options(),
        &state.shader_lab_material_geometry_menu,
        140.0,
    );
    shader_lab_slider_control(
        ui,
        controls,
        "shader_lab.material.outset",
        "Outset",
        state.shader_lab_material_outset,
        SHADER_LAB_MATERIAL_OUTSET_MAX,
        0,
    );

    let contracts_layout = Layout::column()
        .size(LayoutSize::new(
            LayoutDimension::percent(1.0),
            LayoutDimension::Auto,
        ))
        .padding(LayoutSpacing::new(
            LayoutLength::points(4.0),
            LayoutLength::points(4.0),
            LayoutLength::points(SHADER_LAB_MATERIAL_OUTSET_MAX),
            LayoutLength::points(8.0),
        ))
        .flex(0.0, 0.0, LayoutDimension::Auto)
        .to_layout_style();
    let contracts_shell = ui.add_child(
        panel,
        UiNode::container("shader_lab.material.contracts.shell", contracts_layout),
    );
    let row = wrapping_row(ui, contracts_shell, "shader_lab.material.contracts", 8.0);
    shader_lab_material_chip(
        ui,
        row,
        "shader_lab.material.current",
        "Selected",
        shader_lab_selected_material(state),
        shader_lab_material_visual(state.shader_lab_material_shape),
    );
    shader_lab_material_chip(
        ui,
        row,
        "shader_lab.material.outset",
        "Glow",
        ElementMaterial::shader(ShaderEffect::glow(
            color(100, 180, 255),
            0.95,
            SHADER_LAB_MATERIAL_OUTSET,
        ))
        .with_paint_outset(LayoutInsets::points(
            state
                .shader_lab_material_outset
                .clamp(0.0, SHADER_LAB_MATERIAL_OUTSET_MAX),
        )),
        UiVisual::panel(color(32, 64, 96), None, 8.0),
    );
    shader_lab_material_chip(
        ui,
        row,
        "shader_lab.material.circle_hit",
        "Circle",
        ElementMaterial::new()
            .with_clip_shape(ElementShape::circle())
            .with_hit_shape(ElementShape::circle()),
        UiVisual::panel(
            color(74, 133, 198),
            Some(StrokeStyle::new(color(212, 232, 255), 1.0)),
            999.0,
        ),
    );
    shader_lab_material_chip(
        ui,
        row,
        "shader_lab.material.geometry_chip",
        "Warp",
        ElementMaterial::new()
            .with_paint_outset(LayoutInsets::points(8.0))
            .with_geometry_effect(GeometryEffect::wave(8.0)),
        UiVisual::panel(
            color(101, 70, 170),
            Some(StrokeStyle::new(color(214, 196, 255), 1.0)),
            6.0,
        ),
    );
}

fn shader_lab_labeled_dropdown(
    ui: &mut UiDocument,
    parent: UiNodeId,
    name: &'static str,
    label: &'static str,
    options: &[ext_widgets::SelectOption],
    state: &ext_widgets::SelectMenuState,
    width: f32,
) {
    let control = ui.add_child(
        parent,
        UiNode::container(
            format!("{name}.control"),
            LayoutStyle::row()
                .with_width(width + 74.0)
                .with_height(30.0)
                .with_gap(6.0)
                .with_align_items(taffy::prelude::AlignItems::Center)
                .with_flex_shrink(0.0),
        ),
    );
    widgets::label(
        ui,
        control,
        format!("{name}.caption"),
        label,
        text(12.0, color(166, 176, 190)),
        LayoutStyle::new()
            .with_width(66.0)
            .with_height(30.0)
            .with_flex_shrink(0.0),
    );
    shader_lab_dropdown_select(ui, control, name, options, state, width, label, label);
}

fn shader_lab_dropdown_select(
    ui: &mut UiDocument,
    parent: UiNodeId,
    name: &'static str,
    options: &[ext_widgets::SelectOption],
    state: &ext_widgets::SelectMenuState,
    width: f32,
    placeholder: &'static str,
    accessibility_label: &'static str,
) {
    let anchor = ui.add_child(
        parent,
        UiNode::container(
            format!("{name}.anchor"),
            LayoutStyle::new()
                .with_width(width)
                .with_height(30.0)
                .with_flex_shrink(0.0),
        ),
    );
    let nodes = ext_widgets::dropdown_select(
        ui,
        anchor,
        name,
        options,
        state,
        Some(select_popup(
            UiRect::new(0.0, 0.0, width, 30.0),
            UiRect::new(0.0, 0.0, width + 48.0, 240.0),
        )),
        dropdown_select_options(width, name, placeholder, accessibility_label),
    );
    ui.node_mut(nodes.trigger)
        .set_action(format!("{name}.toggle"));
}

fn shader_lab_selected_material(state: &ShowcaseState) -> ElementMaterial {
    let shape = state.shader_lab_material_shape.shape();
    let mut material = ElementMaterial::new()
        .with_paint_outset(LayoutInsets::points(
            state
                .shader_lab_material_outset
                .clamp(0.0, SHADER_LAB_MATERIAL_OUTSET_MAX),
        ))
        .with_clip_shape(shape.clone())
        .with_hit_shape(shape)
        .with_geometry_effect(state.shader_lab_material_geometry.effect());
    if let Some(shader) = shader_lab_material_shader_effect(state) {
        material = material.with_shader(shader);
    }
    material
}

fn shader_lab_material_shader_effect(state: &ShowcaseState) -> Option<ShaderEffect> {
    let phase = state.progress_phase.rem_euclid(1.0);
    match state.shader_lab_material_shader {
        ShaderLabMaterialShader::None => None,
        ShaderLabMaterialShader::Tint => Some(ShaderEffect::tint(color(255, 196, 92), 0.62)),
        ShaderLabMaterialShader::Shine => Some(ShaderEffect::shine(phase, 0.92)),
        ShaderLabMaterialShader::Glow => Some(ShaderEffect::glow(
            color(100, 180, 255),
            0.95,
            state
                .shader_lab_material_outset
                .clamp(0.0, SHADER_LAB_MATERIAL_OUTSET_MAX),
        )),
        ShaderLabMaterialShader::Plasma => {
            Some(ShaderEffect::plasma(phase, color(82, 190, 255), 0.75, 12.0))
        }
        ShaderLabMaterialShader::Rings => {
            Some(ShaderEffect::rings(phase, color(232, 170, 88), 0.78, 11.0))
        }
        ShaderLabMaterialShader::Grid => {
            Some(ShaderEffect::grid(phase, color(156, 132, 255), 0.85, 9.0))
        }
    }
}

fn shader_lab_material_visual(shape: ShaderLabMaterialShape) -> UiVisual {
    UiVisual::panel(
        color(39, 71, 114),
        Some(StrokeStyle::new(color(168, 205, 255), 1.0)),
        shape.visual_radius(),
    )
}

fn shader_lab_material_chip(
    ui: &mut UiDocument,
    parent: UiNodeId,
    name: &'static str,
    label: &'static str,
    material: ElementMaterial,
    visual: UiVisual,
) {
    let chip = ui.add_child(
        parent,
        UiNode::container(
            name,
            LayoutStyle::row()
                .with_width(156.0)
                .with_height(44.0)
                .with_padding(8.0)
                .with_align_items(taffy::prelude::AlignItems::Center)
                .with_justify_content(taffy::prelude::JustifyContent::Center)
                .with_flex_shrink(0.0),
        )
        .with_visual(visual)
        .with_material(material)
        .with_accessibility(
            AccessibilityMeta::new(AccessibilityRole::Image).label(format!("{label} material")),
        ),
    );
    widgets::label(
        ui,
        chip,
        format!("{name}.text"),
        label,
        text(11.0, color(246, 249, 252)),
        LayoutStyle::new().with_flex_shrink(0.0),
    );
}

fn shader_lab_option_checkbox(
    ui: &mut UiDocument,
    parent: UiNodeId,
    name: &'static str,
    label: &'static str,
    checked: bool,
) {
    let mut options = widgets::CheckboxOptions::default()
        .with_action(name)
        .with_text_style(text(12.0, color(220, 228, 238)));
    options.layout = LayoutStyle::new()
        .with_width(112.0)
        .with_height(24.0)
        .with_flex_shrink(0.0);
    widgets::checkbox(ui, parent, name, label, checked, options);
}

fn shader_lab_slider_control(
    ui: &mut UiDocument,
    parent: UiNodeId,
    name: &'static str,
    label: &'static str,
    value: f32,
    max: f32,
    decimals: usize,
) {
    let control = ui.add_child(
        parent,
        UiNode::container(
            format!("{name}.control"),
            Layout::row()
                .size(LayoutSize::new(
                    LayoutDimension::points(214.0),
                    LayoutDimension::Auto,
                ))
                .align_items(LayoutAlignment::Center)
                .gap(LayoutGap::points(6.0, 6.0))
                .flex(0.0, 0.0, LayoutDimension::Auto)
                .to_layout_style(),
        ),
    );
    widgets::label(
        ui,
        control,
        format!("{name}.label"),
        label,
        text(12.0, color(166, 176, 190)),
        LayoutStyle::new()
            .with_width(46.0)
            .with_height(22.0)
            .with_flex_shrink(0.0),
    );
    let mut options = widgets::SliderOptions::default()
        .with_layout(
            LayoutStyle::new()
                .with_width(96.0)
                .with_height(22.0)
                .with_flex_shrink(0.0),
        )
        .with_value_edit_action(name);
    options.accessibility_label = Some(format!("Shader lab {label}"));
    widgets::slider(
        ui,
        control,
        format!("{name}.slider"),
        (value / max.max(f32::EPSILON)).clamp(0.0, 1.0),
        0.0..1.0,
        options,
    );
    widgets::label(
        ui,
        control,
        format!("{name}.value"),
        format!("{value:.decimals$}px"),
        text(12.0, color(226, 232, 242)),
        LayoutStyle::new()
            .with_width(48.0)
            .with_height(22.0)
            .with_flex_shrink(0.0),
    );
}

fn shader_lab_surface_stroke(state: &ShowcaseState) -> Option<StrokeStyle> {
    (state.shader_lab_surface_stroke_width > f32::EPSILON).then(|| {
        StrokeStyle::new(
            color(150, 180, 235),
            state
                .shader_lab_surface_stroke_width
                .clamp(0.0, SHADER_LAB_SURFACE_STROKE_MAX),
        )
    })
}

fn shader_lab_surface_radius(state: &ShowcaseState) -> f32 {
    state
        .shader_lab_surface_radius
        .clamp(0.0, SHADER_LAB_SURFACE_RADIUS_MAX)
}

fn shader_lab_editor_column(
    ui: &mut UiDocument,
    parent: UiNodeId,
    state: &ShowcaseState,
    source_error: Option<&str>,
) {
    let editor_column = ui.add_child(
        parent,
        UiNode::container(
            "shader_lab.editor.column",
            LayoutStyle::column()
                .with_width_percent(1.0)
                .with_height_percent(1.0)
                .with_gap(8.0)
                .with_flex_shrink(1.0),
        ),
    );
    let preset_row = row(ui, editor_column, "shader_lab.preset.row", 8.0);
    widgets::label(
        ui,
        preset_row,
        "shader_lab.preset.caption",
        "Program",
        text(12.0, color(166, 176, 190)),
        LayoutStyle::new()
            .with_width(62.0)
            .with_height(30.0)
            .with_flex_shrink(0.0),
    );
    shader_lab_dropdown_select(
        ui,
        preset_row,
        "shader_lab.preset",
        &shader_lab_preset_options(),
        &state.shader_lab_preset_menu,
        180.0,
        "WGSL preset",
        "Shader lab WGSL preset",
    );

    let editor_frame = ui.add_child(
        editor_column,
        UiNode::container(
            "shader_lab.editor.frame",
            Layout::column()
                .size(LayoutSize::new(
                    LayoutDimension::percent(1.0),
                    LayoutDimension::points(0.0),
                ))
                .min_size(LayoutSize::points(0.0, SHADER_LAB_EDITOR_HEIGHT))
                .flex(1.0, 1.0, LayoutDimension::points(0.0))
                .to_layout_style(),
        )
        .with_visual(UiVisual::panel(
            color(18, 22, 28),
            Some(StrokeStyle::new(color(72, 84, 104), 1.0)),
            4.0,
        )),
    );
    let editor_scroll = widgets::scroll_area(
        ui,
        editor_frame,
        "shader_lab.editor.scroll",
        ScrollAxes::BOTH,
        LayoutStyle::column()
            .with_width_percent(1.0)
            .with_height_percent(1.0),
    );
    ui.node_mut(editor_scroll)
        .set_action("shader_lab.editor.scroll");
    if let Some(scroll) = ui.node_mut(editor_scroll).scroll_mut() {
        scroll.set_offset(state.shader_lab_editor_scroll);
    }

    let mut code_options = state.text_edit_options(FocusedTextInput::ShaderLabSource);
    code_options.edit_action = Some("shader_lab.editor.edit".into());
    code_options.visual = UiVisual::TRANSPARENT;
    code_options.focused_visual = Some(UiVisual::TRANSPARENT);
    code_options.disabled_visual = Some(UiVisual::TRANSPARENT);
    widgets::code_editor(
        ui,
        editor_scroll,
        "shader_lab.editor",
        &state.shader_lab_source,
        code_options,
    );
    let (validation_text, validation_color) = shader_lab_validation_label(source_error);
    widgets::label(
        ui,
        editor_column,
        "shader_lab.validation",
        validation_text,
        text(11.0, validation_color),
        LayoutStyle::new().with_width_percent(1.0),
    );
}

fn shader_lab_editor_content_size(source: &str) -> UiSize {
    let style = widgets::code_text_style();
    let line_count = source.lines().count().max(1) as f32;
    let longest_line = source
        .lines()
        .map(|line| line.chars().count())
        .max()
        .unwrap_or(0)
        .max(48) as f32;
    UiSize::new(
        (longest_line * style.font_size * 0.56 + 24.0).max(SHADER_LAB_EDITOR_WIDTH),
        (line_count * style.line_height + 18.0).max(SHADER_LAB_EDITOR_HEIGHT),
    )
}

fn shader_lab_preview(
    ui: &mut UiDocument,
    parent: UiNodeId,
    state: &ShowcaseState,
    source_valid: bool,
) {
    match state.shader_lab_target {
        ShaderLabTarget::Canvas => {
            let mut options = widgets::CanvasOptions::default()
                .with_layout(
                    LayoutStyle::new()
                        .with_width_percent(1.0)
                        .with_height_percent(1.0)
                        .with_flex_grow(1.0),
                )
                .with_intrinsic_size(UiSize::new(
                    SHADER_LAB_PREVIEW_WIDTH - 20.0,
                    SHADER_LAB_PREVIEW_HEIGHT,
                ))
                .with_accessibility_label("Shader lab canvas preview");
            options.visual = UiVisual::panel(color(8, 12, 18), None, 4.0);
            widgets::canvas(
                ui,
                parent,
                "shader_lab.preview.canvas",
                CanvasContent::new("shader_lab.preview.canvas")
                    .program(shader_lab_canvas_program(state, source_valid)),
                options,
            );
        }
        ShaderLabTarget::Frame => {
            let mut frame_node = UiNode::container(
                "shader_lab.preview.frame",
                operad::layout::with_min_size(
                    LayoutStyle::column()
                        .with_width_percent(0.82)
                        .with_height_percent(0.62)
                        .with_padding(14.0)
                        .with_align_items(taffy::prelude::AlignItems::Center)
                        .with_justify_content(taffy::prelude::JustifyContent::Center)
                        .with_flex_shrink(0.0),
                    operad::layout::px(SHADER_LAB_FRAME_MIN_WIDTH),
                    operad::layout::px(SHADER_LAB_FRAME_MIN_HEIGHT),
                ),
            )
            .with_visual(UiVisual::panel(
                ColorRgba::new(0, 0, 0, 0),
                shader_lab_surface_stroke(state),
                shader_lab_surface_radius(state),
            ));
            frame_node.style_mut().set_clip(ClipBehavior::Clip);
            let frame = ui.add_child(parent, frame_node);
            shader_lab_canvas_layer_fill(
                ui,
                frame,
                "shader_lab.preview.frame.shader",
                state,
                source_valid,
            );
            if state.shader_lab_show_frame_text {
                let label = widgets::label(
                    ui,
                    frame,
                    "shader_lab.preview.frame.label",
                    "WGSL frame",
                    text(14.0, color(246, 249, 252)),
                    LayoutStyle::new().with_flex_shrink(0.0),
                );
                ui.node_mut(label).style_mut().set_z_index(1);
            }
        }
        ShaderLabTarget::Button => {
            let mut shell_node = UiNode::container(
                "shader_lab.preview.button.shell",
                LayoutStyle::column()
                    .with_width(SHADER_LAB_BUTTON_WIDTH)
                    .with_height(SHADER_LAB_BUTTON_HEIGHT)
                    .with_align_items(taffy::prelude::AlignItems::Center)
                    .with_justify_content(taffy::prelude::JustifyContent::Center),
            )
            .with_visual(UiVisual::TRANSPARENT);
            shell_node.style_mut().set_clip(ClipBehavior::Clip);
            let shell = ui.add_child(parent, shell_node);
            shader_lab_canvas_layer_fill(
                ui,
                shell,
                "shader_lab.preview.button.shader",
                state,
                source_valid,
            );
            let mut options = widgets::ButtonOptions::new(
                LayoutStyle::new()
                    .with_width(SHADER_LAB_BUTTON_WIDTH)
                    .with_height(SHADER_LAB_BUTTON_HEIGHT),
            )
            .with_action("shader_lab.preview.button")
            .with_accessibility_label("Shader button preview");
            options.visual = UiVisual::panel(
                ColorRgba::new(0, 0, 0, 0),
                shader_lab_surface_stroke(state),
                shader_lab_surface_radius(state),
            );
            options.hovered_visual = Some(UiVisual::panel(
                ColorRgba::new(255, 255, 255, 28),
                shader_lab_surface_stroke(state),
                shader_lab_surface_radius(state),
            ));
            options.pressed_visual = Some(UiVisual::panel(
                ColorRgba::new(0, 0, 0, 48),
                shader_lab_surface_stroke(state),
                shader_lab_surface_radius(state),
            ));
            options.text_style = text(14.0, color(246, 249, 252));
            let button = widgets::button(
                ui,
                shell,
                "shader_lab.preview.button",
                if state.shader_lab_show_button_text {
                    "Shader button"
                } else {
                    ""
                },
                options,
            );
            ui.node_mut(button).style_mut().set_z_index(1);
        }
    }
}

fn shader_lab_canvas_layer_fill(
    ui: &mut UiDocument,
    parent: UiNodeId,
    name: &'static str,
    state: &ShowcaseState,
    source_valid: bool,
) -> UiNodeId {
    let layout = operad::layout::with_absolute_position(
        LayoutStyle::new()
            .with_width_percent(1.0)
            .with_height_percent(1.0),
        0.0,
        0.0,
    );
    let mut options = widgets::CanvasOptions::default()
        .with_layout(layout)
        .with_intrinsic_size(UiSize::new(
            SHADER_LAB_PREVIEW_WIDTH,
            SHADER_LAB_PREVIEW_HEIGHT,
        ))
        .with_accessibility_label(format!("{name} shader preview"));
    options.input = InputBehavior::NONE;
    options.visual = UiVisual::TRANSPARENT;
    let canvas = widgets::canvas(
        ui,
        parent,
        name,
        CanvasContent::new(name).program(shader_lab_canvas_program(state, source_valid)),
        options,
    );
    ui.node_mut(canvas).style_mut().set_z_index(0);
    canvas
}

fn shader_lab_status_label(state: &ShowcaseState, source_error: Option<&str>) -> Option<String> {
    if source_error.is_some() {
        Some(format!(
            "{} fallback until WGSL validates",
            state.shader_lab_target.label()
        ))
    } else {
        None
    }
}

fn shader_lab_validation_label(source_error: Option<&str>) -> (String, ColorRgba) {
    if let Some(error) = source_error {
        (
            format!("WGSL error: {}", compact_shader_error(error, 160)),
            color(255, 139, 128),
        )
    } else {
        ("WGSL valid".to_string(), color(112, 221, 160))
    }
}

fn compact_shader_error(error: &str, max_chars: usize) -> String {
    let mut compact = error.split_whitespace().collect::<Vec<_>>().join(" ");
    if compact.chars().count() > max_chars {
        compact = compact.chars().take(max_chars.saturating_sub(3)).collect();
        compact.push_str("...");
    }
    compact
}

fn shader_lab_canvas_program(state: &ShowcaseState, source_valid: bool) -> CanvasRenderProgram {
    let source = if source_valid {
        state.shader_lab_source.text().to_string()
    } else {
        SHADER_LAB_ERROR_WGSL.to_string()
    };
    CanvasRenderProgram::wgsl(source)
        .label("showcase.shader_lab.canvas")
        .constant("TIME", state.progress_phase as f64)
        .clear_color(Some(color(8, 12, 18)))
}

fn shader_lab_source_error(source: &str) -> Option<String> {
    if !shader_lab_source_has_entry_points(source) {
        return Some("source must define @vertex fn vs_main and @fragment fn fs_main".to_string());
    }

    shader_lab_compile_error(source)
}

#[cfg(feature = "wgpu")]
fn shader_lab_compile_error(source: &str) -> Option<String> {
    let module = match naga::front::wgsl::parse_str(source) {
        Ok(module) => module,
        Err(error) => return Some(error.emit_to_string(source)),
    };
    let mut validator = naga::valid::Validator::new(
        naga::valid::ValidationFlags::all(),
        naga::valid::Capabilities::empty(),
    );
    validator
        .validate(&module)
        .err()
        .map(|error| error.to_string())
}

#[cfg(not(feature = "wgpu"))]
fn shader_lab_compile_error(_source: &str) -> Option<String> {
    None
}

fn shader_lab_source_has_entry_points(source: &str) -> bool {
    source.contains("@vertex")
        && source.contains("fn vs_main")
        && source.contains("@fragment")
        && source.contains("fn fs_main")
}

fn timeline_ruler(ui: &mut UiDocument, parent: UiNodeId, state: &ShowcaseState) {
    let body =
        section_with_min_viewport(ui, parent, "timeline", "Timeline", UiSize::new(560.0, 0.0));
    widgets::label(
        ui,
        body,
        "timeline.label",
        "Clip timeline",
        text(12.0, color(166, 176, 190)),
        LayoutStyle::new().with_width_percent(1.0),
    );
    widgets::label(
        ui,
        body,
        "timeline.description",
        "The ruler maps time to tracks, clips, markers, and the current playhead.",
        text(12.0, color(196, 210, 230)),
        LayoutStyle::new().with_width_percent(1.0),
    );

    let editor = row(ui, body, "timeline.editor", 0.0);
    let labels = ui.add_child(
        editor,
        UiNode::container(
            "timeline.lane_labels",
            LayoutStyle::column()
                .with_width(96.0)
                .with_height(172.0)
                .with_flex_shrink(0.0),
        ),
    );
    for (name, label, height) in [
        ("timeline.lane_labels.header", "Tracks", 40.0),
        ("timeline.lane_labels.video", "Video", 44.0),
        ("timeline.lane_labels.audio", "Audio", 44.0),
        ("timeline.lane_labels.notes", "Notes", 44.0),
    ] {
        widgets::label(
            ui,
            labels,
            name,
            label,
            text(11.0, color(166, 176, 190)),
            LayoutStyle::new()
                .with_width_percent(1.0)
                .with_height(height)
                .with_flex_shrink(0.0),
        );
    }

    let timeline_scroll = timeline_scroll_state_for_view(
        state.timeline_scroll,
        state.timeline_scroll.viewport_size().width,
    );
    let range = ext_widgets::TimelineRange::new(0.0, 48.0);
    let nodes = scroll_area_widgets::scroll_container_shell(
        ui,
        editor,
        "timeline",
        timeline_scroll,
        widgets::ScrollContainerOptions::default()
            .with_axes(ScrollAxes::HORIZONTAL)
            .with_action_prefix("timeline")
            .with_gap(4.0)
            .with_scrollbar_thickness(TIMELINE_SCROLLBAR_HEIGHT)
            .with_layout(
                LayoutStyle::column()
                    .with_width(0.0)
                    .with_flex_grow(1.0)
                    .with_height(TIMELINE_SCROLL_CONTAINER_HEIGHT)
                    .with_flex_shrink(0.0),
            )
            .with_viewport_layout(
                LayoutStyle::column()
                    .with_width(0.0)
                    .with_flex_grow(1.0)
                    .with_height(TIMELINE_VIEWPORT_HEIGHT)
                    .with_flex_shrink(1.0),
            )
            .with_horizontal_scrollbar(
                scrollbar_widgets::ScrollbarOptions::default()
                    .with_action("timeline.horizontal-scrollbar"),
            )
            .with_accessibility_label("Timeline horizontal scroller"),
    );
    let content = ui.add_child(
        nodes.viewport,
        UiNode::container(
            "timeline.content",
            LayoutStyle::column()
                .with_width(TIMELINE_CONTENT_WIDTH)
                .with_height(TIMELINE_VIEWPORT_HEIGHT)
                .with_flex_shrink(0.0),
        ),
    );
    let mut ruler_options = ext_widgets::TimelineRulerOptions::default();
    ruler_options.height = 40.0;
    ruler_options.layout = LayoutStyle::new()
        .with_width(TIMELINE_CONTENT_WIDTH)
        .with_height(40.0)
        .with_flex_shrink(0.0);
    ruler_options.accessibility_label = Some("Editing timeline ruler".to_string());
    ruler_options.accessibility_hint =
        Some("Shows seconds for the visible timeline clips".to_string());
    ext_widgets::timeline_ruler(
        ui,
        content,
        "timeline.ruler",
        ext_widgets::RulerSpec {
            range,
            width: TIMELINE_CONTENT_WIDTH,
            major_step: 4.0,
            minor_step: 1.0,
            label_every: 1,
        },
        ruler_options,
    );
    ui.add_child(
        content,
        UiNode::scene(
            "timeline.tracks",
            timeline_track_primitives(range, TIMELINE_CONTENT_WIDTH),
            LayoutStyle::new()
                .with_width(TIMELINE_CONTENT_WIDTH)
                .with_height(132.0)
                .with_flex_shrink(0.0),
        ),
    );
}

fn timeline_track_primitives(range: ext_widgets::TimelineRange, width: f32) -> Vec<ScenePrimitive> {
    let mut primitives = Vec::new();
    let lane_height = 36.0;
    let lane_gap = 8.0;
    let lanes = [
        ("Video", 0.0, color(16, 22, 30)),
        ("Audio", lane_height + lane_gap, color(13, 20, 27)),
        ("Notes", (lane_height + lane_gap) * 2.0, color(16, 22, 30)),
    ];

    for (label, y, fill) in lanes {
        primitives.push(ScenePrimitive::Rect(
            PaintRect::solid(UiRect::new(0.0, y, width, lane_height), fill)
                .stroke(AlignedStroke::inside(StrokeStyle::new(
                    color(38, 49, 64),
                    1.0,
                )))
                .corner_radii(CornerRadii::uniform(2.0)),
        ));
        primitives.push(ScenePrimitive::Text(
            PaintText::new(
                label,
                UiRect::new(8.0, y + 8.0, 72.0, 18.0),
                text(10.0, color(116, 128, 145)),
            )
            .multiline(false),
        ));
    }

    for second in (0..=48).step_by(4) {
        let x = range.value_to_x(second as f64, width);
        primitives.push(ScenePrimitive::Line {
            from: UiPoint::new(x, 0.0),
            to: UiPoint::new(x, 124.0),
            stroke: StrokeStyle::new(color(34, 44, 58), 1.0),
        });
    }

    push_timeline_clip(
        &mut primitives,
        range,
        width,
        "Intro",
        2.0,
        10.0,
        0.0,
        color(57, 126, 207),
    );
    push_timeline_clip(
        &mut primitives,
        range,
        width,
        "Cutaway",
        12.0,
        24.0,
        0.0,
        color(95, 107, 212),
    );
    push_timeline_clip(
        &mut primitives,
        range,
        width,
        "Final",
        28.0,
        44.0,
        0.0,
        color(68, 153, 122),
    );
    push_timeline_clip(
        &mut primitives,
        range,
        width,
        "Music bed",
        0.0,
        48.0,
        lane_height + lane_gap,
        color(205, 160, 71),
    );
    push_timeline_clip(
        &mut primitives,
        range,
        width,
        "Voiceover",
        8.0,
        18.0,
        lane_height + lane_gap,
        color(183, 107, 185),
    );

    for (second, label) in [(6.0, "Beat"), (21.0, "Cut"), (37.0, "Cue")] {
        let x = range.value_to_x(second, width);
        let y = (lane_height + lane_gap) * 2.0 + 8.0;
        primitives.push(ScenePrimitive::Polygon {
            points: vec![
                UiPoint::new(x, y),
                UiPoint::new(x + 8.0, y + 8.0),
                UiPoint::new(x, y + 16.0),
                UiPoint::new(x - 8.0, y + 8.0),
            ],
            fill: color(245, 198, 83),
            stroke: Some(StrokeStyle::new(color(255, 234, 178), 1.0)),
        });
        primitives.push(ScenePrimitive::Text(
            PaintText::new(
                label,
                UiRect::new(x + 12.0, y - 1.0, 72.0, 18.0),
                text(10.0, color(225, 233, 244)),
            )
            .multiline(false),
        ));
    }

    let playhead_x = range.value_to_x(18.5, width);
    primitives.push(ScenePrimitive::Line {
        from: UiPoint::new(playhead_x, 0.0),
        to: UiPoint::new(playhead_x, 124.0),
        stroke: StrokeStyle::new(ColorRgba::new(255, 120, 96, 255), 2.0),
    });
    primitives.push(ScenePrimitive::Text(
        PaintText::new(
            "Playhead 18.5s",
            UiRect::new(playhead_x + 8.0, 106.0, 120.0, 18.0),
            text(10.0, ColorRgba::new(255, 172, 154, 255)),
        )
        .multiline(false),
    ));

    primitives
}

#[allow(clippy::too_many_arguments)]
fn push_timeline_clip(
    primitives: &mut Vec<ScenePrimitive>,
    range: ext_widgets::TimelineRange,
    width: f32,
    label: &'static str,
    start: f64,
    end: f64,
    lane_y: f32,
    fill: ColorRgba,
) {
    let x = range.value_to_x(start, width);
    let right = range.value_to_x(end, width);
    let rect = UiRect::new(x, lane_y + 6.0, (right - x).max(1.0), 24.0);
    primitives.push(ScenePrimitive::Rect(
        PaintRect::solid(rect, fill)
            .stroke(AlignedStroke::inside(StrokeStyle::new(
                ColorRgba::new(230, 240, 255, 96),
                1.0,
            )))
            .corner_radii(CornerRadii::uniform(4.0)),
    ));
    primitives.push(ScenePrimitive::Text(
        PaintText::new(label, rect, text(10.0, color(245, 248, 252)))
            .horizontal_align(TextHorizontalAlign::Center)
            .vertical_align(TextVerticalAlign::Center)
            .multiline(false),
    ));
}

fn theme_demo_widgets(ui: &mut UiDocument, parent: UiNodeId, state: &ShowcaseState, theme: &Theme) {
    let body = section(ui, parent, "theme", "Theme");
    widgets::label(
        ui,
        body,
        "theme.current",
        format!("Current theme: {}", theme.name),
        themed_text(theme, 14.0),
        LayoutStyle::new().with_width_percent(1.0),
    );

    let choices = wrapping_row(ui, body, "theme.choices", 8.0);
    for choice in [
        ShowcaseThemeChoice::Light,
        ShowcaseThemeChoice::Dark,
        ShowcaseThemeChoice::Bubblegum,
    ] {
        theme_choice_button(
            ui,
            choices,
            choice,
            state.showcase_theme == choice,
            choice.theme(),
        );
    }

    let swatches = wrapping_row(ui, body, "theme.swatches", 8.0);
    theme_swatch(
        ui,
        swatches,
        "theme.swatch.canvas",
        "Canvas",
        theme.colors.canvas,
        theme,
    );
    theme_swatch(
        ui,
        swatches,
        "theme.swatch.surface",
        "Surface",
        theme.colors.surface,
        theme,
    );
    theme_swatch(
        ui,
        swatches,
        "theme.swatch.accent",
        "Accent",
        theme.colors.accent,
        theme,
    );
    theme_swatch(
        ui,
        swatches,
        "theme.swatch.selected",
        "Selected",
        theme.colors.selected,
        theme,
    );

    let preview = ui.add_child(
        body,
        UiNode::container(
            "theme.preview",
            LayoutStyle::column()
                .with_width_percent(1.0)
                .with_padding(12.0)
                .with_gap(10.0)
                .with_flex_shrink(0.0),
        )
        .with_visual(UiVisual::panel(
            theme.colors.surface,
            Some(theme.stroke.surface),
            theme.radius.md,
        ))
        .with_accessibility(
            AccessibilityMeta::new(AccessibilityRole::Group).label("Theme preview"),
        ),
    );
    widgets::label(
        ui,
        preview,
        "theme.preview.title",
        "Preview controls",
        themed_text(theme, 13.0),
        LayoutStyle::new().with_width_percent(1.0),
    );
    let preview_row = row(ui, preview, "theme.preview.controls", 8.0);
    let mut primary = themed_button_options(
        theme,
        "theme.preview.primary",
        ComponentState::ACTIVE,
        LayoutStyle::new().with_height(34.0),
    );
    primary.accessibility_label = Some("Primary preview button".to_owned());
    widgets::button(ui, preview_row, "theme.preview.primary", "Primary", primary);
    let mut secondary = themed_button_options(
        theme,
        "theme.preview.secondary",
        ComponentState::NORMAL,
        LayoutStyle::new().with_height(34.0),
    );
    secondary.accessibility_label = Some("Secondary preview button".to_owned());
    widgets::button(
        ui,
        preview_row,
        "theme.preview.secondary",
        "Secondary",
        secondary,
    );
    let mut help = themed_muted_text(theme, 12.0);
    help.wrap = TextWrap::WordOrGlyph;
    widgets::label(
        ui,
        preview,
        "theme.preview.copy",
        "The selected theme drives the app background, right panel, floating windows, and this preview.",
        help,
        LayoutStyle::new().with_width_percent(1.0),
    );
}

fn theme_choice_button(
    ui: &mut UiDocument,
    parent: UiNodeId,
    choice: ShowcaseThemeChoice,
    selected: bool,
    preview_theme: Theme,
) {
    let mut options = themed_button_options(
        &preview_theme,
        choice.action(),
        if selected {
            ComponentState::SELECTED
        } else {
            ComponentState::NORMAL
        },
        LayoutStyle::new()
            .with_width(116.0)
            .with_height(34.0)
            .with_flex_shrink(0.0),
    )
    .with_action(choice.action());
    options.accessibility_label = Some(format!("Use {} theme", choice.label()));
    widgets::button(
        ui,
        parent,
        format!("theme.choice.{}", choice.label().to_ascii_lowercase()),
        choice.label(),
        options,
    );
}

fn theme_swatch(
    ui: &mut UiDocument,
    parent: UiNodeId,
    name: &'static str,
    label: &'static str,
    swatch_color: ColorRgba,
    theme: &Theme,
) {
    let tile = ui.add_child(
        parent,
        UiNode::container(
            name,
            LayoutStyle::column()
                .with_width(92.0)
                .with_height(76.0)
                .with_padding(8.0)
                .with_gap(6.0)
                .with_flex_shrink(0.0),
        )
        .with_visual(UiVisual::panel(
            theme.colors.surface_muted,
            Some(theme.stroke.surface),
            4.0,
        ))
        .with_accessibility(AccessibilityMeta::new(AccessibilityRole::Group).label(label)),
    );
    ui.add_child(
        tile,
        UiNode::container(
            format!("{name}.color"),
            LayoutStyle::new()
                .with_width_percent(1.0)
                .with_height(26.0)
                .with_flex_shrink(0.0),
        )
        .with_visual(UiVisual::panel(
            swatch_color,
            Some(StrokeStyle::new(theme.colors.border_strong, 1.0)),
            4.0,
        )),
    );
    widgets::label(
        ui,
        tile,
        format!("{name}.label"),
        label,
        themed_muted_text(theme, 11.0),
        LayoutStyle::new().with_width_percent(1.0),
    );
}

fn themed_button_options(
    theme: &Theme,
    action: impl Into<String>,
    state: ComponentState,
    layout: LayoutStyle,
) -> widgets::ButtonOptions {
    let mut options = widgets::ButtonOptions::new(layout).with_action(action.into());
    options.visual = theme.resolve_visual(ComponentRole::Button, state);
    options.hovered_visual =
        Some(theme.resolve_visual(ComponentRole::Button, ComponentState::HOVERED));
    options.pressed_visual =
        Some(theme.resolve_visual(ComponentRole::Button, ComponentState::PRESSED));
    options.pressed_hovered_visual =
        Some(theme.resolve_visual(ComponentRole::Button, ComponentState::PRESSED));
    options.focused_visual =
        Some(theme.resolve_visual(ComponentRole::Button, ComponentState::FOCUSED));
    options.disabled_visual =
        Some(theme.resolve_visual(ComponentRole::Button, ComponentState::DISABLED));
    options.text_style = theme.resolve_text(ComponentRole::Button, state);
    options
}

fn styling_widgets(ui: &mut UiDocument, parent: UiNodeId, state: &ShowcaseState) {
    let preview_scene_size = style_preview_scene_size(state.styling);
    let preview_min_width = preview_scene_size.width + 16.0;
    let preview_min_height = preview_scene_size.height + 16.0;
    let body_min_width = STYLING_CONTROLS_WIDTH + 1.0 + preview_min_width + 20.0;
    let body = section_with_min_viewport(
        ui,
        parent,
        "styling",
        "Styling",
        UiSize::new(body_min_width, preview_min_height),
    );
    let grid_layout = operad::layout::with_grid_template_columns(
        Layout::grid()
            .size(LayoutSize::percent(1.0, 1.0))
            .gap(LayoutGap::points(10.0, 10.0))
            .to_layout_style(),
        [
            LayoutGridTrack::points(STYLING_CONTROLS_WIDTH),
            LayoutGridTrack::points(1.0),
            LayoutGridTrack::minmax_points_fraction(preview_min_width, 1.0),
        ],
    );
    let grid = ui.add_child(body, UiNode::container("styling.grid", grid_layout));
    let controls = ui.add_child(
        grid,
        UiNode::container(
            "styling.controls",
            LayoutStyle::column()
                .with_width(STYLING_CONTROLS_WIDTH)
                .with_height_percent(1.0)
                .with_flex_shrink(0.0)
                .gap(6.0),
        ),
    );
    style_edge_group(
        ui,
        controls,
        "styling.inner",
        "Inner margin",
        "styling.inner_same",
        state.styling.inner_same,
        [
            ("Left", "styling.inner", state.styling.inner_margin),
            ("Right", "styling.inner_right", state.styling.inner_right),
            ("Top", "styling.inner_top", state.styling.inner_top),
            ("Bottom", "styling.inner_bottom", state.styling.inner_bottom),
        ],
        0.0..32.0,
    );
    style_edge_group(
        ui,
        controls,
        "styling.outer",
        "Outer margin",
        "styling.outer_same",
        state.styling.outer_same,
        [
            ("Left", "styling.outer", state.styling.outer_margin),
            ("Right", "styling.outer_right", state.styling.outer_right),
            ("Top", "styling.outer_top", state.styling.outer_top),
            ("Bottom", "styling.outer_bottom", state.styling.outer_bottom),
        ],
        0.0..40.0,
    );
    style_edge_group(
        ui,
        controls,
        "styling.radius",
        "Corner radius",
        "styling.radius_same",
        state.styling.radius_same,
        [
            ("NW", "styling.radius", state.styling.corner_radius),
            ("NE", "styling.radius_ne", state.styling.corner_ne),
            ("SW", "styling.radius_sw", state.styling.corner_sw),
            ("SE", "styling.radius_se", state.styling.corner_se),
        ],
        0.0..28.0,
    );
    style_fill_group(ui, controls, state);
    style_stroke_group(ui, controls, state);
    style_shadow_group(ui, controls, state);
    widgets::separator(
        ui,
        grid,
        "styling.preview.separator",
        widgets::SeparatorOptions::vertical().with_layout(
            LayoutStyle::new()
                .with_width(1.0)
                .with_height_percent(1.0)
                .with_flex_shrink(0.0),
        ),
    );

    let preview = ui.add_child(
        grid,
        UiNode::container(
            "styling.preview",
            operad::layout::with_min_size(
                LayoutStyle::column()
                    .with_width_percent(1.0)
                    .with_height_percent(1.0)
                    .with_flex_shrink(0.0)
                    .padding(8.0),
                operad::layout::px(preview_min_width),
                operad::layout::px(preview_min_height),
            ),
        )
        .with_visual(UiVisual::panel(color(17, 20, 25), None, 0.0)),
    );
    style_preview(ui, preview, state.styling);
}

#[allow(clippy::too_many_arguments)]
fn style_edge_group(
    ui: &mut UiDocument,
    parent: UiNodeId,
    name: &'static str,
    title: &'static str,
    same_action: &'static str,
    same: bool,
    values: [(&'static str, &'static str, f32); 4],
    range: std::ops::Range<f32>,
) {
    let group = style_control_group(ui, parent, format!("{name}.group"));
    style_group_title(ui, group, format!("{name}.title"), title);
    let fields = ui.add_child(
        group,
        UiNode::container(
            format!("{name}.fields"),
            LayoutStyle::column()
                .with_width(138.0)
                .with_flex_shrink(0.0)
                .gap(3.0),
        ),
    );
    style_compact_checkbox(ui, fields, same_action, "same", same);
    if same {
        style_number_row(ui, fields, values[0].1, "All", values[0].2, range, 0);
    } else {
        for (label, action, value) in values {
            style_number_row(ui, fields, action, label, value, range.clone(), 0);
        }
    }
}

fn style_fill_group(ui: &mut UiDocument, parent: UiNodeId, state: &ShowcaseState) {
    let group = style_control_group(ui, parent, "styling.fill.group");
    style_group_title(ui, group, "styling.fill.title", "Fill");
    let fields = style_group_fields(
        ui,
        group,
        "styling.fill.fields",
        STYLING_WIDE_FIELDS_WIDTH,
        4.0,
    );
    style_color_button_row(
        ui,
        fields,
        "styling.fill_color_button",
        "",
        state.styling.fill_color(),
        "Pick fill color",
    );
    if state.styling_fill_picker_open {
        ext_widgets::color_picker(
            ui,
            fields,
            "styling.fill_picker",
            &state.styling_fill_picker,
            ext_widgets::ColorPickerOptions::default()
                .with_label("Fill")
                .with_action_prefix("styling.fill_picker"),
        );
    }
}

fn style_stroke_group(ui: &mut UiDocument, parent: UiNodeId, state: &ShowcaseState) {
    let group = style_control_group(ui, parent, "styling.stroke.group");
    style_group_title(ui, group, "styling.stroke.title", "Stroke");
    let fields = style_group_fields(
        ui,
        group,
        "styling.stroke.fields",
        STYLING_WIDE_FIELDS_WIDTH,
        4.0,
    );
    let width_row = row(ui, fields, "styling.stroke.row", 6.0);
    style_inline_number(
        ui,
        width_row,
        "styling.stroke",
        "width",
        state.styling.stroke_width,
        0.0..STYLING_STROKE_MAX,
        1,
    );
    let mut options = widgets::SliderOptions::default()
        .with_layout(
            LayoutStyle::new()
                .with_width(60.0)
                .with_height(20.0)
                .with_flex_shrink(0.0),
        )
        .with_value_edit_action("styling.stroke");
    options.fill_color = color(120, 170, 230);
    widgets::slider(
        ui,
        width_row,
        "styling.stroke.slider",
        (state.styling.stroke_width / STYLING_STROKE_MAX).clamp(0.0, 1.0),
        0.0..1.0,
        options,
    );
    style_color_button_row(
        ui,
        fields,
        "styling.stroke_color_button",
        "",
        state.styling.stroke_color(),
        "Pick stroke color",
    );
    if state.styling_stroke_picker_open {
        ext_widgets::color_picker(
            ui,
            fields,
            "styling.stroke_picker",
            &state.styling_stroke_picker,
            ext_widgets::ColorPickerOptions::default()
                .with_label("Stroke color")
                .with_action_prefix("styling.stroke_picker"),
        );
    }
}

fn style_shadow_group(ui: &mut UiDocument, parent: UiNodeId, state: &ShowcaseState) {
    let group = style_control_group(ui, parent, "styling.shadow.group");
    style_group_title(ui, group, "styling.shadow.title", "Shadow");
    let fields = style_group_fields(
        ui,
        group,
        "styling.shadow.fields",
        STYLING_WIDE_FIELDS_WIDTH,
        4.0,
    );
    let offsets = row(ui, fields, "styling.shadow.offsets", 6.0);
    style_inline_number(
        ui,
        offsets,
        "styling.shadow_x",
        "x",
        state.styling.shadow_x,
        -24.0..24.0,
        0,
    );
    style_inline_number(
        ui,
        offsets,
        "styling.shadow_y",
        "y",
        state.styling.shadow_y,
        -24.0..24.0,
        0,
    );
    let spread = row(ui, fields, "styling.shadow.blur_spread", 6.0);
    style_inline_number(
        ui,
        spread,
        "styling.shadow",
        "blur",
        state.styling.shadow_blur,
        0.0..32.0,
        0,
    );
    style_inline_number(
        ui,
        spread,
        "styling.shadow_spread",
        "spread",
        state.styling.shadow_spread,
        0.0..16.0,
        0,
    );
    style_color_button_row(
        ui,
        fields,
        "styling.shadow_color_button",
        "",
        state.styling.shadow_color(),
        "Pick shadow color",
    );
    if state.styling_shadow_picker_open {
        ext_widgets::color_picker(
            ui,
            fields,
            "styling.shadow_picker",
            &state.styling_shadow_picker,
            ext_widgets::ColorPickerOptions::default()
                .with_label("Shadow color")
                .with_action_prefix("styling.shadow_picker"),
        );
    }
}

fn style_control_group(ui: &mut UiDocument, parent: UiNodeId, name: impl Into<String>) -> UiNodeId {
    ui.add_child(
        parent,
        UiNode::container(
            name,
            LayoutStyle::row()
                .with_width_percent(1.0)
                .with_flex_shrink(0.0)
                .padding(4.0)
                .gap(8.0),
        )
        .with_visual(UiVisual::panel(color(23, 27, 33), None, 2.0)),
    )
}

fn style_group_fields(
    ui: &mut UiDocument,
    parent: UiNodeId,
    name: impl Into<String>,
    width: f32,
    gap: f32,
) -> UiNodeId {
    ui.add_child(
        parent,
        UiNode::container(
            name,
            LayoutStyle::column()
                .with_width(width)
                .with_flex_shrink(0.0)
                .gap(gap),
        ),
    )
}

fn style_group_title(
    ui: &mut UiDocument,
    parent: UiNodeId,
    name: impl Into<String>,
    label: &'static str,
) {
    widgets::label(
        ui,
        parent,
        name,
        label,
        text(12.0, color(166, 176, 190)),
        LayoutStyle::new()
            .with_width(88.0)
            .with_flex_shrink(0.0)
            .with_height(22.0),
    );
}

fn style_color_button_row(
    ui: &mut UiDocument,
    parent: UiNodeId,
    action: &'static str,
    label: &'static str,
    value: ColorRgba,
    accessibility_label: &'static str,
) {
    let row = row(ui, parent, format!("{action}.row"), 8.0);
    if !label.is_empty() {
        widgets::label(
            ui,
            row,
            format!("{action}.label"),
            label,
            text(12.0, color(166, 176, 190)),
            LayoutStyle::new()
                .with_width(86.0)
                .with_flex_shrink(0.0)
                .with_height(24.0),
        );
    }
    ext_widgets::color_edit_button(
        ui,
        row,
        action,
        value,
        color_mini_button_options(action)
            .with_format(ext_widgets::ColorValueFormat::Rgba)
            .accessibility_label(accessibility_label),
    );
    widgets::label(
        ui,
        row,
        format!("{action}.value"),
        ext_widgets::color_picker::format_hex_color(value, value.a < 255),
        text(12.0, color(226, 232, 242)),
        LayoutStyle::new().with_width(96.0).with_height(24.0),
    );
}

fn style_number_row(
    ui: &mut UiDocument,
    parent: UiNodeId,
    name: &'static str,
    label: &'static str,
    value: f32,
    range: std::ops::Range<f32>,
    decimals: u8,
) {
    let row = row(ui, parent, format!("{name}.row"), 6.0);
    widgets::label(
        ui,
        row,
        format!("{name}.label"),
        label,
        text(12.0, color(166, 176, 190)),
        LayoutStyle::new().with_width(48.0).with_height(22.0),
    );
    style_value_input(ui, row, name, value, range, decimals);
}

fn style_inline_number(
    ui: &mut UiDocument,
    parent: UiNodeId,
    name: &'static str,
    label: &'static str,
    value: f32,
    range: std::ops::Range<f32>,
    decimals: u8,
) {
    let row = compact_row(ui, parent, format!("{name}.inline"), 3.0);
    widgets::label(
        ui,
        row,
        format!("{name}.inline_label"),
        format!("{label}:"),
        text(12.0, color(166, 176, 190)),
        LayoutStyle::new()
            .with_width(if label.len() > 1 { 42.0 } else { 16.0 })
            .with_height(22.0),
    );
    style_value_input(ui, row, name, value, range, decimals);
}

fn style_value_input(
    ui: &mut UiDocument,
    parent: UiNodeId,
    name: &'static str,
    value: f32,
    range: std::ops::Range<f32>,
    decimals: u8,
) {
    let mut options = widgets::DragValueOptions::default()
        .with_layout(
            LayoutStyle::row()
                .with_width(STYLING_VALUE_INPUT_WIDTH)
                .with_height(22.0)
                .with_flex_shrink(0.0)
                .with_align_items(taffy::prelude::AlignItems::Center)
                .with_justify_content(taffy::prelude::JustifyContent::Center)
                .with_padding(4.0),
        )
        .with_range(ext_widgets::NumericRange::new(
            f64::from(range.start),
            f64::from(range.end),
        ))
        .with_precision(ext_widgets::NumericPrecision::decimals(decimals))
        .with_action(name);
    options.text_style = text(12.0, color(226, 232, 242));
    widgets::drag_value_input(ui, parent, name, f64::from(value), options);
}

fn style_compact_checkbox(
    ui: &mut UiDocument,
    parent: UiNodeId,
    name: &'static str,
    label: &'static str,
    checked: bool,
) {
    let mut options = widgets::CheckboxOptions::default().with_action(name);
    options.layout = LayoutStyle::new().with_width(92.0).with_height(22.0);
    options.text_style = text(12.0, color(220, 228, 238));
    widgets::checkbox(ui, parent, name, label, checked, options);
}

fn compact_row(
    ui: &mut UiDocument,
    parent: UiNodeId,
    name: impl Into<String>,
    gap: f32,
) -> UiNodeId {
    ui.add_child(
        parent,
        UiNode::container(
            name,
            LayoutStyle::row()
                .with_height(22.0)
                .with_flex_shrink(0.0)
                .with_align_items(taffy::prelude::AlignItems::Center)
                .gap(gap),
        ),
    )
}

fn color_mini_button_options(action: &'static str) -> ext_widgets::ColorButtonOptions {
    ext_widgets::ColorButtonOptions::default()
        .with_layout(LayoutStyle::size(28.0, 24.0).with_flex_shrink(0.0))
        .with_swatch_size(UiSize::new(22.0, 18.0))
        .with_action(action)
        .show_label(false)
}

fn style_preview(ui: &mut UiDocument, parent: UiNodeId, styling: StylingState) {
    let (frame, text_rect) = style_preview_rects(styling);
    let scene_size = style_preview_scene_size(styling);
    ui.add_child(
        parent,
        UiNode::scene(
            "styling.preview.scene",
            vec![
                ScenePrimitive::Rect(
                    PaintRect::solid(frame, styling.fill_color())
                        .stroke(AlignedStroke::inside(StrokeStyle::new(
                            styling.stroke_color(),
                            styling.stroke_width,
                        )))
                        .corner_radii(styling.radii())
                        .effect(PaintEffect::shadow(
                            styling.shadow_color(),
                            UiPoint::new(styling.shadow_x, styling.shadow_y),
                            styling.shadow_blur,
                            styling.shadow_spread,
                        )),
                ),
                ScenePrimitive::Text(
                    PaintText::new("Content", text_rect, text(13.0, color(255, 255, 255)))
                        .horizontal_align(TextHorizontalAlign::Center)
                        .vertical_align(TextVerticalAlign::Center)
                        .multiline(false),
                ),
            ],
            operad::layout::with_min_size(
                LayoutStyle::new()
                    .with_width_percent(1.0)
                    .with_height(180.0)
                    .with_flex_shrink(0.0),
                operad::layout::px(scene_size.width),
                operad::layout::px(scene_size.height),
            ),
        ),
    );
}

fn style_preview_rects(styling: StylingState) -> (UiRect, UiRect) {
    let outer = styling.outer_edges();
    let inner = styling.inner_edges();
    let frame = UiRect::new(
        22.0 + outer[0],
        28.0 + outer[2],
        108.0 + inner[0] + inner[1],
        40.0 + inner[2] + inner[3],
    );
    let text_rect = UiRect::new(
        frame.x + inner[0],
        frame.y + inner[2],
        (frame.width - inner[0] - inner[1]).max(1.0),
        (frame.height - inner[2] - inner[3]).max(1.0),
    );
    (frame, text_rect)
}

fn style_preview_scene_size(styling: StylingState) -> UiSize {
    let (frame, text_rect) = style_preview_rects(styling);
    let shadow_outset = styling.shadow_blur.max(0.0) + styling.shadow_spread.max(0.0);
    let shadow_bounds = UiRect::new(
        frame.x + styling.shadow_x - shadow_outset,
        frame.y + styling.shadow_y - shadow_outset,
        frame.width + shadow_outset * 2.0,
        frame.height + shadow_outset * 2.0,
    );
    let right = frame
        .right()
        .max(text_rect.right())
        .max(shadow_bounds.right());
    let bottom = frame
        .bottom()
        .max(text_rect.bottom())
        .max(shadow_bounds.bottom())
        .max(180.0);
    UiSize::new(right.ceil().max(1.0), bottom.ceil().max(1.0))
}

fn slider_options(state: &ShowcaseState, width: f32) -> widgets::SliderOptions {
    let mut options = widgets::SliderOptions::default().with_layout(
        LayoutStyle::new()
            .with_width(width)
            .with_height(24.0)
            .with_flex_shrink(0.0),
    );
    options.fill_color = if state.slider_trailing_color {
        state.slider_trailing_picker.value()
    } else {
        color(42, 49, 58)
    };
    options.thumb_shape = match state.slider_thumb_shape {
        SliderThumbChoice::Circle => widgets::slider::SliderThumbShape::Circle,
        SliderThumbChoice::Square => widgets::slider::SliderThumbShape::Square,
        SliderThumbChoice::Rectangle => widgets::slider::SliderThumbShape::Rectangle,
    };
    options.thumb_visual = UiVisual::panel(
        state.slider_thumb_picker.value(),
        Some(StrokeStyle::new(color(79, 93, 113), 1.0)),
        6.0,
    );
    options
}

#[allow(clippy::field_reassign_with_default)]
fn slider_number_input(
    ui: &mut UiDocument,
    parent: UiNodeId,
    name: &'static str,
    input: &TextInputState,
    focused: FocusedTextInput,
    state: &ShowcaseState,
    width: f32,
) {
    let mut options = TextInputOptions::default();
    options.layout = LayoutStyle::new().with_width(width).with_height(28.0);
    options.text_style = text(12.0, color(230, 236, 246));
    options.placeholder_style = text(12.0, color(144, 156, 174));
    options.edit_action = Some(format!("{name}.edit").into());
    options.focused = state.focused_text == Some(focused);
    options.caret_visible = caret_visible(state.caret_phase);
    widgets::text_input(ui, parent, name, input, options);
}

fn form_status_chip(
    ui: &mut UiDocument,
    parent: UiNodeId,
    name: &'static str,
    label: &'static str,
    active: bool,
) {
    let chip = ui.add_child(
        parent,
        UiNode::container(
            name,
            LayoutStyle::new()
                .with_width(82.0)
                .with_height(24.0)
                .with_padding(4.0)
                .with_flex_shrink(0.0),
        )
        .with_visual(UiVisual::panel(
            if active {
                color(35, 74, 54)
            } else {
                color(28, 34, 43)
            },
            Some(StrokeStyle::new(
                if active {
                    color(90, 160, 112)
                } else {
                    color(60, 72, 88)
                },
                1.0,
            )),
            4.0,
        )),
    );
    widgets::label(
        ui,
        chip,
        format!("{name}.label"),
        label,
        text(11.0, color(218, 228, 240)),
        LayoutStyle::new()
            .with_width_percent(1.0)
            .with_height_percent(1.0),
    );
}

fn profile_form_summary(ui: &mut UiDocument, parent: UiNodeId, state: &ShowcaseState) {
    let has_errors = widgets::form_has_errors(&state.form);
    let title = profile_form_summary_title(state, has_errors);
    let detail = format!(
        "{} | {} | {}",
        profile_summary_value(state.form_name_text.text(), "No name"),
        profile_summary_value(state.form_email_text.text(), "No email"),
        profile_summary_value(state.form_role_text.text(), "No role"),
    );
    let hint = profile_form_summary_hint(state, has_errors);
    let stroke = if has_errors {
        color(196, 94, 104)
    } else if state.form.dirty {
        color(205, 160, 71)
    } else if state.form.submitted {
        color(91, 164, 119)
    } else {
        color(60, 72, 88)
    };
    let summary = ui.add_child(
        parent,
        UiNode::container(
            "forms.profile.summary",
            LayoutStyle::column()
                .with_width_percent(1.0)
                .with_padding(10.0)
                .with_gap(4.0)
                .with_flex_shrink(0.0),
        )
        .with_visual(UiVisual::panel(
            color(20, 25, 32),
            Some(StrokeStyle::new(stroke, 1.0)),
            4.0,
        ))
        .with_accessibility(
            AccessibilityMeta::new(AccessibilityRole::Group)
                .label("Live profile summary")
                .value(format!("{title}. {detail}. {hint}")),
        ),
    );
    widgets::label(
        ui,
        summary,
        "forms.profile.summary.title",
        title,
        text(13.0, color(232, 240, 250)),
        LayoutStyle::new().with_width_percent(1.0),
    );
    widgets::label(
        ui,
        summary,
        "forms.profile.summary.detail",
        detail,
        text(12.0, color(186, 198, 216)),
        LayoutStyle::new().with_width_percent(1.0),
    );
    widgets::label(
        ui,
        summary,
        "forms.profile.summary.hint",
        hint,
        text(11.0, color(154, 166, 184)),
        LayoutStyle::new().with_width_percent(1.0),
    );
}

fn profile_form_summary_title(state: &ShowcaseState, has_errors: bool) -> &'static str {
    if has_errors {
        "Profile needs fixes"
    } else if state.form.submitted {
        "Profile submitted"
    } else if state.form.dirty {
        "Profile draft"
    } else {
        "Profile saved"
    }
}

fn profile_form_summary_hint(state: &ShowcaseState, has_errors: bool) -> &'static str {
    if has_errors {
        "Fix validation errors before applying or submitting."
    } else if state.form.dirty {
        "Apply saves the draft; Submit saves and marks it submitted."
    } else if state.form.submitted {
        "Submission completed. Apply stays disabled until something changes."
    } else {
        "No pending changes. Submit marks the saved profile submitted."
    }
}

fn profile_summary_value<'a>(value: &'a str, empty: &'static str) -> &'a str {
    let value = value.trim();
    if value.is_empty() {
        empty
    } else {
        value
    }
}

#[allow(clippy::field_reassign_with_default)]
fn form_text_field(
    ui: &mut UiDocument,
    parent: UiNodeId,
    name: &'static str,
    input: &TextInputState,
    focused: FocusedTextInput,
    state: &ShowcaseState,
) {
    let mut options = TextInputOptions::default();
    options.layout = LayoutStyle::new().with_width_percent(1.0).with_height(30.0);
    options.text_style = text(12.0, color(230, 236, 246));
    options.placeholder_style = text(12.0, color(144, 156, 174));
    options.placeholder = "Required".to_string();
    options.edit_action = Some(format!("{name}.edit").into());
    options.focused = state.focused_text == Some(focused);
    options.caret_visible = caret_visible(state.caret_phase);
    widgets::text_input(ui, parent, name, input, options);
}

fn profile_email_valid(email: &str) -> bool {
    let email = email.trim();
    let Some((local, domain)) = email.split_once('@') else {
        return false;
    };
    !local.is_empty() && domain.contains('.') && !domain.ends_with('.')
}

fn drag_source_layout() -> LayoutStyle {
    LayoutStyle::row()
        .with_width(128.0)
        .with_height(40.0)
        .with_padding(8.0)
        .with_gap(6.0)
        .with_flex_shrink(0.0)
}

fn drop_zone_layout() -> LayoutStyle {
    LayoutStyle::column()
        .with_width(128.0)
        .with_height(78.0)
        .with_padding(10.0)
        .with_gap(6.0)
        .with_flex_shrink(0.0)
}

fn dnd_operation_chip(
    ui: &mut UiDocument,
    parent: UiNodeId,
    name: &'static str,
    label: &'static str,
) {
    let chip = ui.add_child(
        parent,
        UiNode::container(
            name,
            LayoutStyle::new()
                .with_width(58.0)
                .with_height(22.0)
                .with_padding(3.0)
                .with_flex_shrink(0.0),
        )
        .with_visual(UiVisual::panel(
            color(26, 32, 42),
            Some(StrokeStyle::new(color(62, 76, 94), 1.0)),
            3.0,
        )),
    );
    widgets::label(
        ui,
        chip,
        format!("{name}.label"),
        label,
        text(11.0, color(190, 204, 222)),
        LayoutStyle::new()
            .with_width_percent(1.0)
            .with_height_percent(1.0),
    );
}

fn media_preview_image_layout() -> LayoutStyle {
    LayoutStyle::size(46.0, 46.0).with_flex_shrink(0.0)
}

fn media_icon_columns(state: &ShowcaseState) -> usize {
    let theme = state.app_theme();
    let options = showcase_desktop_options(state.last_desktop_size, &theme);
    let window_width = state
        .desktop
        .size("media", default_window_size("media"))
        .width;
    let content_width = (window_width - options.content_padding * 2.0).max(MEDIA_ICON_TILE_WIDTH);
    let pitch = MEDIA_ICON_TILE_WIDTH + MEDIA_ICON_GRID_GAP;
    (((content_width + MEDIA_ICON_GRID_GAP) / pitch).floor() as usize).clamp(1, MEDIA_ICON_COLUMNS)
}

fn media_icon_grid_width(columns: usize) -> f32 {
    let columns = columns.max(1);
    columns as f32 * MEDIA_ICON_TILE_WIDTH + columns.saturating_sub(1) as f32 * MEDIA_ICON_GRID_GAP
}

fn media_icon_grid_height(columns: usize, item_count: usize) -> f32 {
    let columns = columns.max(1);
    let rows = item_count.div_ceil(columns).max(1);
    rows as f32 * MEDIA_ICON_TILE_HEIGHT + rows.saturating_sub(1) as f32 * MEDIA_ICON_GRID_GAP
}

fn media_icon_grid(
    ui: &mut UiDocument,
    parent: UiNodeId,
    name: impl Into<String>,
    columns: usize,
    item_count: usize,
) -> UiNodeId {
    let columns = columns.clamp(1, MEDIA_ICON_COLUMNS);
    let rows = item_count.div_ceil(columns).max(1);
    let width = media_icon_grid_width(columns);
    let height = media_icon_grid_height(columns, item_count);
    let layout = operad::layout::with_grid_template_rows(
        operad::layout::with_grid_template_columns(
            Layout::grid()
                .size(LayoutSize::points(width, height))
                .gap(LayoutGap::points(MEDIA_ICON_GRID_GAP, MEDIA_ICON_GRID_GAP))
                .flex(0.0, 0.0, LayoutDimension::Auto)
                .to_layout_style(),
            (0..columns).map(|_| LayoutGridTrack::points(MEDIA_ICON_TILE_WIDTH)),
        ),
        (0..rows).map(|_| LayoutGridTrack::points(MEDIA_ICON_TILE_HEIGHT)),
    );
    ui.add_child(parent, UiNode::container(name, layout))
}

fn media_icon_tile(ui: &mut UiDocument, parent: UiNodeId, icon: BuiltInIcon) {
    let name = icon.key().replace('.', "_").replace('-', "_");
    let tile = ui.add_child(
        parent,
        UiNode::container(
            format!("media.icon_tile.{name}"),
            LayoutStyle::column()
                .with_width(MEDIA_ICON_TILE_WIDTH)
                .with_height(MEDIA_ICON_TILE_HEIGHT)
                .with_padding(6.0)
                .with_gap(4.0)
                .with_flex_shrink(0.0),
        )
        .with_visual(UiVisual::panel(
            color(17, 22, 30),
            Some(StrokeStyle::new(color(50, 62, 78), 1.0)),
            4.0,
        )),
    );
    widgets::image(
        ui,
        tile,
        format!("media.icon.{name}"),
        icon_image(icon),
        widgets::ImageOptions::default()
            .with_layout(LayoutStyle::size(28.0, 28.0))
            .with_accessibility_label(icon.label()),
    );
    widgets::label(
        ui,
        tile,
        format!("media.icon_label.{name}"),
        icon.label(),
        text(9.0, color(180, 194, 214)),
        LayoutStyle::new().with_width_percent(1.0).with_height(30.0),
    );
}

fn slider_checkbox(
    ui: &mut UiDocument,
    parent: UiNodeId,
    name: &'static str,
    label: &'static str,
    checked: bool,
) {
    slider_checkbox_with_layout(
        ui,
        parent,
        name,
        label,
        checked,
        LayoutStyle::new().with_width_percent(1.0).with_height(30.0),
    );
}

fn slider_checkbox_with_layout(
    ui: &mut UiDocument,
    parent: UiNodeId,
    name: &'static str,
    label: &'static str,
    checked: bool,
    layout: LayoutStyle,
) {
    let mut options = widgets::CheckboxOptions::default().with_action(name);
    options.layout = layout;
    options.text_style = text(12.0, color(220, 228, 238));
    widgets::checkbox(ui, parent, name, label, checked, options);
}

fn choice_button(
    ui: &mut UiDocument,
    parent: UiNodeId,
    name: &'static str,
    label: &'static str,
    selected: bool,
) {
    let mut options =
        widgets::ButtonOptions::new(LayoutStyle::new().with_width(78.0).with_height(28.0))
            .with_action(name);
    options.visual = if selected {
        button_visual(48, 112, 184)
    } else {
        button_visual(38, 46, 58)
    };
    options.hovered_visual = Some(button_visual(65, 86, 106));
    options.pressed_visual = Some(button_visual(34, 54, 84));
    options.text_style = text(12.0, color(238, 244, 252));
    widgets::button(ui, parent, name, label, options);
}

fn divider(ui: &mut UiDocument, parent: UiNodeId, name: &'static str) {
    ui.add_child(
        parent,
        UiNode::container(
            name,
            LayoutStyle::new()
                .with_width_percent(1.0)
                .with_height(1.0)
                .with_flex_shrink(0.0),
        )
        .with_visual(UiVisual::panel(color(48, 58, 72), None, 0.0)),
    );
}

fn canvas(ui: &mut UiDocument, parent: UiNodeId, state: &ShowcaseState) {
    let canvas_intrinsic = UiSize::new(720.0, 405.0);
    let body = section_with_min_viewport(ui, parent, "canvas", "Canvas", UiSize::new(720.0, 458.0));
    let controls = wrapping_row(ui, body, "canvas.options", 10.0);
    canvas_option_checkbox(
        ui,
        controls,
        "canvas.grow_horizontal",
        "Grow width",
        state.canvas_grow_horizontal,
    );
    canvas_option_checkbox(
        ui,
        controls,
        "canvas.grow_vertical",
        "Grow height",
        state.canvas_grow_vertical,
    );
    canvas_option_checkbox(
        ui,
        controls,
        "canvas.keep_aspect_ratio",
        "Keep aspect ratio",
        state.canvas_keep_aspect_ratio,
    );

    let mut options = widgets::CanvasOptions::default()
        .with_accessibility_label("Shader canvas")
        .with_action("canvas.rotate")
        .with_intrinsic_size(canvas_intrinsic);
    options.action_mode = WidgetActionMode::Drag;
    if state.canvas_keep_aspect_ratio {
        options = options.with_aspect_ratio(16.0 / 9.0);
    }
    let canvas_width = if state.canvas_grow_horizontal {
        LayoutDimension::percent(1.0)
    } else {
        LayoutDimension::points(canvas_intrinsic.width)
    };
    let canvas_height = if state.canvas_grow_vertical {
        LayoutDimension::percent(1.0)
    } else {
        LayoutDimension::points(canvas_intrinsic.height)
    };
    options.layout = Layout::new()
        .size(LayoutSize::new(canvas_width, canvas_height))
        .min_size(LayoutSize::points(
            canvas_intrinsic.width,
            canvas_intrinsic.height,
        ))
        .flex(
            if state.canvas_grow_vertical { 1.0 } else { 0.0 },
            1.0,
            LayoutDimension::Auto,
        )
        .to_layout_style();
    options.visual = UiVisual::panel(
        color(18, 22, 28),
        Some(StrokeStyle::new(color(58, 68, 84), 1.0)),
        4.0,
    );
    widgets::canvas(
        ui,
        body,
        "canvas.shader",
        CanvasContent::new("canvas.shader").program(showcase_canvas_program(state.cube)),
        options,
    );
}

fn canvas_option_checkbox(
    ui: &mut UiDocument,
    parent: UiNodeId,
    name: &'static str,
    label: &'static str,
    checked: bool,
) {
    let mut options = widgets::CheckboxOptions::default()
        .with_action(name)
        .with_text_style(text(12.0, color(220, 228, 238)));
    options.layout = LayoutStyle::new().with_height(28.0).with_flex_shrink(0.0);
    widgets::checkbox(ui, parent, name, label, checked, options);
}

fn showcase_canvas_program(cube: CanvasCubeState) -> CanvasRenderProgram {
    CanvasRenderProgram::wgsl(include_str!("shaders/showcase_canvas.wgsl"))
        .label("showcase.canvas")
        .constant("CUBE_YAW", cube.yaw as f64)
        .constant("CUBE_PITCH", cube.pitch as f64)
        .clear_color(Some(color(18, 22, 28)))
}

fn section(
    ui: &mut UiDocument,
    parent: UiNodeId,
    name: impl Into<String>,
    _title: impl Into<String>,
) -> UiNodeId {
    section_with_min_viewport(ui, parent, name, _title, UiSize::ZERO)
}

fn section_with_min_viewport(
    ui: &mut UiDocument,
    parent: UiNodeId,
    name: impl Into<String>,
    _title: impl Into<String>,
    min_viewport_size: UiSize,
) -> UiNodeId {
    let name = name.into();
    let layout = Layout::column()
        .size(LayoutSize::percent(1.0, 1.0))
        .min_size(LayoutSize::points(
            min_viewport_size.width.max(0.0),
            min_viewport_size.height.max(0.0),
        ))
        .gap(LayoutGap::points(10.0, 10.0))
        .flex(1.0, 1.0, LayoutDimension::Auto)
        .to_layout_style();
    widgets::scroll_area(
        ui,
        parent,
        format!("{name}.section_scroll"),
        ScrollAxes::BOTH,
        layout,
    )
}

fn row(ui: &mut UiDocument, parent: UiNodeId, name: impl Into<String>, gap: f32) -> UiNodeId {
    ui.add_child(
        parent,
        UiNode::container(
            name,
            Layout::row()
                .size(LayoutSize::new(
                    LayoutDimension::percent(1.0),
                    LayoutDimension::Auto,
                ))
                .align_items(LayoutAlignment::Center)
                .gap(LayoutGap::points(gap, gap))
                .flex(0.0, 0.0, LayoutDimension::Auto)
                .to_layout_style(),
        ),
    )
}

fn wrapping_row(
    ui: &mut UiDocument,
    parent: UiNodeId,
    name: impl Into<String>,
    gap: f32,
) -> UiNodeId {
    ui.add_child(
        parent,
        UiNode::container(
            name,
            Layout::row()
                .size(LayoutSize::new(
                    LayoutDimension::percent(1.0),
                    LayoutDimension::Auto,
                ))
                .min_size(LayoutSize::points(0.0, 0.0))
                .align_items(LayoutAlignment::Center)
                .gap(LayoutGap::points(gap, gap))
                .flex_wrap(LayoutFlexWrap::Wrap)
                .flex(0.0, 0.0, LayoutDimension::Auto)
                .to_layout_style(),
        ),
    )
}

pub const fn points(width: f32, height: f32) -> Self

Examples found in repository

examples/showcase.rs (line 8191)

fn list_and_table_widgets(ui: &mut UiDocument, parent: UiNodeId, state: &ShowcaseState) {
    let body = section_with_min_viewport(
        ui,
        parent,
        "lists_tables",
        "Lists and tables",
        UiSize::new(520.0, 0.0),
    );

    let list_row = ui.add_child(
        body,
        UiNode::container(
            "lists_tables.list_row",
            Layout::row()
                .size(LayoutSize::new(
                    LayoutDimension::percent(1.0),
                    LayoutDimension::Auto,
                ))
                .gap(LayoutGap::points(10.0, 10.0))
                .flex_wrap(LayoutFlexWrap::Wrap)
                .to_layout_style(),
        ),
    );
    let scroll_column = ui.add_child(
        list_row,
        UiNode::container(
            "lists_tables.scroll_area.column",
            Layout::column()
                .min_size(LayoutSize::points(220.0, 0.0))
                .gap(LayoutGap::points(6.0, 6.0))
                .flex(1.0, 1.0, LayoutDimension::points(245.0))
                .to_layout_style(),
        ),
    );
    widgets::label(
        ui,
        scroll_column,
        "lists_tables.scroll_area.title",
        "Scrollable list",
        text(12.0, color(166, 176, 190)),
        LayoutStyle::new().with_width_percent(1.0),
    );
    let nested_scroll = widgets::scroll_area(
        ui,
        scroll_column,
        "lists_tables.scroll_area",
        ScrollAxes::VERTICAL,
        LayoutStyle::column()
            .with_width_percent(1.0)
            .with_height(104.0),
    );
    ui.node_mut(nested_scroll)
        .set_action("lists_tables.scroll_area.scroll");
    if let Some(scroll) = ui.node_mut(nested_scroll).scroll_mut() {
        scroll.set_offset(UiPoint::new(0.0, state.list_scroll));
    }
    for index in 0..6 {
        widgets::label(
            ui,
            nested_scroll,
            format!("lists_tables.scroll_area.row.{index}"),
            format!("Scroll row {}", index + 1),
            text(12.0, color(200, 212, 228)),
            LayoutStyle::new()
                .with_width_percent(1.0)
                .with_height(26.0)
                .with_flex_shrink(0.0),
        );
    }

    let virtual_list_column = ui.add_child(
        list_row,
        UiNode::container(
            "lists_tables.virtual_list.column",
            Layout::column()
                .min_size(LayoutSize::points(220.0, 0.0))
                .gap(LayoutGap::points(6.0, 6.0))
                .flex(1.0, 1.0, LayoutDimension::points(245.0))
                .to_layout_style(),
        ),
    );

    widgets::label(
        ui,
        virtual_list_column,
        "lists_tables.virtual_list.title",
        "Virtualized list",
        text(12.0, color(166, 176, 190)),
        LayoutStyle::new().with_width_percent(1.0),
    );
    let virtual_list = widgets::virtual_list(
        ui,
        virtual_list_column,
        "lists_tables.virtual_list",
        widgets::VirtualListSpec {
            row_count: 24,
            row_height: 28.0,
            viewport_height: 104.0,
            scroll_offset: state.virtual_scroll,
            overscan: 1,
        },
        |ui, row_parent, row| {
            widgets::label(
                ui,
                row_parent,
                format!("lists_tables.virtual_list.row.{row}"),
                format!("Virtual row {}", row + 1),
                text(12.0, color(214, 224, 238)),
                LayoutStyle::new()
                    .with_width_percent(1.0)
                    .with_height(28.0)
                    .with_flex_shrink(0.0),
            );
        },
    );
    ui.node_mut(virtual_list)
        .set_action("lists_tables.virtual_list.scroll");

    widgets::separator(
        ui,
        body,
        "lists_tables.virtualized_table.separator",
        widgets::SeparatorOptions::default(),
    );
    widgets::label(
        ui,
        body,
        "lists_tables.data_table.title",
        "Virtualized selectable table",
        text(12.0, color(166, 176, 190)),
        LayoutStyle::new().with_width_percent(1.0),
    );
    let virtual_controls = wrapping_row(ui, body, "lists_tables.virtualized_table.controls", 8.0);
    button(
        ui,
        virtual_controls,
        "lists_tables.virtualized_table.sort.name",
        if state.virtual_table_descending {
            "Name desc"
        } else {
            "Name asc"
        },
        "lists_tables.virtualized_table.sort.name",
        button_visual(38, 52, 70),
    );
    button(
        ui,
        virtual_controls,
        "lists_tables.virtualized_table.filter.status",
        if state.virtual_table_ready_only {
            "Ready only"
        } else {
            "All status"
        },
        "lists_tables.virtualized_table.filter.status",
        button_visual(38, 52, 70),
    );
    button(
        ui,
        virtual_controls,
        "lists_tables.virtualized_table.resize.reset",
        "Reset width",
        "lists_tables.virtualized_table.resize.reset",
        button_visual(38, 52, 70),
    );

    let columns = virtual_table_columns(state);
    let visible_rows = virtual_table_visible_rows(state);
    let mut table_options = ext_widgets::DataTableOptions::default()
        .with_row_action_prefix("lists_tables.virtualized_table")
        .with_cell_action_prefix("lists_tables.virtualized_table")
        .with_scroll_action("lists_tables.virtualized_table.scroll");
    table_options.layout = LayoutStyle::column()
        .with_width_percent(1.0)
        .with_flex_shrink(0.0);
    table_options.header_visual = UiVisual::panel(
        color(34, 41, 50),
        Some(StrokeStyle::new(color(67, 78, 95), 1.0)),
        0.0,
    );
    table_options.header_text_style = text(12.0, color(222, 230, 240));
    table_options.selection = state.table_selection.clone();
    ext_widgets::virtualized_data_table(
        ui,
        body,
        "lists_tables.virtualized_table",
        &columns,
        ext_widgets::VirtualDataTableSpec {
            row_count: visible_rows.len(),
            row_height: 28.0,
            viewport_width: 520.0,
            viewport_height: 156.0,
            scroll_offset: UiPoint::new(0.0, state.virtual_table_scroll),
            overscan_rows: 1,
        },
        table_options,
        |ui, cell_parent, cell| {
            let source_row = visible_rows.get(cell.row).copied().unwrap_or(cell.row);
            let value = virtual_table_cell_value(source_row, cell.column);
            widgets::label(
                ui,
                cell_parent,
                format!(
                    "lists_tables.virtualized_table.cell.{}.{}.label",
                    cell.row, cell.column
                ),
                value,
                text(12.0, color(220, 228, 238)),
                LayoutStyle::new().with_width_percent(1.0),
            );
        },
    );
}

#[allow(clippy::field_reassign_with_default)]
fn property_inspector(ui: &mut UiDocument, parent: UiNodeId, state: &ShowcaseState) {
    let body = section(ui, parent, "property_inspector", "Property inspector");
    widgets::label(
        ui,
        body,
        "property_inspector.target",
        "Inspecting: Styling preview",
        text(12.0, color(196, 210, 230)),
        LayoutStyle::new().with_width_percent(1.0),
    );
    let mut options = ext_widgets::PropertyInspectorOptions::default();
    options.selected_index = Some(0);
    options.label_width = 120.0;
    options.row_height = 30.0;
    ext_widgets::property_inspector_grid(
        ui,
        body,
        "property_inspector.grid",
        &[
            ext_widgets::PropertyGridRow::new("target", "Widget", "Button preview").read_only(),
            ext_widgets::PropertyGridRow::new(
                "inner",
                "Inner margin",
                format!("{:.0}px", state.styling.inner_margin),
            )
            .with_kind(ext_widgets::PropertyValueKind::Number),
            ext_widgets::PropertyGridRow::new(
                "outer",
                "Outer margin",
                format!("{:.0}px", state.styling.outer_margin),
            )
            .with_kind(ext_widgets::PropertyValueKind::Number),
            ext_widgets::PropertyGridRow::new(
                "radius",
                "Corner radius",
                format!("{:.0}px", state.styling.corner_radius),
            )
            .with_kind(ext_widgets::PropertyValueKind::Number),
            ext_widgets::PropertyGridRow::new(
                "stroke",
                "Stroke",
                format!("{:.1}px", state.styling.stroke_width),
            )
            .with_kind(ext_widgets::PropertyValueKind::Number)
            .changed(),
            ext_widgets::PropertyGridRow::new("state", "Source", "Styling widget").read_only(),
        ],
        options,
    );
}

fn diagnostics_widgets(ui: &mut UiDocument, parent: UiNodeId, state: &ShowcaseState) {
    let body = section(ui, parent, "diagnostics", "Diagnostics");
    let debug_snapshot = &state.diagnostics_snapshot;

    diagnostics_selected_node_panel(ui, body, debug_snapshot);
    diagnostics_animation_panel(ui, body, state, debug_snapshot);

    widgets::label(
        ui,
        body,
        "diagnostics.a11y.title",
        "Accessibility",
        text(14.0, color(222, 230, 240)),
        LayoutStyle::new().with_width_percent(1.0),
    );
    let mut overlay_preview_style = UiNodeStyle::from(
        LayoutStyle::new()
            .with_width(320.0)
            .with_height(140.0)
            .with_flex_shrink(0.0),
    );
    overlay_preview_style.set_clip(ClipBehavior::Clip);
    let overlay_preview = ui.add_child(
        body,
        UiNode::container("diagnostics.a11y.preview", overlay_preview_style).with_visual(
            UiVisual::panel(
                color(12, 17, 24),
                Some(StrokeStyle::new(color(47, 62, 82), 1.0)),
                4.0,
            ),
        ),
    );
    let mut overlay_options = ext_widgets::AccessibilityDebugOverlayOptions {
        action_prefix: Some("diagnostics.a11y.visual".to_owned()),
        ..Default::default()
    };
    overlay_options.show_labels = false;
    ext_widgets::accessibility_debug_overlay(
        ui,
        overlay_preview,
        "diagnostics.a11y.visual",
        &debug_snapshot,
        overlay_options,
    );
    diagnostics_accessibility_details(ui, body, debug_snapshot);

    let diagnostic_columns = ui.add_child(
        body,
        UiNode::container(
            "diagnostics.columns",
            LayoutStyle::column()
                .with_width_percent(1.0)
                .with_flex_shrink(0.0)
                .gap(10.0),
        ),
    );
    let command_column = ui.add_child(
        diagnostic_columns,
        UiNode::container(
            "diagnostics.commands.column",
            LayoutStyle::column()
                .with_width_percent(1.0)
                .with_flex_shrink(0.0)
                .gap(8.0),
        ),
    );
    let theme_column = ui.add_child(
        diagnostic_columns,
        UiNode::container(
            "diagnostics.theme.column",
            LayoutStyle::column()
                .with_width_percent(1.0)
                .with_flex_shrink(0.0)
                .gap(8.0),
        ),
    );

    let registry = diagnostics_command_registry();
    diagnostics_commands_panel(ui, command_column, &registry);

    let theme_snapshot = DebugThemeSnapshot::from_theme(&Theme::dark());
    diagnostics_theme_panel(ui, theme_column, &theme_snapshot);
}

fn diagnostics_selected_node_panel(
    ui: &mut UiDocument,
    parent: UiNodeId,
    snapshot: &DebugInspectorSnapshot,
) {
    let panel = diagnostics_panel(ui, parent, "diagnostics.inspector", "Selected node");
    let rows = snapshot
        .node("diagnostics.sample.preview")
        .map(|node| {
            vec![
                ext_widgets::PropertyGridRow::new("name", "Node", "Preview action").read_only(),
                ext_widgets::PropertyGridRow::new("role", "Role", "Button").read_only(),
                ext_widgets::PropertyGridRow::new(
                    "bounds",
                    "Bounds",
                    format!(
                        "{:.0}, {:.0}; {:.0} x {:.0}",
                        node.rect.x, node.rect.y, node.rect.width, node.rect.height
                    ),
                )
                .with_kind(ext_widgets::PropertyValueKind::Number)
                .read_only(),
                ext_widgets::PropertyGridRow::new(
                    "clip",
                    "Clip",
                    format!("{:.0} x {:.0}", node.clip_rect.width, node.clip_rect.height),
                )
                .with_kind(ext_widgets::PropertyValueKind::Number)
                .read_only(),
                ext_widgets::PropertyGridRow::new(
                    "input",
                    "Input",
                    if node.input.pointer {
                        "Receives pointer input"
                    } else {
                        "Passive"
                    },
                )
                .read_only(),
            ]
        })
        .unwrap_or_else(|| {
            vec![
                ext_widgets::PropertyGridRow::new("missing", "Selected node", "No node selected")
                    .read_only(),
            ]
        });
    ext_widgets::property_inspector_grid(
        ui,
        panel,
        "diagnostics.inspector.rows",
        &rows,
        diagnostics_grid_options("Selected node details"),
    );
}

fn diagnostics_animation_panel(
    ui: &mut UiDocument,
    parent: UiNodeId,
    state: &ShowcaseState,
    snapshot: &DebugInspectorSnapshot,
) {
    let graph_panel =
        diagnostics_panel(ui, parent, "diagnostics.animation.graph", "Animation state");
    if let Some(animation) = snapshot.animation("diagnostics.sample.preview") {
        let state_row = row(ui, graph_panel, "diagnostics.animation.graph.states", 8.0);
        for state_name in ["idle", "hot"] {
            diagnostic_chip(
                ui,
                state_row,
                format!("diagnostics.animation.graph.state.{state_name}"),
                state_name,
                animation.current_state == state_name,
            );
        }

        let graph = animation.state_graph();
        for (index, edge) in graph.edges.iter().take(2).enumerate() {
            let value = if edge.kind == DebugAnimationGraphEdgeKind::Blend {
                "Input blend"
            } else {
                "State change"
            };
            let detail = if edge.label.is_empty() {
                if edge.active { "Active" } else { "Inactive" }.to_owned()
            } else if edge.active {
                format!("{}; active", edge.label)
            } else {
                edge.label.clone()
            };
            diagnostic_value_row(
                ui,
                graph_panel,
                format!("diagnostics.animation.graph.edge.{index}"),
                value,
                format!("{} -> {}", edge.from, edge.to),
            );
            diagnostic_muted_label(
                ui,
                graph_panel,
                format!("diagnostics.animation.graph.edge.{index}.detail"),
                detail,
            );
        }
    } else {
        diagnostic_muted_label(
            ui,
            graph_panel,
            "diagnostics.animation.graph.empty",
            "No animation state machine",
        );
    }

    let controls_panel = diagnostics_panel(
        ui,
        parent,
        "diagnostics.animation.controls",
        "Animation controls",
    );
    let transport = row(
        ui,
        controls_panel,
        "diagnostics.animation.controls.transport",
        8.0,
    );
    diagnostic_button(
        ui,
        transport,
        "diagnostics.animation.controls.transport.pause_toggle",
        if state.diagnostics_animation_paused {
            "Resume"
        } else {
            "Pause"
        },
        state.diagnostics_animation_paused,
    );
    diagnostic_button(
        ui,
        transport,
        "diagnostics.animation.controls.transport.step",
        "Step",
        false,
    );
    diagnostic_slider_row(
        ui,
        controls_panel,
        "diagnostics.animation.controls.transport.scrub",
        "Scrub progress",
        state.diagnostics_animation_scrub,
        "diagnostics.animation.controls.transport.scrub",
    );
    diagnostic_button(
        ui,
        controls_panel,
        "diagnostics.animation.controls.input.active.toggle",
        if state.diagnostics_animation_active {
            "Active input: true"
        } else {
            "Active input: false"
        },
        state.diagnostics_animation_active,
    );
    diagnostic_slider_row(
        ui,
        controls_panel,
        "diagnostics.animation.controls.input.hover.set",
        "Hover blend",
        state.diagnostics_animation_hover,
        "diagnostics.animation.controls.input.hover.set",
    );
    diagnostic_button(
        ui,
        controls_panel,
        "diagnostics.animation.controls.input.pulse.fire",
        "Fire pulse",
        false,
    );
    widgets::label(
        ui,
        controls_panel,
        "diagnostics.animation.controls.status",
        format!(
            "Scrub {:.0}%   Hover {:.0}%   Pulses {}",
            state.diagnostics_animation_scrub * 100.0,
            state.diagnostics_animation_hover * 100.0,
            state.diagnostics_animation_pulse_count
        ),
        text(12.0, color(166, 180, 198)),
        LayoutStyle::new().with_width_percent(1.0),
    );
}

fn diagnostics_accessibility_details(
    ui: &mut UiDocument,
    parent: UiNodeId,
    snapshot: &DebugInspectorSnapshot,
) {
    let rows = snapshot
        .accessibility_overlay
        .iter()
        .find(|node| node.name == "diagnostics.sample.preview")
        .map(|node| {
            let accessibility = node.accessibility.as_ref();
            vec![
                ext_widgets::PropertyGridRow::new("role", "Role", "Button").read_only(),
                ext_widgets::PropertyGridRow::new(
                    "label",
                    "Label",
                    accessibility
                        .and_then(|meta| meta.label.clone())
                        .unwrap_or_else(|| "Preview action".to_owned()),
                )
                .read_only(),
                ext_widgets::PropertyGridRow::new(
                    "focus",
                    "Focus order",
                    node.focus_index
                        .map(|index| format!("#{}", index + 1))
                        .unwrap_or_else(|| "Not focusable".to_owned()),
                )
                .read_only(),
                ext_widgets::PropertyGridRow::new(
                    "warnings",
                    "Warnings",
                    if node.warnings.is_empty() {
                        "None"
                    } else {
                        "Needs review"
                    },
                )
                .read_only(),
            ]
        })
        .unwrap_or_else(|| {
            vec![
                ext_widgets::PropertyGridRow::new("missing", "Accessibility", "No metadata")
                    .read_only(),
            ]
        });
    ext_widgets::property_inspector_grid(
        ui,
        parent,
        "diagnostics.a11y",
        &rows,
        diagnostics_grid_options("Accessibility metadata"),
    );
}

fn diagnostics_commands_panel(ui: &mut UiDocument, parent: UiNodeId, registry: &CommandRegistry) {
    let panel = diagnostics_panel(ui, parent, "diagnostics.commands", "Commands");
    let formatter = ShortcutFormatter::default();
    for command_id in [
        "diagnostics.palette",
        "diagnostics.inspect",
        "diagnostics.record",
        "diagnostics.export_theme",
    ] {
        if let Some(command) = registry.command(command_id) {
            let shortcut = registry
                .command_bindings(command.meta.id.clone())
                .first()
                .map(|binding| formatter.format(binding.shortcut))
                .unwrap_or_else(|| "Unbound".to_owned());
            let status = if command.enabled {
                command
                    .meta
                    .category
                    .clone()
                    .unwrap_or_else(|| "General".to_owned())
            } else {
                command
                    .disabled_reason
                    .clone()
                    .unwrap_or_else(|| "Disabled".to_owned())
            };
            diagnostic_command_row(
                ui,
                panel,
                format!(
                    "diagnostics.commands.row.{}",
                    command.meta.id.as_str().replace('.', "_")
                ),
                &command.meta.label,
                &shortcut,
                &status,
            );
        }
    }
    diagnostic_value_row(
        ui,
        panel,
        "diagnostics.commands.conflicts",
        "Shortcut conflicts",
        if registry.conflicts().is_empty() {
            "None"
        } else {
            "Needs review"
        },
    );
}

fn diagnostics_theme_panel(ui: &mut UiDocument, parent: UiNodeId, snapshot: &DebugThemeSnapshot) {
    let panel = diagnostics_panel(ui, parent, "diagnostics.theme", "Theme tokens");
    diagnostic_value_row(
        ui,
        panel,
        "diagnostics.theme.name",
        "Theme",
        snapshot.name.as_str(),
    );
    for token_path in ["colors.accent", "colors.surface", "typography.body"] {
        if let Some(token) = snapshot.token(token_path) {
            diagnostic_value_row(
                ui,
                panel,
                format!("diagnostics.theme.token.{}", token_path.replace('.', "_")),
                token_path,
                token.value.as_str(),
            );
        }
    }
    if let Some(component) = snapshot.component_states.first() {
        diagnostic_value_row(
            ui,
            panel,
            "diagnostics.theme.component.button",
            "Button normal",
            format!(
                "{:.0} x {:.0}, padding {:.0}",
                component.min_width, component.min_height, component.padding_x
            ),
        );
    }
}

fn diagnostics_panel(
    ui: &mut UiDocument,
    parent: UiNodeId,
    name: impl Into<String>,
    title: impl Into<String>,
) -> UiNodeId {
    let name = name.into();
    let title = title.into();
    let panel = ui.add_child(
        parent,
        UiNode::container(
            name.clone(),
            LayoutStyle::column()
                .with_width_percent(1.0)
                .with_padding(10.0)
                .with_gap(8.0)
                .with_flex_shrink(0.0),
        )
        .with_visual(UiVisual::panel(
            color(15, 20, 28),
            Some(StrokeStyle::new(color(52, 65, 84), 1.0)),
            4.0,
        ))
        .with_accessibility(AccessibilityMeta::new(AccessibilityRole::Group).label(title.clone())),
    );
    widgets::label(
        ui,
        panel,
        format!("{name}.title"),
        title,
        text(13.0, color(222, 230, 240)),
        LayoutStyle::new().with_width_percent(1.0),
    );
    panel
}

fn diagnostics_grid_options(label: impl Into<String>) -> ext_widgets::PropertyInspectorOptions {
    ext_widgets::PropertyInspectorOptions {
        label_width: 112.0,
        row_height: 28.0,
        accessibility_label: Some(label.into()),
        ..Default::default()
    }
}

fn diagnostic_value_row(
    ui: &mut UiDocument,
    parent: UiNodeId,
    name: impl Into<String>,
    label: impl Into<String>,
    value: impl Into<String>,
) -> UiNodeId {
    let name = name.into();
    let row = row(ui, parent, name.clone(), 8.0);
    widgets::label(
        ui,
        row,
        format!("{name}.label"),
        label.into(),
        text(12.0, color(166, 180, 198)),
        LayoutStyle::new().with_width(136.0).with_flex_shrink(0.0),
    );
    widgets::label(
        ui,
        row,
        format!("{name}.value"),
        value.into(),
        text(12.0, color(226, 234, 244)),
        LayoutStyle::new().with_width_percent(1.0),
    );
    row
}

fn diagnostic_muted_label(
    ui: &mut UiDocument,
    parent: UiNodeId,
    name: impl Into<String>,
    label: impl Into<String>,
) -> UiNodeId {
    let mut style = text(12.0, color(166, 180, 198));
    style.wrap = TextWrap::WordOrGlyph;
    widgets::label(
        ui,
        parent,
        name,
        label.into(),
        style,
        LayoutStyle::new().with_width_percent(1.0),
    )
}

fn diagnostic_command_row(
    ui: &mut UiDocument,
    parent: UiNodeId,
    name: impl Into<String>,
    label: &str,
    shortcut: &str,
    status: &str,
) -> UiNodeId {
    let name = name.into();
    let row = row(ui, parent, name.clone(), 8.0);
    widgets::label(
        ui,
        row,
        format!("{name}.label"),
        label,
        text(12.0, color(226, 234, 244)),
        LayoutStyle::new()
            .with_width_percent(1.0)
            .with_flex_grow(1.0),
    );
    widgets::label(
        ui,
        row,
        format!("{name}.shortcut"),
        shortcut,
        text(12.0, color(166, 180, 198)),
        LayoutStyle::new().with_width(78.0).with_flex_shrink(0.0),
    );
    widgets::label(
        ui,
        row,
        format!("{name}.status"),
        status,
        text(12.0, color(166, 180, 198)),
        LayoutStyle::new().with_width(140.0).with_flex_shrink(0.0),
    );
    row
}

fn diagnostic_slider_row(
    ui: &mut UiDocument,
    parent: UiNodeId,
    name: impl Into<String>,
    label: impl Into<String>,
    value: f32,
    action: impl Into<String>,
) -> UiNodeId {
    let name = name.into();
    let label = label.into();
    let row = row(ui, parent, format!("{name}.row"), 8.0);
    widgets::label(
        ui,
        row,
        format!("{name}.label"),
        label.clone(),
        text(12.0, color(166, 180, 198)),
        LayoutStyle::new().with_width(136.0).with_flex_shrink(0.0),
    );
    let slider_name = if name.ends_with(".set") {
        format!("{name}.slider")
    } else {
        name.clone()
    };
    let mut options = widgets::SliderOptions::default()
        .with_layout(LayoutStyle::new().with_width(160.0).with_height(24.0))
        .with_value_edit_action(action.into());
    options.accessibility_label = Some(label);
    widgets::slider(ui, row, slider_name, value, 0.0..1.0, options);
    widgets::label(
        ui,
        row,
        format!("{name}.percent"),
        format!("{:.0}%", value * 100.0),
        text(12.0, color(226, 234, 244)),
        LayoutStyle::new().with_width(46.0).with_flex_shrink(0.0),
    );
    row
}

fn diagnostic_button(
    ui: &mut UiDocument,
    parent: UiNodeId,
    name: impl Into<String>,
    label: impl Into<String>,
    active: bool,
) -> UiNodeId {
    let name = name.into();
    let mut options = widgets::ButtonOptions::default()
        .with_layout(LayoutStyle::new().with_height(32.0))
        .with_action(name.clone())
        .pressed(active);
    if active {
        options.visual = UiVisual::panel(
            color(47, 94, 150),
            Some(StrokeStyle::new(color(103, 164, 224), 1.0)),
            4.0,
        );
    }
    widgets::button(ui, parent, name, label, options)
}

fn diagnostic_chip(
    ui: &mut UiDocument,
    parent: UiNodeId,
    name: impl Into<String>,
    label: impl Into<String>,
    active: bool,
) -> UiNodeId {
    let name = name.into();
    let chip = ui.add_child(
        parent,
        UiNode::container(
            name.clone(),
            LayoutStyle::new()
                .with_width(82.0)
                .with_height(28.0)
                .with_padding(4.0)
                .with_flex_shrink(0.0),
        )
        .with_visual(if active {
            UiVisual::panel(
                color(47, 94, 150),
                Some(StrokeStyle::new(color(103, 164, 224), 1.0)),
                4.0,
            )
        } else {
            UiVisual::panel(
                color(31, 39, 50),
                Some(StrokeStyle::new(color(62, 76, 96), 1.0)),
                4.0,
            )
        }),
    );
    widgets::label(
        ui,
        chip,
        format!("{name}.label"),
        label.into(),
        text(12.0, color(226, 234, 244)),
        LayoutStyle::new().with_width_percent(1.0),
    );
    chip
}

fn diagnostics_sample_snapshot(state: &ShowcaseState) -> DebugInspectorSnapshot {
    diagnostics_sample_snapshot_for(
        state.diagnostics_animation_hover,
        state.diagnostics_animation_active,
    )
}

fn diagnostics_sample_snapshot_for(hover: f32, active: bool) -> DebugInspectorSnapshot {
    let mut sample = UiDocument::new(root_style(320.0, 180.0));
    let card = sample.add_child(
        sample.root(),
        UiNode::container(
            "diagnostics.sample.card",
            LayoutStyle::column()
                .with_width_percent(1.0)
                .with_height(120.0)
                .padding(12.0)
                .gap(8.0),
        )
        .with_visual(UiVisual::panel(
            color(16, 22, 30),
            Some(StrokeStyle::new(color(62, 77, 98), 1.0)),
            6.0,
        ))
        .with_accessibility(
            AccessibilityMeta::new(AccessibilityRole::Group).label("Diagnostics sample"),
        ),
    );
    sample.add_child(
        card,
        UiNode::container(
            "diagnostics.sample.preview",
            LayoutStyle::new().with_width(160.0).with_height(38.0),
        )
        .with_input(InputBehavior::BUTTON)
        .with_visual(UiVisual::panel(
            color(52, 112, 180),
            Some(StrokeStyle::new(color(116, 183, 255), 1.0)),
            5.0,
        ))
        .with_accessibility(
            AccessibilityMeta::new(AccessibilityRole::Button)
                .label("Preview action")
                .focusable(),
        )
        .with_animation(
            AnimationMachine::new(
                vec![
                    AnimationState::new(
                        "idle",
                        AnimatedValues::new(1.0, UiPoint::new(0.0, 0.0), 1.0),
                    ),
                    AnimationState::new(
                        "hot",
                        AnimatedValues::new(0.92, UiPoint::new(18.0, 0.0), 1.08),
                    ),
                ],
                vec![AnimationTransition::when(
                    "idle",
                    "hot",
                    AnimationCondition::bool("active", true),
                    0.18,
                )],
                "idle",
            )
            .expect("sample animation")
            .with_number_input("hover", hover)
            .with_blend_binding(AnimationBlendBinding::new("hover", "idle", "hot"))
            .with_bool_input("active", active)
            .with_trigger_input("pulse"),
        ),
    );
    widgets::label(
        &mut sample,
        card,
        "diagnostics.sample.label",
        "Sample node",
        text(12.0, color(198, 210, 226)),
        LayoutStyle::new().with_width_percent(1.0),
    );
    sample
        .compute_layout(UiSize::new(320.0, 180.0), &mut ApproxTextMeasurer)
        .expect("sample layout");
    DebugInspectorSnapshot::from_document(&sample, &mut ApproxTextMeasurer)
}

fn diagnostics_command_registry() -> CommandRegistry {
    let mut registry = CommandRegistry::new();
    registry
        .register(
            CommandMeta::new("diagnostics.palette", "Open command palette")
                .description("Show command search")
                .category("Debug"),
        )
        .expect("command");
    registry
        .register(
            CommandMeta::new("diagnostics.inspect", "Inspect selected node")
                .description("Focus the layout inspector")
                .category("Debug"),
        )
        .expect("command");
    registry
        .register(
            CommandMeta::new("diagnostics.record", "Start interaction recording")
                .description("Capture replay steps")
                .category("Testing"),
        )
        .expect("command");
    registry
        .register(CommandMeta::new(
            "diagnostics.export_theme",
            "Export theme patch",
        ))
        .expect("command");
    registry
        .bind_shortcut(
            CommandScope::Global,
            Shortcut::ctrl('k'),
            "diagnostics.palette",
        )
        .expect("shortcut");
    registry
        .bind_shortcut(
            CommandScope::Panel,
            Shortcut::ctrl('i'),
            "diagnostics.inspect",
        )
        .expect("shortcut");
    registry
        .bind_shortcut(
            CommandScope::Panel,
            Shortcut::ctrl('r'),
            "diagnostics.record",
        )
        .expect("shortcut");
    registry
        .disable("diagnostics.export_theme", "No changes to export")
        .expect("disable");
    registry
}

fn tree_widgets(ui: &mut UiDocument, parent: UiNodeId, state: &ShowcaseState) {
    let body = section(ui, parent, "trees", "Tree view");
    widgets::label(
        ui,
        body,
        "trees.tree_view.title",
        "Editable tree",
        text(12.0, color(166, 176, 190)),
        LayoutStyle::new().with_width_percent(1.0),
    );
    ext_widgets::tree_view(
        ui,
        body,
        "trees.tree_view",
        &editable_tree_items(&state.editable_tree),
        &state.tree,
        ext_widgets::TreeViewOptions::default().with_row_action_prefix("trees.tree"),
    );
    widgets::label(
        ui,
        body,
        "trees.editable.status",
        &state.editable_tree_status,
        text(12.0, color(154, 166, 184)),
        LayoutStyle::new().with_width_percent(1.0),
    );
    widgets::label(
        ui,
        body,
        "trees.virtual.title",
        "Virtualized tree",
        text(12.0, color(166, 176, 190)),
        LayoutStyle::new().with_width_percent(1.0),
    );
    let virtual_nodes = ext_widgets::virtualized_tree_view(
        ui,
        body,
        "trees.virtual",
        &virtual_tree_items(),
        &state.tree_virtual,
        ext_widgets::VirtualTreeViewSpec::new(24.0, 112.0)
            .scroll_offset(state.tree_virtual_scroll)
            .overscan_rows(1),
        ext_widgets::TreeViewOptions::default().with_row_action_prefix("trees.virtual"),
    );
    ui.node_mut(virtual_nodes.body)
        .set_action("trees.virtual.scroll");
    widgets::label(
        ui,
        body,
        "trees.table.title",
        "Tree table",
        text(12.0, color(166, 176, 190)),
        LayoutStyle::new().with_width_percent(1.0),
    );
    tree_table_widgets(ui, body, state);
}

fn tree_table_widgets(ui: &mut UiDocument, parent: UiNodeId, state: &ShowcaseState) {
    let rows = state.tree_table.visible_items(&tree_table_items());
    let columns = [
        ext_widgets::DataTableColumn::new("name", "Name", 220.0),
        ext_widgets::DataTableColumn::new("kind", "Kind", 84.0),
        ext_widgets::DataTableColumn::new("status", "Status", 92.0),
    ];
    let mut options = ext_widgets::DataTableOptions::default()
        .with_row_action_prefix("trees.table")
        .with_cell_action_prefix("trees.table")
        .with_scroll_action("trees.table.scroll");
    options.selection = state
        .tree_table
        .selected_index()
        .map(ext_widgets::DataTableSelection::single_row)
        .unwrap_or_default();
    options.layout = LayoutStyle::column()
        .with_width_percent(1.0)
        .with_height(132.0)
        .with_flex_shrink(0.0);
    ext_widgets::virtualized_data_table(
        ui,
        parent,
        "trees.table",
        &columns,
        ext_widgets::VirtualDataTableSpec {
            row_count: rows.len(),
            row_height: 24.0,
            viewport_width: 396.0,
            viewport_height: 96.0,
            scroll_offset: UiPoint::new(0.0, state.tree_table_scroll),
            overscan_rows: 1,
        },
        options,
        |ui, cell_parent, cell| {
            let Some(item) = rows.get(cell.row) else {
                return;
            };
            if cell.column == 0 {
                tree_table_name_cell(ui, cell_parent, cell.row, item);
            } else {
                widgets::label(
                    ui,
                    cell_parent,
                    format!("trees.table.cell.{}.{}.label", cell.row, cell.column),
                    tree_table_cell_value(item, cell.column),
                    text(12.0, color(220, 228, 238)),
                    LayoutStyle::new().with_width_percent(1.0),
                );
            }
        },
    );
}

fn tree_table_name_cell(
    ui: &mut UiDocument,
    parent: UiNodeId,
    row: usize,
    item: &ext_widgets::TreeVisibleItem,
) {
    if item.depth > 0 {
        ui.add_child(
            parent,
            UiNode::container(
                format!("trees.table.row.{}.indent", item.id),
                LayoutStyle::new()
                    .with_width(item.depth as f32 * 16.0)
                    .with_height_percent(1.0)
                    .with_flex_shrink(0.0),
            ),
        );
    }
    widgets::label(
        ui,
        parent,
        format!("trees.table.row.{}.disclosure", item.id),
        if item.has_children() {
            if item.expanded {
                "v"
            } else {
                ">"
            }
        } else {
            ""
        },
        text(12.0, color(166, 176, 190)),
        LayoutStyle::new()
            .with_width(18.0)
            .with_height_percent(1.0)
            .with_flex_shrink(0.0),
    );
    widgets::label(
        ui,
        parent,
        format!("trees.table.cell.{row}.0.label"),
        item.label.clone(),
        if item.disabled {
            text(12.0, color(154, 166, 184))
        } else {
            text(12.0, color(220, 228, 238))
        },
        LayoutStyle::new().with_width_percent(1.0),
    );
}

fn tree_table_cell_value(item: &ext_widgets::TreeVisibleItem, column: usize) -> String {
    match column {
        0 => item.label.clone(),
        1 => {
            if item.has_children() {
                "Folder".to_owned()
            } else {
                "File".to_owned()
            }
        }
        _ => {
            if item.disabled {
                "Locked".to_owned()
            } else if item.has_children() && item.expanded {
                "Expanded".to_owned()
            } else if item.has_children() {
                "Collapsed".to_owned()
            } else if item.expanded {
                "Expanded".to_owned()
            } else {
                "Ready".to_owned()
            }
        }
    }
}

fn tab_split_dock_widgets(ui: &mut UiDocument, parent: UiNodeId, state: &ShowcaseState) {
    let body = section_with_min_viewport(
        ui,
        parent,
        "layout_widgets",
        "Layout widgets",
        UiSize::new(640.0, 360.0),
    );
    let shell = ui.add_child(
        body,
        UiNode::container(
            "layout_widgets.dock_shell",
            LayoutStyle::column()
                .with_width_percent(1.0)
                .with_height(360.0)
                .with_flex_shrink(0.0),
        )
        .with_visual(UiVisual::panel(
            color(13, 17, 23),
            Some(StrokeStyle::new(color(54, 65, 80), 1.0)),
            0.0,
        )),
    );

    let mut panels = base_layout_dock_panels();
    state.layout_dock.apply_order_to_panels(&mut panels);
    state.layout_dock.apply_visibility_to_panels(&mut panels);

    let mut drawer_options = ext_widgets::DockDrawerRailOptions::default();
    drawer_options.layout = LayoutStyle::row()
        .with_width_percent(1.0)
        .with_height(34.0)
        .with_padding(4.0)
        .with_gap(4.0);
    ext_widgets::dock_drawer_rail(
        ui,
        shell,
        "layout_widgets.dock.drawers",
        &[
            ext_widgets::DockDrawerDescriptor::new(
                "panel_a",
                "Panel A",
                "panel_a",
                ext_widgets::DockSide::Left,
            )
            .open(!state.layout_dock.is_hidden("panel_a"))
            .with_action("layout_widgets.drawer.panel_a"),
            ext_widgets::DockDrawerDescriptor::new(
                "panel_b",
                "Panel B",
                "panel_b",
                ext_widgets::DockSide::Right,
            )
            .open(!state.layout_dock.is_hidden("panel_b"))
            .with_action("layout_widgets.drawer.panel_b"),
        ],
        drawer_options,
    );

    let mut options = ext_widgets::DockWorkspaceOptions::default();
    options.layout = LayoutStyle::column()
        .with_width_percent(1.0)
        .with_height(0.0)
        .with_flex_grow(1.0);
    options.show_titles = true;
    options.handle_thickness = 2.0;
    options.panel_visual = UiVisual::panel(
        color(18, 22, 29),
        Some(StrokeStyle::new(color(54, 65, 80), 1.0)),
        0.0,
    );
    options.center_visual = UiVisual::panel(
        color(15, 19, 25),
        Some(StrokeStyle::new(color(54, 65, 80), 1.0)),
        0.0,
    );
    options.resize_handle_visual = UiVisual::panel(color(65, 78, 96), None, 0.0);

    ext_widgets::dock_workspace(
        ui,
        shell,
        "layout_widgets.dock",
        &panels,
        options,
        |ui, parent, panel| match panel.id.as_str() {
            "panel_a" => layout_panel_contents(
                ui,
                parent,
                "layout.panel_a",
                state.layout_panel_a_scroll,
                &["Item 1", "Item 2", "Item 3", "Item 4", "Item 5", "Item 6"],
            ),
            "workspace" => layout_workspace_contents(
                ui,
                parent,
                "layout.workspace",
                state.layout_workspace_scroll,
            ),
            "panel_b" => layout_panel_contents(
                ui,
                parent,
                "layout.panel_b",
                state.layout_panel_b_scroll,
                &[
                    "Value A", "Value B", "Value C", "Value D", "Value E", "Value F",
                ],
            ),
            _ => {}
        },
    );

    if let Some(floating) = state.layout_dock.floating_panel("panel_a") {
        let floating_panel = ui.add_child(
            shell,
            UiNode::container(
                "layout_widgets.floating.panel_a",
                operad::layout::absolute(
                    floating.rect.x,
                    floating.rect.y,
                    floating.rect.width,
                    floating.rect.height,
                ),
            )
            .with_visual(UiVisual::panel(
                color(18, 22, 29),
                Some(StrokeStyle::new(color(86, 102, 124), 1.0)),
                4.0,
            )),
        );
        layout_panel_contents(
            ui,
            floating_panel,
            "layout.panel_a_floating",
            state.layout_panel_a_scroll,
            &["Item 1", "Item 2", "Item 3", "Item 4"],
        );
    }
}

fn base_layout_dock_panels() -> Vec<ext_widgets::DockPanelDescriptor> {
    vec![
        ext_widgets::DockPanelDescriptor::new(
            "panel_a",
            "Panel A",
            ext_widgets::DockSide::Left,
            200.0,
        )
        .with_min_size(150.0)
        .resizable(true),
        ext_widgets::DockPanelDescriptor::center("workspace", "Workspace").with_min_size(220.0),
        ext_widgets::DockPanelDescriptor::new(
            "panel_b",
            "Panel B",
            ext_widgets::DockSide::Right,
            200.0,
        )
        .with_min_size(150.0)
        .resizable(true),
    ]
}

fn container_widgets(ui: &mut UiDocument, parent: UiNodeId, state: &ShowcaseState) {
    let body = section_with_min_viewport(
        ui,
        parent,
        "containers",
        "Containers",
        UiSize::new(420.0, 0.0),
    );

    let frame = widgets::frame(
        ui,
        body,
        "containers.frame",
        widgets::FrameOptions::default().with_layout(
            LayoutStyle::column()
                .with_width_percent(1.0)
                .with_height(64.0)
                .with_padding(8.0)
                .with_gap(6.0),
        ),
    );
    widgets::strong_label(
        ui,
        frame,
        "containers.frame.title",
        "Frame",
        LayoutStyle::new().with_width_percent(1.0),
    );
    widgets::weak_label(
        ui,
        frame,
        "containers.frame.body",
        "Framed surface with padding.",
        LayoutStyle::new().with_width_percent(1.0),
    );

    let group = widgets::group(ui, body, "containers.group");
    widgets::label(
        ui,
        group,
        "containers.group.label",
        "Group helper",
        text(12.0, color(220, 228, 238)),
        LayoutStyle::new().with_width_percent(1.0),
    );
    let generic_panel = widgets::panel(
        ui,
        body,
        "containers.panel",
        widgets::PanelOptions::group().with_layout(
            LayoutStyle::column()
                .with_width_percent(1.0)
                .with_height(44.0)
                .with_padding(8.0),
        ),
    );
    widgets::label(
        ui,
        generic_panel,
        "containers.panel.label",
        "Generic panel",
        text(12.0, color(220, 228, 238)),
        LayoutStyle::new().with_width_percent(1.0),
    );
    let group_panel = widgets::group_panel(ui, body, "containers.group_panel");
    widgets::label(
        ui,
        group_panel,
        "containers.group_panel.label",
        "Group panel",
        text(12.0, color(220, 228, 238)),
        LayoutStyle::new().with_width_percent(1.0),
    );

    widgets::separator(
        ui,
        body,
        "containers.separator",
        widgets::SeparatorOptions::default(),
    );
    widgets::spacer(
        ui,
        body,
        "containers.spacer",
        LayoutStyle::new()
            .with_width_percent(1.0)
            .with_height(8.0)
            .with_flex_shrink(0.0),
    );

    let grid = widgets::grid::grid(
        ui,
        body,
        "containers.grid",
        widgets::grid::GridOptions::default().with_layout(
            LayoutStyle::column()
                .with_width_percent(1.0)
                .with_height(78.0)
                .with_gap(4.0),
        ),
    );
    for row_index in 0..2 {
        let row = widgets::grid::grid_row(
            ui,
            grid,
            format!("containers.grid.row.{row_index}"),
            widgets::grid::GridRowOptions::default(),
        );
        for column_index in 0..3 {
            widgets::grid::grid_text_cell(
                ui,
                row,
                format!("containers.grid.row.{row_index}.cell.{column_index}"),
                format!("R{} C{}", row_index + 1, column_index + 1),
                widgets::grid::GridCellOptions {
                    text_style: text(12.0, color(214, 224, 238)),
                    ..Default::default()
                },
            );
        }
    }

    widgets::sides(
        ui,
        body,
        "containers.sides",
        widgets::SidesOptions::default()
            .with_layout(LayoutStyle::row().with_width_percent(1.0).with_height(48.0))
            .with_gap(8.0)
            .with_visual(UiVisual::panel(
                color(20, 25, 32),
                Some(StrokeStyle::new(color(58, 68, 84), 1.0)),
                4.0,
            )),
        |ui, left| {
            widgets::label(
                ui,
                left,
                "containers.sides.left.label",
                "Left side",
                text(12.0, color(220, 228, 238)),
                LayoutStyle::new().with_width_percent(1.0),
            );
        },
        |ui, right| {
            widgets::label(
                ui,
                right,
                "containers.sides.right.label",
                "Right side",
                text(12.0, color(220, 228, 238)),
                LayoutStyle::new().with_width_percent(1.0),
            );
        },
    );

    widgets::columns(
        ui,
        body,
        "containers.columns",
        3,
        widgets::ColumnsOptions::default()
            .with_layout(LayoutStyle::row().with_width_percent(1.0).with_height(48.0))
            .with_gap(8.0),
        |ui, column, index| {
            widgets::label(
                ui,
                column,
                format!("containers.columns.{index}.label"),
                format!("Column {}", index + 1),
                text(12.0, color(220, 228, 238)),
                LayoutStyle::new().with_width_percent(1.0),
            );
        },
    );

    let indented = widgets::indented_section(
        ui,
        body,
        "containers.indented",
        widgets::IndentOptions::default().with_amount(24.0),
    );
    widgets::label(
        ui,
        indented,
        "containers.indented.label",
        "Indented section",
        text(12.0, color(196, 210, 230)),
        LayoutStyle::new().with_width_percent(1.0),
    );

    widgets::resize_container(
        ui,
        body,
        "containers.resize_container",
        widgets::ResizeContainerOptions::default().with_layout(
            LayoutStyle::column()
                .with_width_percent(1.0)
                .with_height(92.0)
                .with_flex_shrink(0.0),
        ),
        |ui, content| {
            widgets::label(
                ui,
                content,
                "containers.resize_container.label",
                "Resize container",
                text(12.0, color(220, 228, 238)),
                LayoutStyle::new().with_width_percent(1.0),
            );
        },
    );

    widgets::scene(
        ui,
        body,
        "containers.scene",
        vec![
            ScenePrimitive::Rect(
                PaintRect::solid(UiRect::new(8.0, 12.0, 108.0, 46.0), color(48, 112, 184))
                    .stroke(AlignedStroke::inside(StrokeStyle::new(
                        color(132, 174, 222),
                        1.0,
                    )))
                    .corner_radii(CornerRadii::uniform(6.0)),
            ),
            ScenePrimitive::Circle {
                center: UiPoint::new(150.0, 35.0),
                radius: 22.0,
                fill: color(111, 203, 159),
                stroke: Some(StrokeStyle::new(color(176, 236, 206), 1.0)),
            },
            ScenePrimitive::Line {
                from: UiPoint::new(188.0, 18.0),
                to: UiPoint::new(238.0, 52.0),
                stroke: StrokeStyle::new(color(232, 186, 88), 3.0),
            },
        ],
        widgets::SceneOptions::default()
            .with_layout(LayoutStyle::new().with_width(260.0).with_height(70.0))
            .accessibility_label("Scene primitives"),
    );

    widgets::scroll_container(
        ui,
        body,
        "containers.scroll_area_with_bars",
        state.containers_scroll,
        widgets::ScrollContainerOptions::default()
            .with_axes(ScrollAxes::VERTICAL)
            .with_layout(LayoutStyle::column().with_width(260.0).with_height(116.0))
            .with_viewport_layout(
                LayoutStyle::column()
                    .with_width(0.0)
                    .with_height_percent(1.0)
                    .with_flex_grow(1.0)
                    .with_flex_shrink(1.0),
            ),
        |ui, viewport| {
            for index in 0..5 {
                widgets::label(
                    ui,
                    viewport,
                    format!("containers.scroll_area_with_bars.row.{index}"),
                    format!("Scrollable row {}", index + 1),
                    text(12.0, color(200, 212, 228)),
                    LayoutStyle::new()
                        .with_width(232.0)
                        .with_height(28.0)
                        .with_flex_shrink(0.0),
                );
            }
        },
    );

    widgets::label(
        ui,
        body,
        "containers.area.title",
        "Absolute area",
        text(12.0, color(166, 176, 190)),
        LayoutStyle::new().with_width_percent(1.0),
    );
    let area_host = ui.add_child(
        body,
        UiNode::container(
            "containers.area.host",
            LayoutStyle::new()
                .with_width_percent(1.0)
                .with_height(82.0)
                .with_flex_shrink(0.0),
        )
        .with_visual(UiVisual::panel(
            color(17, 20, 25),
            Some(StrokeStyle::new(color(58, 68, 84), 1.0)),
            4.0,
        )),
    );
    widgets::container::area(
        ui,
        area_host,
        "containers.area",
        widgets::container::AreaOptions::new(UiRect::new(14.0, 14.0, 180.0, 44.0))
            .with_visual(UiVisual::panel(color(39, 72, 109), None, 4.0))
            .accessibility_label("Absolute positioned area"),
        |ui, area| {
            widgets::label(
                ui,
                area,
                "containers.area.label",
                "Area",
                text(12.0, color(238, 244, 252)),
                LayoutStyle::new().with_width_percent(1.0),
            );
        },
    );
}

fn panel_widgets(ui: &mut UiDocument, parent: UiNodeId, state: &ShowcaseState) {
    let body = section_with_min_viewport(ui, parent, "panels", "Panels", UiSize::new(520.0, 320.0));
    widgets::label(
        ui,
        body,
        "panels.title",
        "Drag the split bars to resize the docked panels.",
        text(12.0, color(166, 176, 190)),
        LayoutStyle::new().with_width_percent(1.0),
    );
    let shell = widgets::frame(
        ui,
        body,
        "panels.shell",
        widgets::FrameOptions::default().with_layout(
            LayoutStyle::column()
                .with_width_percent(1.0)
                .with_height(260.0)
                .with_flex_grow(1.0)
                .with_padding(0.0)
                .with_gap(0.0),
        ),
    );
    ext_widgets::split_pane(
        ui,
        shell,
        "panels.top_split",
        ext_widgets::SplitAxis::Vertical,
        state.panels_top_split,
        panel_split_options("panels.resize.top"),
        |ui, top| {
            panel_region(
                ui,
                top,
                "panels.top",
                widgets::PanelKind::Top,
                "Top",
                "Header controls",
            );
        },
        |ui, lower| {
            ext_widgets::split_pane(
                ui,
                lower,
                "panels.bottom_split",
                ext_widgets::SplitAxis::Vertical,
                state.panels_bottom_split,
                panel_split_options("panels.resize.bottom"),
                |ui, middle| {
                    ext_widgets::split_pane(
                        ui,
                        middle,
                        "panels.left_split",
                        ext_widgets::SplitAxis::Horizontal,
                        state.panels_left_split,
                        panel_split_options("panels.resize.left"),
                        |ui, left| {
                            panel_region(
                                ui,
                                left,
                                "panels.left",
                                widgets::PanelKind::Left,
                                "Left",
                                "Navigation",
                            );
                        },
                        |ui, center_and_right| {
                            ext_widgets::split_pane(
                                ui,
                                center_and_right,
                                "panels.right_split",
                                ext_widgets::SplitAxis::Horizontal,
                                state.panels_right_split,
                                panel_split_options("panels.resize.right"),
                                |ui, center| {
                                    panel_region(
                                        ui,
                                        center,
                                        "panels.center",
                                        widgets::PanelKind::Central,
                                        "Central",
                                        "Primary workspace",
                                    );
                                },
                                |ui, right| {
                                    panel_region(
                                        ui,
                                        right,
                                        "panels.right",
                                        widgets::PanelKind::Right,
                                        "Right",
                                        "Inspector",
                                    );
                                },
                            );
                        },
                    );
                },
                |ui, bottom| {
                    panel_region(
                        ui,
                        bottom,
                        "panels.bottom",
                        widgets::PanelKind::Bottom,
                        "Bottom",
                        "Status and output",
                    );
                },
            );
        },
    );
}

fn panel_split_options(action: &'static str) -> ext_widgets::SplitPaneOptions {
    let mut options = ext_widgets::SplitPaneOptions::default().with_handle_action(action);
    options.handle_thickness = PANELS_SPLIT_HANDLE_THICKNESS;
    options.handle_visual = UiVisual::panel(color(58, 70, 88), None, 0.0);
    options.handle_hover_visual = Some(UiVisual::panel(color(100, 172, 244), None, 0.0));
    options
}

fn panel_region(
    ui: &mut UiDocument,
    parent: UiNodeId,
    name: &'static str,
    kind: widgets::PanelKind,
    title: &'static str,
    detail: &'static str,
) -> UiNodeId {
    let panel = widgets::panel(
        ui,
        parent,
        name,
        widgets::PanelOptions {
            kind,
            layout: LayoutStyle::column()
                .with_width_percent(1.0)
                .with_height_percent(1.0)
                .with_padding(10.0)
                .with_gap(6.0),
            visual: UiVisual::panel(
                color(18, 23, 31),
                Some(StrokeStyle::new(color(66, 80, 98), 1.0)),
                0.0,
            ),
            accessibility_label: Some(title.to_string()),
            ..Default::default()
        },
    );
    widgets::label(
        ui,
        panel,
        format!("{name}.label"),
        title,
        text(13.0, color(232, 240, 250)),
        LayoutStyle::new().with_width_percent(1.0),
    );
    widgets::label(
        ui,
        panel,
        format!("{name}.detail"),
        detail,
        text(11.0, color(154, 166, 184)),
        LayoutStyle::new().with_width_percent(1.0),
    );
    panel
}

fn form_widgets(ui: &mut UiDocument, parent: UiNodeId, state: &ShowcaseState) {
    let body = section_with_min_viewport(ui, parent, "forms", "Forms", UiSize::new(390.0, 0.0));
    let section = widgets::form_section(
        ui,
        body,
        "forms.profile",
        None::<String>,
        widgets::FormSectionOptions::default().with_layout(
            LayoutStyle::column()
                .with_width_percent(1.0)
                .with_padding(12.0)
                .with_gap(10.0),
        ),
    );
    profile_form_summary(ui, section.root, state);

    let status_row = wrapping_row(ui, section.root, "forms.profile.status_flags", 6.0);
    form_status_chip(
        ui,
        status_row,
        "forms.profile.status.dirty",
        "dirty",
        state.form.dirty,
    );
    form_status_chip(
        ui,
        status_row,
        "forms.profile.status.pending",
        "pending",
        state.form.pending,
    );
    form_status_chip(
        ui,
        status_row,
        "forms.profile.status.submitted",
        "submitted",
        state.form.submitted,
    );

    let mut name_options = widgets::FormRowOptions::default().required();
    if state.form_name_text.text().trim().is_empty() {
        name_options = name_options.invalid("Name is required");
    }
    let name = widgets::form_row(ui, section.root, "forms.profile.name", name_options);
    widgets::field_label(
        ui,
        name,
        "forms.profile.name.label",
        "Name",
        widgets::FieldLabelOptions::default().required(),
    );
    form_text_field(
        ui,
        name,
        "forms.profile.name.input",
        &state.form_name_text,
        FocusedTextInput::FormName,
        state,
    );
    if state.form_name_text.text().trim().is_empty() {
        widgets::field_validation_message(
            ui,
            name,
            "forms.profile.name.validation",
            ValidationMessage::error("Name is required"),
            widgets::ValidationMessageOptions::default(),
        );
    } else {
        widgets::field_help_text(
            ui,
            name,
            "forms.profile.name.help",
            "Shown in window titles and project lists.",
            widgets::FieldHelpOptions::default(),
        );
    }

    let mut email_options = widgets::FormRowOptions::default().required();
    if !profile_email_valid(state.form_email_text.text()) {
        email_options = email_options.invalid("Use a complete email address");
    }
    let email = widgets::form_row(ui, section.root, "forms.profile.email", email_options);
    widgets::field_label(
        ui,
        email,
        "forms.profile.email.label",
        "Email",
        widgets::FieldLabelOptions::default().required(),
    );
    form_text_field(
        ui,
        email,
        "forms.profile.email.input",
        &state.form_email_text,
        FocusedTextInput::FormEmail,
        state,
    );
    if profile_email_valid(state.form_email_text.text()) {
        widgets::field_help_text(
            ui,
            email,
            "forms.profile.email.help",
            "Used for workspace invites and notifications.",
            widgets::FieldHelpOptions::default(),
        );
    } else {
        widgets::field_validation_message(
            ui,
            email,
            "forms.profile.email.validation",
            ValidationMessage::error("Use a complete email address"),
            widgets::ValidationMessageOptions::default(),
        );
    }

    let role = widgets::form_row(
        ui,
        section.root,
        "forms.profile.role",
        widgets::FormRowOptions::default(),
    );
    widgets::field_label(
        ui,
        role,
        "forms.profile.role.label",
        "Role",
        widgets::FieldLabelOptions::default(),
    );
    form_text_field(
        ui,
        role,
        "forms.profile.role.input",
        &state.form_role_text,
        FocusedTextInput::FormRole,
        state,
    );
    widgets::field_validation_message(
        ui,
        role,
        "forms.profile.role.help",
        if state.form_role_text.text().trim().is_empty() {
            ValidationMessage::warning("Role can be added later")
        } else {
            ValidationMessage::info(
                "Form rows compose labels, controls, help, and validation text.",
            )
        },
        widgets::ValidationMessageOptions::default(),
    );

    let newsletter = widgets::form_row(
        ui,
        section.root,
        "forms.profile.newsletter",
        widgets::FormRowOptions::default().with_accessibility_label("Newsletter preference"),
    );
    let mut newsletter_options =
        widgets::CheckboxOptions::default().with_action("forms.profile.newsletter.toggle");
    newsletter_options.layout = LayoutStyle::new().with_width_percent(1.0).with_height(30.0);
    newsletter_options.text_style = text(12.0, color(220, 228, 238));
    widgets::checkbox(
        ui,
        newsletter,
        "forms.profile.newsletter.input",
        "Send release notes",
        state.form_newsletter,
        newsletter_options,
    );
    widgets::field_help_text(
        ui,
        newsletter,
        "forms.profile.newsletter.help",
        "Checkboxes participate in the same form state as text fields.",
        widgets::FieldHelpOptions::default(),
    );

    widgets::form_error_summary(
        ui,
        section.root,
        "forms.profile.errors",
        &state.form,
        widgets::FormErrorSummaryOptions::default(),
    );
    widgets::label(
        ui,
        section.root,
        "forms.profile.action_help",
        "Apply changes saves this draft and keeps editing. Submit profile saves and marks it submitted.",
        text(11.0, color(154, 166, 184)),
        LayoutStyle::new().with_width_percent(1.0),
    );
    let action_layout = Layout::row()
        .size(LayoutSize::new(
            LayoutDimension::percent(1.0),
            LayoutDimension::Auto,
        ))
        .gap(LayoutGap::points(8.0, 8.0))
        .flex_wrap(LayoutFlexWrap::Wrap)
        .to_layout_style();
    widgets::form_action_buttons(
        ui,
        section.root,
        "forms.profile.actions",
        &state.form,
        widgets::FormActionButtonsOptions::default()
            .with_layout(action_layout)
            .with_labels(widgets::FormActionLabels {
                submit: "Submit profile".to_string(),
                apply: "Apply changes".to_string(),
                cancel: "Cancel".to_string(),
                reset: "Reset".to_string(),
            })
            .include_reset(true)
            .with_action_prefix("forms.profile"),
    );
    widgets::label(
        ui,
        section.root,
        "forms.profile.status",
        format!("Status: {}", state.form_status),
        text(11.0, color(154, 166, 184)),
        LayoutStyle::new().with_width_percent(1.0),
    );
}

fn overlay_widgets(ui: &mut UiDocument, parent: UiNodeId, state: &ShowcaseState) {
    let body =
        section_with_min_viewport(ui, parent, "overlays", "Overlays", UiSize::new(420.0, 0.0));
    let header = widgets::collapsing_header(
        ui,
        body,
        "overlays.collapsing",
        "Collapsing header",
        widgets::CollapsingHeaderOptions::default()
            .expanded(state.overlay_expanded)
            .with_toggle_action("overlays.collapsing.toggle"),
    );
    if let Some(panel) = header.body {
        widgets::label(
            ui,
            panel,
            "overlays.collapsing.body_text",
            "Expanded content lives under the header and remains part of normal layout.",
            text(12.0, color(196, 210, 230)),
            LayoutStyle::new().with_width_percent(1.0),
        );
    }

    let controls = wrapping_row(ui, body, "overlays.controls", 8.0);
    let tooltip_visual = button_visual(58, 78, 96);
    let mut tooltip_options = widgets::ButtonOptions::new(LayoutStyle::new().with_height(32.0));
    tooltip_options.visual = tooltip_visual;
    tooltip_options.hovered_visual = Some(readable_button_hover_visual(tooltip_visual));
    tooltip_options.pressed_visual = Some(adjusted_button_visual(tooltip_visual, -62));
    tooltip_options.pressed_hovered_visual = Some(adjusted_button_visual(tooltip_visual, -24));
    tooltip_options.text_style = text(13.0, color(246, 249, 252));
    let tooltip_target = widgets::button(
        ui,
        controls,
        "overlays.tooltip_target",
        "Tooltip target",
        tooltip_options,
    );
    ui.node_mut(tooltip_target).set_tooltip(
        TooltipContent::new("Tooltip")
            .body("Tooltips render as overlay surfaces anchored to a target.")
            .shortcut_label("Ctrl+K")
            .disabled_reason("Disabled reasons can be announced without changing the trigger."),
    );
    ui.node_mut(tooltip_target)
        .set_tooltip_placement(TooltipPlacement::Below);
    ui.node_mut(tooltip_target)
        .set_tooltip_size(UiSize::new(240.0, 148.0));
    button(
        ui,
        controls,
        "overlays.popup.toggle",
        if state.overlay_popup_open {
            "Close popup"
        } else {
            "Open popup"
        },
        "overlays.popup.toggle",
        button_visual(48, 112, 184),
    );
    button(
        ui,
        controls,
        "overlays.modal.open",
        "Open modal",
        "overlays.modal.open",
        button_visual(58, 78, 96),
    );

    widgets::label(
        ui,
        body,
        "overlays.tooltip_rect.label",
        "A right-edge target keeps its tooltip inside the preview.",
        text(12.0, color(166, 176, 190)),
        LayoutStyle::new().with_width_percent(1.0),
    );
    let preview_viewport = UiRect::new(0.0, 0.0, 420.0, 112.0);
    let tooltip_target = UiRect::new(328.0, 42.0, 64.0, 28.0);
    let tooltip_size = UiSize::new(176.0, 58.0);
    let placed_tooltip = widgets::tooltip::tooltip_rect(
        tooltip_target,
        tooltip_size,
        preview_viewport,
        TooltipPlacement::Right,
        8.0,
        None,
    );
    let clamped_preview = ui.add_child(
        body,
        UiNode::container(
            "overlays.tooltip_rect.preview",
            LayoutStyle::new()
                .with_width_percent(1.0)
                .with_height(112.0)
                .with_flex_shrink(0.0),
        )
        .with_visual(UiVisual::panel(
            color(12, 16, 22),
            Some(StrokeStyle::new(color(52, 64, 80), 1.0)),
            4.0,
        )),
    );
    ui.add_child(
        clamped_preview,
        UiNode::scene(
            "overlays.tooltip_rect.scene",
            vec![
                ScenePrimitive::Line {
                    from: UiPoint::new(placed_tooltip.right() + 2.0, placed_tooltip.y + 29.0),
                    to: UiPoint::new(tooltip_target.x - 2.0, tooltip_target.y + 14.0),
                    stroke: StrokeStyle::new(color(92, 106, 128), 1.0),
                },
                ScenePrimitive::Rect(
                    PaintRect::solid(placed_tooltip, color(24, 29, 38))
                        .stroke(AlignedStroke::inside(StrokeStyle::new(
                            color(92, 106, 128),
                            1.0,
                        )))
                        .corner_radii(CornerRadii::uniform(4.0)),
                ),
                ScenePrimitive::Text(
                    PaintText::new(
                        "Tooltip",
                        UiRect::new(
                            placed_tooltip.x + 12.0,
                            placed_tooltip.y + 9.0,
                            placed_tooltip.width - 24.0,
                            18.0,
                        ),
                        text(12.0, color(225, 233, 244)),
                    )
                    .multiline(false),
                ),
                ScenePrimitive::Text(
                    PaintText::new(
                        "Placed inside",
                        UiRect::new(
                            placed_tooltip.x + 12.0,
                            placed_tooltip.y + 31.0,
                            placed_tooltip.width - 24.0,
                            18.0,
                        ),
                        text(10.0, color(156, 170, 190)),
                    )
                    .multiline(false),
                ),
                ScenePrimitive::Rect(
                    PaintRect::solid(tooltip_target, color(48, 112, 184))
                        .stroke(AlignedStroke::inside(StrokeStyle::new(
                            color(132, 190, 255),
                            1.0,
                        )))
                        .corner_radii(CornerRadii::uniform(3.0)),
                ),
                ScenePrimitive::Text(
                    PaintText::new("Target", tooltip_target, text(10.0, color(240, 247, 255)))
                        .horizontal_align(TextHorizontalAlign::Center)
                        .vertical_align(TextVerticalAlign::Center)
                        .multiline(false),
                ),
            ],
            LayoutStyle::new()
                .with_width_percent(1.0)
                .with_height_percent(1.0),
        ),
    );

    widgets::label(
        ui,
        body,
        "overlays.popup.label",
        "Popup panel",
        text(12.0, color(166, 176, 190)),
        LayoutStyle::new().with_width_percent(1.0),
    );
    widgets::label(
        ui,
        body,
        "overlays.popup.status",
        if state.overlay_popup_open {
            "Popup overlay is open."
        } else {
            "Popup overlay is closed."
        },
        text(12.0, color(196, 210, 230)),
        LayoutStyle::new().with_width_percent(1.0),
    );
    let popup_host_layout = if state.overlay_popup_open {
        LayoutStyle::column()
            .with_width_percent(1.0)
            .with_height(128.0)
            .with_flex_shrink(0.0)
    } else {
        LayoutStyle::column()
            .with_width_percent(1.0)
            .with_padding(10.0)
            .with_flex_shrink(0.0)
    };
    let popup_host = ui.add_child(
        body,
        UiNode::container("overlays.popup.host", popup_host_layout).with_visual(UiVisual::panel(
            color(12, 16, 22),
            Some(StrokeStyle::new(color(52, 64, 80), 1.0)),
            4.0,
        )),
    );
    if state.overlay_popup_open {
        let popup = ext_widgets::popup_panel(
            ui,
            popup_host,
            "overlays.popup_panel",
            UiRect::new(10.0, 10.0, 220.0, 104.0),
            ext_widgets::PopupOptions {
                z_index: 4,
                portal: UiPortalTarget::Parent,
                accessibility: Some(
                    AccessibilityMeta::new(AccessibilityRole::Dialog).label("Popup preview"),
                ),
                ..Default::default()
            },
        );
        let popup_body = ui.add_child(
            popup,
            UiNode::container(
                "overlays.popup_panel.body",
                LayoutStyle::column()
                    .with_width_percent(1.0)
                    .with_height_percent(1.0)
                    .with_padding(10.0)
                    .with_gap(6.0),
            ),
        );
        let popup_header = row(ui, popup_body, "overlays.popup_panel.header", 8.0);
        widgets::label(
            ui,
            popup_header,
            "overlays.popup_panel.label",
            "Popup panel",
            text(12.0, color(220, 228, 238)),
            LayoutStyle::new().with_width_percent(1.0),
        );
        let mut close = widgets::ButtonOptions::new(LayoutStyle::size(26.0, 22.0))
            .with_action("overlays.popup.close");
        close.visual = UiVisual::panel(color(28, 34, 43), None, 3.0);
        close.hovered_visual = Some(button_visual(54, 70, 92));
        close.text_style = text(12.0, color(220, 228, 238));
        widgets::button(ui, popup_header, "overlays.popup_panel.close", "x", close);
        widgets::label(
            ui,
            popup_body,
            "overlays.popup_panel.body_text",
            "Popup content is conditionally rendered.",
            text(11.0, color(196, 210, 230)),
            LayoutStyle::new().with_width_percent(1.0),
        );
    } else {
        widgets::label(
            ui,
            popup_host,
            "overlays.popup.empty",
            "Open the popup to render an overlay inside this host.",
            text(12.0, color(154, 166, 184)),
            LayoutStyle::new().with_width_percent(1.0),
        );
    }

    widgets::label(
        ui,
        body,
        "overlays.toasts.label",
        "Toasts",
        text(12.0, color(166, 176, 190)),
        LayoutStyle::new().with_width_percent(1.0),
    );
    let toast_controls = row(ui, body, "overlays.toasts.controls", 10.0);
    button(
        ui,
        toast_controls,
        "overlays.toasts.show",
        "Show toast",
        "toast.show",
        button_visual(48, 112, 184),
    );
    button(
        ui,
        toast_controls,
        "overlays.toasts.hide",
        "Hide",
        "toast.hide",
        button_visual(58, 78, 96),
    );
    widgets::label(
        ui,
        body,
        "overlays.toasts.status",
        if state.toast_visible {
            "Toast overlay is visible."
        } else {
            "Toast overlay is hidden."
        },
        text(12.0, color(196, 210, 230)),
        LayoutStyle::new().with_width_percent(1.0),
    );
    widgets::label(
        ui,
        body,
        "overlays.toasts.action_status",
        format!("Action: {}", state.toast_action_status),
        text(12.0, color(154, 166, 184)),
        LayoutStyle::new().with_width_percent(1.0),
    );

    if state.overlay_modal_open {
        let modal = widgets::modal_dialog(
            ui,
            parent,
            "overlays.modal",
            "Modal dialog",
            widgets::ModalDialogOptions::default()
                .with_size(320.0, 180.0)
                .with_close_action("overlays.modal.close")
                .with_dismissal(ext_widgets::DialogDismissal::MODAL)
                .with_focus_restore(FocusRestoreTarget::Previous),
        );
        widgets::label(
            ui,
            modal.body,
            "overlays.modal.body.text",
            "Modal dialogs are portaled to the application overlay, include a scrim, and trap focus.",
            text(12.0, color(220, 228, 238)),
            LayoutStyle::new().with_width_percent(1.0),
        );
        button(
            ui,
            modal.body,
            "overlays.modal.body.close",
            "Close modal",
            "overlays.modal.close",
            button_visual(48, 112, 184),
        );
    }
}

fn drag_drop_widgets(ui: &mut UiDocument, parent: UiNodeId, state: &ShowcaseState) {
    let body = section_with_min_viewport(
        ui,
        parent,
        "drag_drop",
        "Drag and drop",
        UiSize::new(420.0, 0.0),
    );
    widgets::label(
        ui,
        body,
        "drag_drop.sources.label",
        "Drag sources",
        text(12.0, color(166, 176, 190)),
        LayoutStyle::new().with_width_percent(1.0),
    );
    let sources = wrapping_row(ui, body, "drag_drop.sources", 8.0);
    widgets::dnd_drag_source(
        ui,
        sources,
        "drag_drop.text_source",
        "Text payload",
        DragPayload::text("Operad payload"),
        widgets::DragSourceOptions::default()
            .with_layout(drag_source_layout())
            .with_kind(DragDropSurfaceKind::ListRow)
            .with_allowed_operations([DragOperation::Copy, DragOperation::Move])
            .with_action("drag_drop.text_source")
            .with_accessibility_hint("Start a text drag operation"),
    );
    widgets::dnd_drag_source(
        ui,
        sources,
        "drag_drop.file_source",
        "File payload",
        DragPayload::files(["/tmp/showcase.scene"]),
        widgets::DragSourceOptions::default()
            .with_layout(drag_source_layout())
            .with_kind(DragDropSurfaceKind::Asset)
            .with_drag_image_policy(widgets::DragImagePolicy::image_key(
                BuiltInIcon::Folder.key(),
                UiSize::new(120.0, 36.0),
                UiPoint::new(10.0, 10.0),
            ))
            .with_allowed_operations([DragOperation::Copy])
            .with_action("drag_drop.file_source"),
    );
    widgets::dnd_drag_source(
        ui,
        sources,
        "drag_drop.bytes_source",
        "Image bytes",
        DragPayload::bytes(DragBytes::new("image/png", vec![137, 80, 78, 71]).name("sprite.png")),
        widgets::DragSourceOptions::default()
            .with_layout(drag_source_layout())
            .with_kind(DragDropSurfaceKind::Asset)
            .with_action("drag_drop.bytes_source")
            .without_drag_image(),
    );

    widgets::label(
        ui,
        body,
        "drag_drop.zones.label",
        "Drop zones",
        text(12.0, color(166, 176, 190)),
        LayoutStyle::new().with_width_percent(1.0),
    );
    let zones = wrapping_row(ui, body, "drag_drop.zones", 8.0);
    let accepted_options = widgets::DropZoneOptions::default()
        .with_layout(drop_zone_layout())
        .with_kind(DragDropSurfaceKind::EditorSurface)
        .with_accepted_payload(DropPayloadFilter::empty().text())
        .with_accepted_operations([DragOperation::Copy, DragOperation::Move])
        .with_action("drag_drop.accept_text")
        .with_accessibility_hint("Accepts text payloads");
    let accepted = widgets::dnd_drop_zone(
        ui,
        zones,
        "drag_drop.accept_text",
        "Text accepted",
        accepted_options.clone(),
    );
    widgets::drag_drop::dnd_apply_drop_zone_preview(
        ui,
        accepted.root,
        &accepted_options,
        widgets::drag_drop::DropZonePreviewState::Accepted,
    );

    let rejected_options = widgets::DropZoneOptions::default()
        .with_layout(drop_zone_layout())
        .with_kind(DragDropSurfaceKind::Asset)
        .with_accepted_payload(DropPayloadFilter::empty().files())
        .with_action("drag_drop.files_only");
    let rejected = widgets::dnd_drop_zone(
        ui,
        zones,
        "drag_drop.files_only",
        "Files only",
        rejected_options.clone(),
    );
    widgets::drag_drop::dnd_apply_drop_zone_preview(
        ui,
        rejected.root,
        &rejected_options,
        widgets::drag_drop::DropZonePreviewState::Rejected,
    );
    let image_options = widgets::DropZoneOptions::default()
        .with_layout(drop_zone_layout())
        .with_kind(DragDropSurfaceKind::Asset)
        .with_accepted_payload(DropPayloadFilter::empty().mime_type("image/*"))
        .with_accepted_operations([DragOperation::Copy])
        .with_action("drag_drop.image_bytes");
    let image_zone = widgets::dnd_drop_zone(
        ui,
        zones,
        "drag_drop.image_bytes",
        "Image bytes",
        image_options.clone(),
    );
    widgets::drag_drop::dnd_apply_drop_zone_preview(
        ui,
        image_zone.root,
        &image_options,
        widgets::drag_drop::DropZonePreviewState::Hovered,
    );

    let disabled_options = widgets::DropZoneOptions::default()
        .with_layout(drop_zone_layout())
        .with_kind(DragDropSurfaceKind::EditorSurface)
        .with_accepted_payload(DropPayloadFilter::any())
        .with_action("drag_drop.disabled")
        .disabled();
    let disabled_zone = widgets::dnd_drop_zone(
        ui,
        zones,
        "drag_drop.disabled",
        "Disabled",
        disabled_options.clone(),
    );
    widgets::drag_drop::dnd_apply_drop_zone_preview(
        ui,
        disabled_zone.root,
        &disabled_options,
        widgets::drag_drop::DropZonePreviewState::Disabled,
    );

    let operation_row = wrapping_row(ui, body, "drag_drop.operations", 6.0);
    dnd_operation_chip(ui, operation_row, "drag_drop.operation.copy", "copy");
    dnd_operation_chip(ui, operation_row, "drag_drop.operation.move", "move");
    dnd_operation_chip(ui, operation_row, "drag_drop.operation.link", "link");
    widgets::label(
        ui,
        body,
        "drag_drop.status",
        format!("Status: {}", state.drag_drop_status),
        text(11.0, color(154, 166, 184)),
        LayoutStyle::new().with_width_percent(1.0),
    );
}

fn media_widgets(ui: &mut UiDocument, parent: UiNodeId, state: &ShowcaseState) {
    let body = section_with_min_viewport(
        ui,
        parent,
        "media",
        "Media",
        UiSize::new(MEDIA_ICON_TILE_WIDTH, 0.0),
    );
    widgets::label(
        ui,
        body,
        "media.icons.label",
        "Built-in icons",
        text(12.0, color(166, 176, 190)),
        LayoutStyle::new().with_width_percent(1.0),
    );
    let icon_columns = media_icon_columns(state);
    let icons = media_icon_grid(
        ui,
        body,
        "media.icons",
        icon_columns,
        BuiltInIcon::COMMON.len(),
    );
    for icon in BuiltInIcon::COMMON {
        media_icon_tile(ui, icons, icon);
    }

    widgets::label(
        ui,
        body,
        "media.variants.label",
        "Image variants",
        text(12.0, color(166, 176, 190)),
        LayoutStyle::new().with_width_percent(1.0),
    );
    let variants = wrapping_row(ui, body, "media.variants", 10.0);
    widgets::image(
        ui,
        variants,
        "media.image.user_png",
        ImageContent::from(ImageHandle::app(SHOWCASE_USER_IMAGE_KEY)),
        widgets::ImageOptions::default()
            .with_layout(media_preview_image_layout())
            .with_accessibility_label("User supplied PNG image"),
    );
    widgets::image(
        ui,
        variants,
        "media.image.untinted",
        icon_image(BuiltInIcon::Play),
        widgets::ImageOptions::default()
            .with_layout(media_preview_image_layout())
            .with_accessibility_label("Untinted play icon"),
    );
    widgets::image(
        ui,
        variants,
        "media.image.warning",
        ImageContent::new(BuiltInIcon::Warning.key()).tinted(color(232, 186, 88)),
        widgets::ImageOptions::default()
            .with_layout(media_preview_image_layout())
            .with_accessibility_label("Tinted warning icon"),
    );
    widgets::image(
        ui,
        variants,
        "media.image.shader",
        ImageContent::new(BuiltInIcon::Grid.key()).tinted(color(118, 183, 255)),
        widgets::ImageOptions::default()
            .with_layout(media_preview_image_layout())
            .with_shader(ShaderEffect::tint(color(169, 119, 255), 0.65))
            .with_accessibility_label("Shader-decorated grid icon"),
    );
}

fn shader_effect_widgets(ui: &mut UiDocument, parent: UiNodeId, state: &ShowcaseState) {
    let body = section_with_min_viewport(
        ui,
        parent,
        "shaders",
        "Shader effects",
        UiSize::new(420.0, 280.0),
    );
    widgets::label(
        ui,
        body,
        "shaders.effects.label",
        "Built-in effects",
        text(12.0, color(166, 176, 190)),
        LayoutStyle::new().with_width_percent(1.0),
    );
    let phase = (state.progress_phase / std::f32::consts::TAU).fract();
    let previews = wrapping_row(ui, body, "shaders.effects", 10.0);
    shader_effect_preview_card(ui, previews, "base", "Base", None);
    shader_effect_preview_card(
        ui,
        previews,
        "tint",
        "Tint",
        Some(ShaderEffect::tint(color(252, 186, 90), 0.72)),
    );
    shader_effect_preview_card(
        ui,
        previews,
        "shine",
        "Shine",
        Some(ShaderEffect::shine(phase, 0.55).uniform("width", 0.14)),
    );
    shader_effect_preview_card(
        ui,
        previews,
        "glow",
        "Glow",
        Some(ShaderEffect::glow(color(118, 183, 255), 0.9, 7.0)),
    );

    widgets::label(
        ui,
        body,
        "shaders.widgets.label",
        "Applied to widgets",
        text(12.0, color(166, 176, 190)),
        LayoutStyle::new().with_width_percent(1.0),
    );
    let panel = ui.add_child(
        body,
        UiNode::container(
            "shaders.widgets",
            LayoutStyle::column()
                .with_width_percent(1.0)
                .with_padding(10.0)
                .with_gap(10.0)
                .with_flex_shrink(0.0),
        )
        .with_visual(UiVisual::panel(
            color(13, 18, 25),
            Some(StrokeStyle::new(color(48, 61, 78), 1.0)),
            4.0,
        )),
    );
    let control_row = wrapping_row(ui, panel, "shaders.widgets.controls", 10.0);
    let mut shine_button = widgets::ButtonOptions::new(
        LayoutStyle::new()
            .with_width(150.0)
            .with_height(34.0)
            .with_flex_shrink(0.0),
    );
    shine_button.leading_image = Some(icon_image(BuiltInIcon::Settings));
    shine_button.image_shader = Some(ShaderEffect::tint(color(111, 203, 159), 0.85));
    shine_button.shader = Some(ShaderEffect::shine(phase, 0.45).uniform("width", 0.12));
    widgets::button(
        ui,
        control_row,
        "shaders.widgets.button",
        "Shine button",
        shine_button,
    );

    widgets::checkbox_with_state(
        ui,
        control_row,
        "shaders.widgets.checkbox",
        "Glow check",
        widgets::CheckboxState::Checked,
        widgets::CheckboxOptions::default()
            .with_check_color(color(118, 183, 255))
            .with_check_shader(ShaderEffect::glow(color(118, 183, 255), 1.0, 4.0)),
    );

    let progress_value = smooth_loop(state.progress_phase * 0.8, 0.2) * 100.0;
    let mut progress = ext_widgets::ProgressIndicatorOptions::default();
    progress.layout = LayoutStyle::new().with_width_percent(1.0).with_height(12.0);
    progress.fill_visual = UiVisual::panel(color(111, 203, 159), None, 4.0);
    progress.fill_shader = Some(ShaderEffect::shine(phase, 0.5).uniform("width", 0.16));
    progress.accessibility_label = Some("Shadered progress fill".to_string());
    ext_widgets::progress_indicator(
        ui,
        panel,
        "shaders.widgets.progress",
        ext_widgets::ProgressIndicatorValue::percent(progress_value),
        progress,
    );

    let mut slider_options = widgets::SliderOptions::default();
    slider_options.layout = LayoutStyle::new()
        .with_width_percent(1.0)
        .with_height(28.0)
        .with_flex_shrink(0.0);
    slider_options.fill_shader = Some(ShaderEffect::tint(color(169, 119, 255), 0.55));
    slider_options.thumb_shader = Some(ShaderEffect::glow(color(252, 186, 90), 0.9, 4.0));
    slider_options.accessibility_label = Some("Shadered slider".to_string());
    widgets::slider(
        ui,
        panel,
        "shaders.widgets.slider",
        smooth_loop(state.progress_phase * 0.6, 0.4),
        0.0..1.0,
        slider_options,
    );
}

fn shader_effect_preview_card(
    ui: &mut UiDocument,
    parent: UiNodeId,
    name: &'static str,
    label: &'static str,
    shader: Option<ShaderEffect>,
) {
    let tile = ui.add_child(
        parent,
        UiNode::container(
            format!("shaders.effect_tile.{name}"),
            LayoutStyle::column()
                .with_width(96.0)
                .with_height(104.0)
                .with_padding(8.0)
                .with_gap(8.0)
                .with_flex_shrink(0.0),
        )
        .with_visual(UiVisual::panel(
            color(17, 22, 30),
            Some(StrokeStyle::new(color(50, 62, 78), 1.0)),
            4.0,
        ))
        .with_accessibility(AccessibilityMeta::new(AccessibilityRole::Group).label(label)),
    );
    let mut swatch = UiNode::container(
        format!("shaders.effect.{name}.swatch"),
        LayoutStyle::new()
            .with_width_percent(1.0)
            .with_height(50.0)
            .with_flex_shrink(0.0),
    )
    .with_visual(UiVisual::panel(
        color(64, 109, 194),
        Some(StrokeStyle::new(color(138, 164, 194), 1.0)),
        8.0,
    ));
    if let Some(shader) = shader {
        swatch = swatch.with_shader(shader);
    }
    ui.add_child(tile, swatch);
    widgets::label(
        ui,
        tile,
        format!("shaders.effect.{name}.label"),
        label,
        text(11.0, color(204, 216, 232)),
        LayoutStyle::new().with_width_percent(1.0),
    );
}

fn shader_lab_widgets(ui: &mut UiDocument, parent: UiNodeId, state: &ShowcaseState) {
    let body = section_with_min_viewport(
        ui,
        parent,
        "shader_lab",
        "Shader lab",
        UiSize::new(SHADER_LAB_CONTENT_MIN_WIDTH, SHADER_LAB_CONTENT_MIN_HEIGHT),
    );
    let source_error = state.shader_lab_source_error.as_deref();
    let source_valid = source_error.is_none();

    let mut split_options = ext_widgets::SplitPaneOptions::default()
        .with_handle_action("shader_lab.workspace.resize")
        .with_handle_hover_visual(UiVisual::panel(color(96, 166, 238), None, 2.0));
    split_options.layout = Layout::row()
        .size(LayoutSize::new(
            LayoutDimension::percent(1.0),
            LayoutDimension::points(SHADER_LAB_WORKSPACE_HEIGHT),
        ))
        .min_size(LayoutSize::points(
            SHADER_LAB_CONTENT_MIN_WIDTH,
            SHADER_LAB_WORKSPACE_HEIGHT,
        ))
        .flex(0.0, 0.0, LayoutDimension::Auto)
        .to_layout_style();
    split_options.handle_thickness = SHADER_LAB_SPLIT_HANDLE_THICKNESS;
    split_options.handle_visual = UiVisual::panel(color(48, 61, 78), None, 2.0);

    ext_widgets::split_pane(
        ui,
        body,
        "shader_lab.workspace",
        ext_widgets::SplitAxis::Horizontal,
        state.shader_lab_split,
        split_options,
        |ui, preview_pane| {
            shader_lab_preview_column(ui, preview_pane, state, source_error, source_valid);
        },
        |ui, editor_pane| {
            shader_lab_editor_column(ui, editor_pane, state, source_error);
        },
    );
}

fn shader_lab_preview_column(
    ui: &mut UiDocument,
    parent: UiNodeId,
    state: &ShowcaseState,
    source_error: Option<&str>,
    source_valid: bool,
) {
    let preview_column = ui.add_child(
        parent,
        UiNode::container(
            "shader_lab.preview.column",
            LayoutStyle::column()
                .with_width_percent(1.0)
                .with_height_percent(1.0)
                .with_gap(8.0)
                .with_flex_shrink(1.0),
        ),
    );
    let target_row = row(ui, preview_column, "shader_lab.target.row", 8.0);
    widgets::label(
        ui,
        target_row,
        "shader_lab.target.caption",
        "Preview",
        text(12.0, color(166, 176, 190)),
        LayoutStyle::new()
            .with_width(58.0)
            .with_height(30.0)
            .with_flex_shrink(0.0),
    );
    shader_lab_dropdown_select(
        ui,
        target_row,
        "shader_lab.target",
        &shader_lab_target_options(),
        &state.shader_lab_target_menu,
        160.0,
        "Preview target",
        "Shader lab preview target",
    );
    shader_lab_preview_controls(ui, preview_column, state);

    let preview = ui.add_child(
        preview_column,
        UiNode::container(
            "shader_lab.preview.surface",
            LayoutStyle::column()
                .with_width_percent(1.0)
                .with_height(0.0)
                .with_flex_grow(1.0)
                .with_padding(18.0)
                .with_gap(8.0)
                .with_align_items(taffy::prelude::AlignItems::Center)
                .with_justify_content(taffy::prelude::JustifyContent::Center)
                .with_flex_shrink(0.0),
        )
        .with_visual(UiVisual::panel(
            color(8, 12, 18),
            Some(StrokeStyle::new(color(48, 61, 78), 1.0)),
            4.0,
        )),
    );
    shader_lab_preview(ui, preview, state, source_valid);

    if let Some(status) = shader_lab_status_label(state, source_error) {
        widgets::label(
            ui,
            preview_column,
            "shader_lab.preview.status",
            status,
            text(11.0, color(166, 176, 190)),
            LayoutStyle::new().with_width_percent(1.0),
        );
    }
    shader_lab_material_contract_demo(ui, preview_column, state);
}

fn shader_lab_preview_controls(ui: &mut UiDocument, parent: UiNodeId, state: &ShowcaseState) {
    let controls = ui.add_child(
        parent,
        UiNode::container(
            "shader_lab.preview.controls",
            LayoutStyle::column()
                .with_width_percent(1.0)
                .with_gap(6.0)
                .with_flex_shrink(0.0),
        ),
    );
    let text_row = wrapping_row(ui, controls, "shader_lab.preview.text_controls", 8.0);
    shader_lab_option_checkbox(
        ui,
        text_row,
        "shader_lab.frame_text.toggle",
        "Frame",
        state.shader_lab_show_frame_text,
    );
    shader_lab_option_checkbox(
        ui,
        text_row,
        "shader_lab.button_text.toggle",
        "Button",
        state.shader_lab_show_button_text,
    );

    let style_row = wrapping_row(ui, controls, "shader_lab.preview.style_controls", 8.0);
    shader_lab_slider_control(
        ui,
        style_row,
        "shader_lab.surface.stroke",
        "Border",
        state.shader_lab_surface_stroke_width,
        SHADER_LAB_SURFACE_STROKE_MAX,
        1,
    );
    shader_lab_slider_control(
        ui,
        style_row,
        "shader_lab.surface.radius",
        "Radius",
        state.shader_lab_surface_radius,
        SHADER_LAB_SURFACE_RADIUS_MAX,
        0,
    );
}

fn shader_lab_material_contract_demo(ui: &mut UiDocument, parent: UiNodeId, state: &ShowcaseState) {
    let panel = ui.add_child(
        parent,
        UiNode::container(
            "shader_lab.material",
            LayoutStyle::column()
                .with_width_percent(1.0)
                .with_gap(6.0)
                .with_flex_shrink(0.0),
        ),
    );
    widgets::label(
        ui,
        panel,
        "shader_lab.material.title",
        "Material",
        text(12.0, color(186, 198, 216)),
        LayoutStyle::new().with_width_percent(1.0),
    );
    let controls = wrapping_row(ui, panel, "shader_lab.material.controls", 8.0);
    shader_lab_labeled_dropdown(
        ui,
        controls,
        "shader_lab.material.shader",
        "Shader",
        &shader_lab_material_shader_options(),
        &state.shader_lab_material_shader_menu,
        132.0,
    );
    shader_lab_labeled_dropdown(
        ui,
        controls,
        "shader_lab.material.shape",
        "Shape",
        &shader_lab_material_shape_options(),
        &state.shader_lab_material_shape_menu,
        132.0,
    );
    shader_lab_labeled_dropdown(
        ui,
        controls,
        "shader_lab.material.geometry",
        "Geometry",
        &shader_lab_material_geometry_options(),
        &state.shader_lab_material_geometry_menu,
        140.0,
    );
    shader_lab_slider_control(
        ui,
        controls,
        "shader_lab.material.outset",
        "Outset",
        state.shader_lab_material_outset,
        SHADER_LAB_MATERIAL_OUTSET_MAX,
        0,
    );

    let contracts_layout = Layout::column()
        .size(LayoutSize::new(
            LayoutDimension::percent(1.0),
            LayoutDimension::Auto,
        ))
        .padding(LayoutSpacing::new(
            LayoutLength::points(4.0),
            LayoutLength::points(4.0),
            LayoutLength::points(SHADER_LAB_MATERIAL_OUTSET_MAX),
            LayoutLength::points(8.0),
        ))
        .flex(0.0, 0.0, LayoutDimension::Auto)
        .to_layout_style();
    let contracts_shell = ui.add_child(
        panel,
        UiNode::container("shader_lab.material.contracts.shell", contracts_layout),
    );
    let row = wrapping_row(ui, contracts_shell, "shader_lab.material.contracts", 8.0);
    shader_lab_material_chip(
        ui,
        row,
        "shader_lab.material.current",
        "Selected",
        shader_lab_selected_material(state),
        shader_lab_material_visual(state.shader_lab_material_shape),
    );
    shader_lab_material_chip(
        ui,
        row,
        "shader_lab.material.outset",
        "Glow",
        ElementMaterial::shader(ShaderEffect::glow(
            color(100, 180, 255),
            0.95,
            SHADER_LAB_MATERIAL_OUTSET,
        ))
        .with_paint_outset(LayoutInsets::points(
            state
                .shader_lab_material_outset
                .clamp(0.0, SHADER_LAB_MATERIAL_OUTSET_MAX),
        )),
        UiVisual::panel(color(32, 64, 96), None, 8.0),
    );
    shader_lab_material_chip(
        ui,
        row,
        "shader_lab.material.circle_hit",
        "Circle",
        ElementMaterial::new()
            .with_clip_shape(ElementShape::circle())
            .with_hit_shape(ElementShape::circle()),
        UiVisual::panel(
            color(74, 133, 198),
            Some(StrokeStyle::new(color(212, 232, 255), 1.0)),
            999.0,
        ),
    );
    shader_lab_material_chip(
        ui,
        row,
        "shader_lab.material.geometry_chip",
        "Warp",
        ElementMaterial::new()
            .with_paint_outset(LayoutInsets::points(8.0))
            .with_geometry_effect(GeometryEffect::wave(8.0)),
        UiVisual::panel(
            color(101, 70, 170),
            Some(StrokeStyle::new(color(214, 196, 255), 1.0)),
            6.0,
        ),
    );
}

fn shader_lab_labeled_dropdown(
    ui: &mut UiDocument,
    parent: UiNodeId,
    name: &'static str,
    label: &'static str,
    options: &[ext_widgets::SelectOption],
    state: &ext_widgets::SelectMenuState,
    width: f32,
) {
    let control = ui.add_child(
        parent,
        UiNode::container(
            format!("{name}.control"),
            LayoutStyle::row()
                .with_width(width + 74.0)
                .with_height(30.0)
                .with_gap(6.0)
                .with_align_items(taffy::prelude::AlignItems::Center)
                .with_flex_shrink(0.0),
        ),
    );
    widgets::label(
        ui,
        control,
        format!("{name}.caption"),
        label,
        text(12.0, color(166, 176, 190)),
        LayoutStyle::new()
            .with_width(66.0)
            .with_height(30.0)
            .with_flex_shrink(0.0),
    );
    shader_lab_dropdown_select(ui, control, name, options, state, width, label, label);
}

fn shader_lab_dropdown_select(
    ui: &mut UiDocument,
    parent: UiNodeId,
    name: &'static str,
    options: &[ext_widgets::SelectOption],
    state: &ext_widgets::SelectMenuState,
    width: f32,
    placeholder: &'static str,
    accessibility_label: &'static str,
) {
    let anchor = ui.add_child(
        parent,
        UiNode::container(
            format!("{name}.anchor"),
            LayoutStyle::new()
                .with_width(width)
                .with_height(30.0)
                .with_flex_shrink(0.0),
        ),
    );
    let nodes = ext_widgets::dropdown_select(
        ui,
        anchor,
        name,
        options,
        state,
        Some(select_popup(
            UiRect::new(0.0, 0.0, width, 30.0),
            UiRect::new(0.0, 0.0, width + 48.0, 240.0),
        )),
        dropdown_select_options(width, name, placeholder, accessibility_label),
    );
    ui.node_mut(nodes.trigger)
        .set_action(format!("{name}.toggle"));
}

fn shader_lab_selected_material(state: &ShowcaseState) -> ElementMaterial {
    let shape = state.shader_lab_material_shape.shape();
    let mut material = ElementMaterial::new()
        .with_paint_outset(LayoutInsets::points(
            state
                .shader_lab_material_outset
                .clamp(0.0, SHADER_LAB_MATERIAL_OUTSET_MAX),
        ))
        .with_clip_shape(shape.clone())
        .with_hit_shape(shape)
        .with_geometry_effect(state.shader_lab_material_geometry.effect());
    if let Some(shader) = shader_lab_material_shader_effect(state) {
        material = material.with_shader(shader);
    }
    material
}

fn shader_lab_material_shader_effect(state: &ShowcaseState) -> Option<ShaderEffect> {
    let phase = state.progress_phase.rem_euclid(1.0);
    match state.shader_lab_material_shader {
        ShaderLabMaterialShader::None => None,
        ShaderLabMaterialShader::Tint => Some(ShaderEffect::tint(color(255, 196, 92), 0.62)),
        ShaderLabMaterialShader::Shine => Some(ShaderEffect::shine(phase, 0.92)),
        ShaderLabMaterialShader::Glow => Some(ShaderEffect::glow(
            color(100, 180, 255),
            0.95,
            state
                .shader_lab_material_outset
                .clamp(0.0, SHADER_LAB_MATERIAL_OUTSET_MAX),
        )),
        ShaderLabMaterialShader::Plasma => {
            Some(ShaderEffect::plasma(phase, color(82, 190, 255), 0.75, 12.0))
        }
        ShaderLabMaterialShader::Rings => {
            Some(ShaderEffect::rings(phase, color(232, 170, 88), 0.78, 11.0))
        }
        ShaderLabMaterialShader::Grid => {
            Some(ShaderEffect::grid(phase, color(156, 132, 255), 0.85, 9.0))
        }
    }
}

fn shader_lab_material_visual(shape: ShaderLabMaterialShape) -> UiVisual {
    UiVisual::panel(
        color(39, 71, 114),
        Some(StrokeStyle::new(color(168, 205, 255), 1.0)),
        shape.visual_radius(),
    )
}

fn shader_lab_material_chip(
    ui: &mut UiDocument,
    parent: UiNodeId,
    name: &'static str,
    label: &'static str,
    material: ElementMaterial,
    visual: UiVisual,
) {
    let chip = ui.add_child(
        parent,
        UiNode::container(
            name,
            LayoutStyle::row()
                .with_width(156.0)
                .with_height(44.0)
                .with_padding(8.0)
                .with_align_items(taffy::prelude::AlignItems::Center)
                .with_justify_content(taffy::prelude::JustifyContent::Center)
                .with_flex_shrink(0.0),
        )
        .with_visual(visual)
        .with_material(material)
        .with_accessibility(
            AccessibilityMeta::new(AccessibilityRole::Image).label(format!("{label} material")),
        ),
    );
    widgets::label(
        ui,
        chip,
        format!("{name}.text"),
        label,
        text(11.0, color(246, 249, 252)),
        LayoutStyle::new().with_flex_shrink(0.0),
    );
}

fn shader_lab_option_checkbox(
    ui: &mut UiDocument,
    parent: UiNodeId,
    name: &'static str,
    label: &'static str,
    checked: bool,
) {
    let mut options = widgets::CheckboxOptions::default()
        .with_action(name)
        .with_text_style(text(12.0, color(220, 228, 238)));
    options.layout = LayoutStyle::new()
        .with_width(112.0)
        .with_height(24.0)
        .with_flex_shrink(0.0);
    widgets::checkbox(ui, parent, name, label, checked, options);
}

fn shader_lab_slider_control(
    ui: &mut UiDocument,
    parent: UiNodeId,
    name: &'static str,
    label: &'static str,
    value: f32,
    max: f32,
    decimals: usize,
) {
    let control = ui.add_child(
        parent,
        UiNode::container(
            format!("{name}.control"),
            Layout::row()
                .size(LayoutSize::new(
                    LayoutDimension::points(214.0),
                    LayoutDimension::Auto,
                ))
                .align_items(LayoutAlignment::Center)
                .gap(LayoutGap::points(6.0, 6.0))
                .flex(0.0, 0.0, LayoutDimension::Auto)
                .to_layout_style(),
        ),
    );
    widgets::label(
        ui,
        control,
        format!("{name}.label"),
        label,
        text(12.0, color(166, 176, 190)),
        LayoutStyle::new()
            .with_width(46.0)
            .with_height(22.0)
            .with_flex_shrink(0.0),
    );
    let mut options = widgets::SliderOptions::default()
        .with_layout(
            LayoutStyle::new()
                .with_width(96.0)
                .with_height(22.0)
                .with_flex_shrink(0.0),
        )
        .with_value_edit_action(name);
    options.accessibility_label = Some(format!("Shader lab {label}"));
    widgets::slider(
        ui,
        control,
        format!("{name}.slider"),
        (value / max.max(f32::EPSILON)).clamp(0.0, 1.0),
        0.0..1.0,
        options,
    );
    widgets::label(
        ui,
        control,
        format!("{name}.value"),
        format!("{value:.decimals$}px"),
        text(12.0, color(226, 232, 242)),
        LayoutStyle::new()
            .with_width(48.0)
            .with_height(22.0)
            .with_flex_shrink(0.0),
    );
}

fn shader_lab_surface_stroke(state: &ShowcaseState) -> Option<StrokeStyle> {
    (state.shader_lab_surface_stroke_width > f32::EPSILON).then(|| {
        StrokeStyle::new(
            color(150, 180, 235),
            state
                .shader_lab_surface_stroke_width
                .clamp(0.0, SHADER_LAB_SURFACE_STROKE_MAX),
        )
    })
}

fn shader_lab_surface_radius(state: &ShowcaseState) -> f32 {
    state
        .shader_lab_surface_radius
        .clamp(0.0, SHADER_LAB_SURFACE_RADIUS_MAX)
}

fn shader_lab_editor_column(
    ui: &mut UiDocument,
    parent: UiNodeId,
    state: &ShowcaseState,
    source_error: Option<&str>,
) {
    let editor_column = ui.add_child(
        parent,
        UiNode::container(
            "shader_lab.editor.column",
            LayoutStyle::column()
                .with_width_percent(1.0)
                .with_height_percent(1.0)
                .with_gap(8.0)
                .with_flex_shrink(1.0),
        ),
    );
    let preset_row = row(ui, editor_column, "shader_lab.preset.row", 8.0);
    widgets::label(
        ui,
        preset_row,
        "shader_lab.preset.caption",
        "Program",
        text(12.0, color(166, 176, 190)),
        LayoutStyle::new()
            .with_width(62.0)
            .with_height(30.0)
            .with_flex_shrink(0.0),
    );
    shader_lab_dropdown_select(
        ui,
        preset_row,
        "shader_lab.preset",
        &shader_lab_preset_options(),
        &state.shader_lab_preset_menu,
        180.0,
        "WGSL preset",
        "Shader lab WGSL preset",
    );

    let editor_frame = ui.add_child(
        editor_column,
        UiNode::container(
            "shader_lab.editor.frame",
            Layout::column()
                .size(LayoutSize::new(
                    LayoutDimension::percent(1.0),
                    LayoutDimension::points(0.0),
                ))
                .min_size(LayoutSize::points(0.0, SHADER_LAB_EDITOR_HEIGHT))
                .flex(1.0, 1.0, LayoutDimension::points(0.0))
                .to_layout_style(),
        )
        .with_visual(UiVisual::panel(
            color(18, 22, 28),
            Some(StrokeStyle::new(color(72, 84, 104), 1.0)),
            4.0,
        )),
    );
    let editor_scroll = widgets::scroll_area(
        ui,
        editor_frame,
        "shader_lab.editor.scroll",
        ScrollAxes::BOTH,
        LayoutStyle::column()
            .with_width_percent(1.0)
            .with_height_percent(1.0),
    );
    ui.node_mut(editor_scroll)
        .set_action("shader_lab.editor.scroll");
    if let Some(scroll) = ui.node_mut(editor_scroll).scroll_mut() {
        scroll.set_offset(state.shader_lab_editor_scroll);
    }

    let mut code_options = state.text_edit_options(FocusedTextInput::ShaderLabSource);
    code_options.edit_action = Some("shader_lab.editor.edit".into());
    code_options.visual = UiVisual::TRANSPARENT;
    code_options.focused_visual = Some(UiVisual::TRANSPARENT);
    code_options.disabled_visual = Some(UiVisual::TRANSPARENT);
    widgets::code_editor(
        ui,
        editor_scroll,
        "shader_lab.editor",
        &state.shader_lab_source,
        code_options,
    );
    let (validation_text, validation_color) = shader_lab_validation_label(source_error);
    widgets::label(
        ui,
        editor_column,
        "shader_lab.validation",
        validation_text,
        text(11.0, validation_color),
        LayoutStyle::new().with_width_percent(1.0),
    );
}

fn shader_lab_editor_content_size(source: &str) -> UiSize {
    let style = widgets::code_text_style();
    let line_count = source.lines().count().max(1) as f32;
    let longest_line = source
        .lines()
        .map(|line| line.chars().count())
        .max()
        .unwrap_or(0)
        .max(48) as f32;
    UiSize::new(
        (longest_line * style.font_size * 0.56 + 24.0).max(SHADER_LAB_EDITOR_WIDTH),
        (line_count * style.line_height + 18.0).max(SHADER_LAB_EDITOR_HEIGHT),
    )
}

fn shader_lab_preview(
    ui: &mut UiDocument,
    parent: UiNodeId,
    state: &ShowcaseState,
    source_valid: bool,
) {
    match state.shader_lab_target {
        ShaderLabTarget::Canvas => {
            let mut options = widgets::CanvasOptions::default()
                .with_layout(
                    LayoutStyle::new()
                        .with_width_percent(1.0)
                        .with_height_percent(1.0)
                        .with_flex_grow(1.0),
                )
                .with_intrinsic_size(UiSize::new(
                    SHADER_LAB_PREVIEW_WIDTH - 20.0,
                    SHADER_LAB_PREVIEW_HEIGHT,
                ))
                .with_accessibility_label("Shader lab canvas preview");
            options.visual = UiVisual::panel(color(8, 12, 18), None, 4.0);
            widgets::canvas(
                ui,
                parent,
                "shader_lab.preview.canvas",
                CanvasContent::new("shader_lab.preview.canvas")
                    .program(shader_lab_canvas_program(state, source_valid)),
                options,
            );
        }
        ShaderLabTarget::Frame => {
            let mut frame_node = UiNode::container(
                "shader_lab.preview.frame",
                operad::layout::with_min_size(
                    LayoutStyle::column()
                        .with_width_percent(0.82)
                        .with_height_percent(0.62)
                        .with_padding(14.0)
                        .with_align_items(taffy::prelude::AlignItems::Center)
                        .with_justify_content(taffy::prelude::JustifyContent::Center)
                        .with_flex_shrink(0.0),
                    operad::layout::px(SHADER_LAB_FRAME_MIN_WIDTH),
                    operad::layout::px(SHADER_LAB_FRAME_MIN_HEIGHT),
                ),
            )
            .with_visual(UiVisual::panel(
                ColorRgba::new(0, 0, 0, 0),
                shader_lab_surface_stroke(state),
                shader_lab_surface_radius(state),
            ));
            frame_node.style_mut().set_clip(ClipBehavior::Clip);
            let frame = ui.add_child(parent, frame_node);
            shader_lab_canvas_layer_fill(
                ui,
                frame,
                "shader_lab.preview.frame.shader",
                state,
                source_valid,
            );
            if state.shader_lab_show_frame_text {
                let label = widgets::label(
                    ui,
                    frame,
                    "shader_lab.preview.frame.label",
                    "WGSL frame",
                    text(14.0, color(246, 249, 252)),
                    LayoutStyle::new().with_flex_shrink(0.0),
                );
                ui.node_mut(label).style_mut().set_z_index(1);
            }
        }
        ShaderLabTarget::Button => {
            let mut shell_node = UiNode::container(
                "shader_lab.preview.button.shell",
                LayoutStyle::column()
                    .with_width(SHADER_LAB_BUTTON_WIDTH)
                    .with_height(SHADER_LAB_BUTTON_HEIGHT)
                    .with_align_items(taffy::prelude::AlignItems::Center)
                    .with_justify_content(taffy::prelude::JustifyContent::Center),
            )
            .with_visual(UiVisual::TRANSPARENT);
            shell_node.style_mut().set_clip(ClipBehavior::Clip);
            let shell = ui.add_child(parent, shell_node);
            shader_lab_canvas_layer_fill(
                ui,
                shell,
                "shader_lab.preview.button.shader",
                state,
                source_valid,
            );
            let mut options = widgets::ButtonOptions::new(
                LayoutStyle::new()
                    .with_width(SHADER_LAB_BUTTON_WIDTH)
                    .with_height(SHADER_LAB_BUTTON_HEIGHT),
            )
            .with_action("shader_lab.preview.button")
            .with_accessibility_label("Shader button preview");
            options.visual = UiVisual::panel(
                ColorRgba::new(0, 0, 0, 0),
                shader_lab_surface_stroke(state),
                shader_lab_surface_radius(state),
            );
            options.hovered_visual = Some(UiVisual::panel(
                ColorRgba::new(255, 255, 255, 28),
                shader_lab_surface_stroke(state),
                shader_lab_surface_radius(state),
            ));
            options.pressed_visual = Some(UiVisual::panel(
                ColorRgba::new(0, 0, 0, 48),
                shader_lab_surface_stroke(state),
                shader_lab_surface_radius(state),
            ));
            options.text_style = text(14.0, color(246, 249, 252));
            let button = widgets::button(
                ui,
                shell,
                "shader_lab.preview.button",
                if state.shader_lab_show_button_text {
                    "Shader button"
                } else {
                    ""
                },
                options,
            );
            ui.node_mut(button).style_mut().set_z_index(1);
        }
    }
}

fn shader_lab_canvas_layer_fill(
    ui: &mut UiDocument,
    parent: UiNodeId,
    name: &'static str,
    state: &ShowcaseState,
    source_valid: bool,
) -> UiNodeId {
    let layout = operad::layout::with_absolute_position(
        LayoutStyle::new()
            .with_width_percent(1.0)
            .with_height_percent(1.0),
        0.0,
        0.0,
    );
    let mut options = widgets::CanvasOptions::default()
        .with_layout(layout)
        .with_intrinsic_size(UiSize::new(
            SHADER_LAB_PREVIEW_WIDTH,
            SHADER_LAB_PREVIEW_HEIGHT,
        ))
        .with_accessibility_label(format!("{name} shader preview"));
    options.input = InputBehavior::NONE;
    options.visual = UiVisual::TRANSPARENT;
    let canvas = widgets::canvas(
        ui,
        parent,
        name,
        CanvasContent::new(name).program(shader_lab_canvas_program(state, source_valid)),
        options,
    );
    ui.node_mut(canvas).style_mut().set_z_index(0);
    canvas
}

fn shader_lab_status_label(state: &ShowcaseState, source_error: Option<&str>) -> Option<String> {
    if source_error.is_some() {
        Some(format!(
            "{} fallback until WGSL validates",
            state.shader_lab_target.label()
        ))
    } else {
        None
    }
}

fn shader_lab_validation_label(source_error: Option<&str>) -> (String, ColorRgba) {
    if let Some(error) = source_error {
        (
            format!("WGSL error: {}", compact_shader_error(error, 160)),
            color(255, 139, 128),
        )
    } else {
        ("WGSL valid".to_string(), color(112, 221, 160))
    }
}

fn compact_shader_error(error: &str, max_chars: usize) -> String {
    let mut compact = error.split_whitespace().collect::<Vec<_>>().join(" ");
    if compact.chars().count() > max_chars {
        compact = compact.chars().take(max_chars.saturating_sub(3)).collect();
        compact.push_str("...");
    }
    compact
}

fn shader_lab_canvas_program(state: &ShowcaseState, source_valid: bool) -> CanvasRenderProgram {
    let source = if source_valid {
        state.shader_lab_source.text().to_string()
    } else {
        SHADER_LAB_ERROR_WGSL.to_string()
    };
    CanvasRenderProgram::wgsl(source)
        .label("showcase.shader_lab.canvas")
        .constant("TIME", state.progress_phase as f64)
        .clear_color(Some(color(8, 12, 18)))
}

fn shader_lab_source_error(source: &str) -> Option<String> {
    if !shader_lab_source_has_entry_points(source) {
        return Some("source must define @vertex fn vs_main and @fragment fn fs_main".to_string());
    }

    shader_lab_compile_error(source)
}

#[cfg(feature = "wgpu")]
fn shader_lab_compile_error(source: &str) -> Option<String> {
    let module = match naga::front::wgsl::parse_str(source) {
        Ok(module) => module,
        Err(error) => return Some(error.emit_to_string(source)),
    };
    let mut validator = naga::valid::Validator::new(
        naga::valid::ValidationFlags::all(),
        naga::valid::Capabilities::empty(),
    );
    validator
        .validate(&module)
        .err()
        .map(|error| error.to_string())
}

#[cfg(not(feature = "wgpu"))]
fn shader_lab_compile_error(_source: &str) -> Option<String> {
    None
}

fn shader_lab_source_has_entry_points(source: &str) -> bool {
    source.contains("@vertex")
        && source.contains("fn vs_main")
        && source.contains("@fragment")
        && source.contains("fn fs_main")
}

fn timeline_ruler(ui: &mut UiDocument, parent: UiNodeId, state: &ShowcaseState) {
    let body =
        section_with_min_viewport(ui, parent, "timeline", "Timeline", UiSize::new(560.0, 0.0));
    widgets::label(
        ui,
        body,
        "timeline.label",
        "Clip timeline",
        text(12.0, color(166, 176, 190)),
        LayoutStyle::new().with_width_percent(1.0),
    );
    widgets::label(
        ui,
        body,
        "timeline.description",
        "The ruler maps time to tracks, clips, markers, and the current playhead.",
        text(12.0, color(196, 210, 230)),
        LayoutStyle::new().with_width_percent(1.0),
    );

    let editor = row(ui, body, "timeline.editor", 0.0);
    let labels = ui.add_child(
        editor,
        UiNode::container(
            "timeline.lane_labels",
            LayoutStyle::column()
                .with_width(96.0)
                .with_height(172.0)
                .with_flex_shrink(0.0),
        ),
    );
    for (name, label, height) in [
        ("timeline.lane_labels.header", "Tracks", 40.0),
        ("timeline.lane_labels.video", "Video", 44.0),
        ("timeline.lane_labels.audio", "Audio", 44.0),
        ("timeline.lane_labels.notes", "Notes", 44.0),
    ] {
        widgets::label(
            ui,
            labels,
            name,
            label,
            text(11.0, color(166, 176, 190)),
            LayoutStyle::new()
                .with_width_percent(1.0)
                .with_height(height)
                .with_flex_shrink(0.0),
        );
    }

    let timeline_scroll = timeline_scroll_state_for_view(
        state.timeline_scroll,
        state.timeline_scroll.viewport_size().width,
    );
    let range = ext_widgets::TimelineRange::new(0.0, 48.0);
    let nodes = scroll_area_widgets::scroll_container_shell(
        ui,
        editor,
        "timeline",
        timeline_scroll,
        widgets::ScrollContainerOptions::default()
            .with_axes(ScrollAxes::HORIZONTAL)
            .with_action_prefix("timeline")
            .with_gap(4.0)
            .with_scrollbar_thickness(TIMELINE_SCROLLBAR_HEIGHT)
            .with_layout(
                LayoutStyle::column()
                    .with_width(0.0)
                    .with_flex_grow(1.0)
                    .with_height(TIMELINE_SCROLL_CONTAINER_HEIGHT)
                    .with_flex_shrink(0.0),
            )
            .with_viewport_layout(
                LayoutStyle::column()
                    .with_width(0.0)
                    .with_flex_grow(1.0)
                    .with_height(TIMELINE_VIEWPORT_HEIGHT)
                    .with_flex_shrink(1.0),
            )
            .with_horizontal_scrollbar(
                scrollbar_widgets::ScrollbarOptions::default()
                    .with_action("timeline.horizontal-scrollbar"),
            )
            .with_accessibility_label("Timeline horizontal scroller"),
    );
    let content = ui.add_child(
        nodes.viewport,
        UiNode::container(
            "timeline.content",
            LayoutStyle::column()
                .with_width(TIMELINE_CONTENT_WIDTH)
                .with_height(TIMELINE_VIEWPORT_HEIGHT)
                .with_flex_shrink(0.0),
        ),
    );
    let mut ruler_options = ext_widgets::TimelineRulerOptions::default();
    ruler_options.height = 40.0;
    ruler_options.layout = LayoutStyle::new()
        .with_width(TIMELINE_CONTENT_WIDTH)
        .with_height(40.0)
        .with_flex_shrink(0.0);
    ruler_options.accessibility_label = Some("Editing timeline ruler".to_string());
    ruler_options.accessibility_hint =
        Some("Shows seconds for the visible timeline clips".to_string());
    ext_widgets::timeline_ruler(
        ui,
        content,
        "timeline.ruler",
        ext_widgets::RulerSpec {
            range,
            width: TIMELINE_CONTENT_WIDTH,
            major_step: 4.0,
            minor_step: 1.0,
            label_every: 1,
        },
        ruler_options,
    );
    ui.add_child(
        content,
        UiNode::scene(
            "timeline.tracks",
            timeline_track_primitives(range, TIMELINE_CONTENT_WIDTH),
            LayoutStyle::new()
                .with_width(TIMELINE_CONTENT_WIDTH)
                .with_height(132.0)
                .with_flex_shrink(0.0),
        ),
    );
}

fn timeline_track_primitives(range: ext_widgets::TimelineRange, width: f32) -> Vec<ScenePrimitive> {
    let mut primitives = Vec::new();
    let lane_height = 36.0;
    let lane_gap = 8.0;
    let lanes = [
        ("Video", 0.0, color(16, 22, 30)),
        ("Audio", lane_height + lane_gap, color(13, 20, 27)),
        ("Notes", (lane_height + lane_gap) * 2.0, color(16, 22, 30)),
    ];

    for (label, y, fill) in lanes {
        primitives.push(ScenePrimitive::Rect(
            PaintRect::solid(UiRect::new(0.0, y, width, lane_height), fill)
                .stroke(AlignedStroke::inside(StrokeStyle::new(
                    color(38, 49, 64),
                    1.0,
                )))
                .corner_radii(CornerRadii::uniform(2.0)),
        ));
        primitives.push(ScenePrimitive::Text(
            PaintText::new(
                label,
                UiRect::new(8.0, y + 8.0, 72.0, 18.0),
                text(10.0, color(116, 128, 145)),
            )
            .multiline(false),
        ));
    }

    for second in (0..=48).step_by(4) {
        let x = range.value_to_x(second as f64, width);
        primitives.push(ScenePrimitive::Line {
            from: UiPoint::new(x, 0.0),
            to: UiPoint::new(x, 124.0),
            stroke: StrokeStyle::new(color(34, 44, 58), 1.0),
        });
    }

    push_timeline_clip(
        &mut primitives,
        range,
        width,
        "Intro",
        2.0,
        10.0,
        0.0,
        color(57, 126, 207),
    );
    push_timeline_clip(
        &mut primitives,
        range,
        width,
        "Cutaway",
        12.0,
        24.0,
        0.0,
        color(95, 107, 212),
    );
    push_timeline_clip(
        &mut primitives,
        range,
        width,
        "Final",
        28.0,
        44.0,
        0.0,
        color(68, 153, 122),
    );
    push_timeline_clip(
        &mut primitives,
        range,
        width,
        "Music bed",
        0.0,
        48.0,
        lane_height + lane_gap,
        color(205, 160, 71),
    );
    push_timeline_clip(
        &mut primitives,
        range,
        width,
        "Voiceover",
        8.0,
        18.0,
        lane_height + lane_gap,
        color(183, 107, 185),
    );

    for (second, label) in [(6.0, "Beat"), (21.0, "Cut"), (37.0, "Cue")] {
        let x = range.value_to_x(second, width);
        let y = (lane_height + lane_gap) * 2.0 + 8.0;
        primitives.push(ScenePrimitive::Polygon {
            points: vec![
                UiPoint::new(x, y),
                UiPoint::new(x + 8.0, y + 8.0),
                UiPoint::new(x, y + 16.0),
                UiPoint::new(x - 8.0, y + 8.0),
            ],
            fill: color(245, 198, 83),
            stroke: Some(StrokeStyle::new(color(255, 234, 178), 1.0)),
        });
        primitives.push(ScenePrimitive::Text(
            PaintText::new(
                label,
                UiRect::new(x + 12.0, y - 1.0, 72.0, 18.0),
                text(10.0, color(225, 233, 244)),
            )
            .multiline(false),
        ));
    }

    let playhead_x = range.value_to_x(18.5, width);
    primitives.push(ScenePrimitive::Line {
        from: UiPoint::new(playhead_x, 0.0),
        to: UiPoint::new(playhead_x, 124.0),
        stroke: StrokeStyle::new(ColorRgba::new(255, 120, 96, 255), 2.0),
    });
    primitives.push(ScenePrimitive::Text(
        PaintText::new(
            "Playhead 18.5s",
            UiRect::new(playhead_x + 8.0, 106.0, 120.0, 18.0),
            text(10.0, ColorRgba::new(255, 172, 154, 255)),
        )
        .multiline(false),
    ));

    primitives
}

#[allow(clippy::too_many_arguments)]
fn push_timeline_clip(
    primitives: &mut Vec<ScenePrimitive>,
    range: ext_widgets::TimelineRange,
    width: f32,
    label: &'static str,
    start: f64,
    end: f64,
    lane_y: f32,
    fill: ColorRgba,
) {
    let x = range.value_to_x(start, width);
    let right = range.value_to_x(end, width);
    let rect = UiRect::new(x, lane_y + 6.0, (right - x).max(1.0), 24.0);
    primitives.push(ScenePrimitive::Rect(
        PaintRect::solid(rect, fill)
            .stroke(AlignedStroke::inside(StrokeStyle::new(
                ColorRgba::new(230, 240, 255, 96),
                1.0,
            )))
            .corner_radii(CornerRadii::uniform(4.0)),
    ));
    primitives.push(ScenePrimitive::Text(
        PaintText::new(label, rect, text(10.0, color(245, 248, 252)))
            .horizontal_align(TextHorizontalAlign::Center)
            .vertical_align(TextVerticalAlign::Center)
            .multiline(false),
    ));
}

fn theme_demo_widgets(ui: &mut UiDocument, parent: UiNodeId, state: &ShowcaseState, theme: &Theme) {
    let body = section(ui, parent, "theme", "Theme");
    widgets::label(
        ui,
        body,
        "theme.current",
        format!("Current theme: {}", theme.name),
        themed_text(theme, 14.0),
        LayoutStyle::new().with_width_percent(1.0),
    );

    let choices = wrapping_row(ui, body, "theme.choices", 8.0);
    for choice in [
        ShowcaseThemeChoice::Light,
        ShowcaseThemeChoice::Dark,
        ShowcaseThemeChoice::Bubblegum,
    ] {
        theme_choice_button(
            ui,
            choices,
            choice,
            state.showcase_theme == choice,
            choice.theme(),
        );
    }

    let swatches = wrapping_row(ui, body, "theme.swatches", 8.0);
    theme_swatch(
        ui,
        swatches,
        "theme.swatch.canvas",
        "Canvas",
        theme.colors.canvas,
        theme,
    );
    theme_swatch(
        ui,
        swatches,
        "theme.swatch.surface",
        "Surface",
        theme.colors.surface,
        theme,
    );
    theme_swatch(
        ui,
        swatches,
        "theme.swatch.accent",
        "Accent",
        theme.colors.accent,
        theme,
    );
    theme_swatch(
        ui,
        swatches,
        "theme.swatch.selected",
        "Selected",
        theme.colors.selected,
        theme,
    );

    let preview = ui.add_child(
        body,
        UiNode::container(
            "theme.preview",
            LayoutStyle::column()
                .with_width_percent(1.0)
                .with_padding(12.0)
                .with_gap(10.0)
                .with_flex_shrink(0.0),
        )
        .with_visual(UiVisual::panel(
            theme.colors.surface,
            Some(theme.stroke.surface),
            theme.radius.md,
        ))
        .with_accessibility(
            AccessibilityMeta::new(AccessibilityRole::Group).label("Theme preview"),
        ),
    );
    widgets::label(
        ui,
        preview,
        "theme.preview.title",
        "Preview controls",
        themed_text(theme, 13.0),
        LayoutStyle::new().with_width_percent(1.0),
    );
    let preview_row = row(ui, preview, "theme.preview.controls", 8.0);
    let mut primary = themed_button_options(
        theme,
        "theme.preview.primary",
        ComponentState::ACTIVE,
        LayoutStyle::new().with_height(34.0),
    );
    primary.accessibility_label = Some("Primary preview button".to_owned());
    widgets::button(ui, preview_row, "theme.preview.primary", "Primary", primary);
    let mut secondary = themed_button_options(
        theme,
        "theme.preview.secondary",
        ComponentState::NORMAL,
        LayoutStyle::new().with_height(34.0),
    );
    secondary.accessibility_label = Some("Secondary preview button".to_owned());
    widgets::button(
        ui,
        preview_row,
        "theme.preview.secondary",
        "Secondary",
        secondary,
    );
    let mut help = themed_muted_text(theme, 12.0);
    help.wrap = TextWrap::WordOrGlyph;
    widgets::label(
        ui,
        preview,
        "theme.preview.copy",
        "The selected theme drives the app background, right panel, floating windows, and this preview.",
        help,
        LayoutStyle::new().with_width_percent(1.0),
    );
}

fn theme_choice_button(
    ui: &mut UiDocument,
    parent: UiNodeId,
    choice: ShowcaseThemeChoice,
    selected: bool,
    preview_theme: Theme,
) {
    let mut options = themed_button_options(
        &preview_theme,
        choice.action(),
        if selected {
            ComponentState::SELECTED
        } else {
            ComponentState::NORMAL
        },
        LayoutStyle::new()
            .with_width(116.0)
            .with_height(34.0)
            .with_flex_shrink(0.0),
    )
    .with_action(choice.action());
    options.accessibility_label = Some(format!("Use {} theme", choice.label()));
    widgets::button(
        ui,
        parent,
        format!("theme.choice.{}", choice.label().to_ascii_lowercase()),
        choice.label(),
        options,
    );
}

fn theme_swatch(
    ui: &mut UiDocument,
    parent: UiNodeId,
    name: &'static str,
    label: &'static str,
    swatch_color: ColorRgba,
    theme: &Theme,
) {
    let tile = ui.add_child(
        parent,
        UiNode::container(
            name,
            LayoutStyle::column()
                .with_width(92.0)
                .with_height(76.0)
                .with_padding(8.0)
                .with_gap(6.0)
                .with_flex_shrink(0.0),
        )
        .with_visual(UiVisual::panel(
            theme.colors.surface_muted,
            Some(theme.stroke.surface),
            4.0,
        ))
        .with_accessibility(AccessibilityMeta::new(AccessibilityRole::Group).label(label)),
    );
    ui.add_child(
        tile,
        UiNode::container(
            format!("{name}.color"),
            LayoutStyle::new()
                .with_width_percent(1.0)
                .with_height(26.0)
                .with_flex_shrink(0.0),
        )
        .with_visual(UiVisual::panel(
            swatch_color,
            Some(StrokeStyle::new(theme.colors.border_strong, 1.0)),
            4.0,
        )),
    );
    widgets::label(
        ui,
        tile,
        format!("{name}.label"),
        label,
        themed_muted_text(theme, 11.0),
        LayoutStyle::new().with_width_percent(1.0),
    );
}

fn themed_button_options(
    theme: &Theme,
    action: impl Into<String>,
    state: ComponentState,
    layout: LayoutStyle,
) -> widgets::ButtonOptions {
    let mut options = widgets::ButtonOptions::new(layout).with_action(action.into());
    options.visual = theme.resolve_visual(ComponentRole::Button, state);
    options.hovered_visual =
        Some(theme.resolve_visual(ComponentRole::Button, ComponentState::HOVERED));
    options.pressed_visual =
        Some(theme.resolve_visual(ComponentRole::Button, ComponentState::PRESSED));
    options.pressed_hovered_visual =
        Some(theme.resolve_visual(ComponentRole::Button, ComponentState::PRESSED));
    options.focused_visual =
        Some(theme.resolve_visual(ComponentRole::Button, ComponentState::FOCUSED));
    options.disabled_visual =
        Some(theme.resolve_visual(ComponentRole::Button, ComponentState::DISABLED));
    options.text_style = theme.resolve_text(ComponentRole::Button, state);
    options
}

fn styling_widgets(ui: &mut UiDocument, parent: UiNodeId, state: &ShowcaseState) {
    let preview_scene_size = style_preview_scene_size(state.styling);
    let preview_min_width = preview_scene_size.width + 16.0;
    let preview_min_height = preview_scene_size.height + 16.0;
    let body_min_width = STYLING_CONTROLS_WIDTH + 1.0 + preview_min_width + 20.0;
    let body = section_with_min_viewport(
        ui,
        parent,
        "styling",
        "Styling",
        UiSize::new(body_min_width, preview_min_height),
    );
    let grid_layout = operad::layout::with_grid_template_columns(
        Layout::grid()
            .size(LayoutSize::percent(1.0, 1.0))
            .gap(LayoutGap::points(10.0, 10.0))
            .to_layout_style(),
        [
            LayoutGridTrack::points(STYLING_CONTROLS_WIDTH),
            LayoutGridTrack::points(1.0),
            LayoutGridTrack::minmax_points_fraction(preview_min_width, 1.0),
        ],
    );
    let grid = ui.add_child(body, UiNode::container("styling.grid", grid_layout));
    let controls = ui.add_child(
        grid,
        UiNode::container(
            "styling.controls",
            LayoutStyle::column()
                .with_width(STYLING_CONTROLS_WIDTH)
                .with_height_percent(1.0)
                .with_flex_shrink(0.0)
                .gap(6.0),
        ),
    );
    style_edge_group(
        ui,
        controls,
        "styling.inner",
        "Inner margin",
        "styling.inner_same",
        state.styling.inner_same,
        [
            ("Left", "styling.inner", state.styling.inner_margin),
            ("Right", "styling.inner_right", state.styling.inner_right),
            ("Top", "styling.inner_top", state.styling.inner_top),
            ("Bottom", "styling.inner_bottom", state.styling.inner_bottom),
        ],
        0.0..32.0,
    );
    style_edge_group(
        ui,
        controls,
        "styling.outer",
        "Outer margin",
        "styling.outer_same",
        state.styling.outer_same,
        [
            ("Left", "styling.outer", state.styling.outer_margin),
            ("Right", "styling.outer_right", state.styling.outer_right),
            ("Top", "styling.outer_top", state.styling.outer_top),
            ("Bottom", "styling.outer_bottom", state.styling.outer_bottom),
        ],
        0.0..40.0,
    );
    style_edge_group(
        ui,
        controls,
        "styling.radius",
        "Corner radius",
        "styling.radius_same",
        state.styling.radius_same,
        [
            ("NW", "styling.radius", state.styling.corner_radius),
            ("NE", "styling.radius_ne", state.styling.corner_ne),
            ("SW", "styling.radius_sw", state.styling.corner_sw),
            ("SE", "styling.radius_se", state.styling.corner_se),
        ],
        0.0..28.0,
    );
    style_fill_group(ui, controls, state);
    style_stroke_group(ui, controls, state);
    style_shadow_group(ui, controls, state);
    widgets::separator(
        ui,
        grid,
        "styling.preview.separator",
        widgets::SeparatorOptions::vertical().with_layout(
            LayoutStyle::new()
                .with_width(1.0)
                .with_height_percent(1.0)
                .with_flex_shrink(0.0),
        ),
    );

    let preview = ui.add_child(
        grid,
        UiNode::container(
            "styling.preview",
            operad::layout::with_min_size(
                LayoutStyle::column()
                    .with_width_percent(1.0)
                    .with_height_percent(1.0)
                    .with_flex_shrink(0.0)
                    .padding(8.0),
                operad::layout::px(preview_min_width),
                operad::layout::px(preview_min_height),
            ),
        )
        .with_visual(UiVisual::panel(color(17, 20, 25), None, 0.0)),
    );
    style_preview(ui, preview, state.styling);
}

#[allow(clippy::too_many_arguments)]
fn style_edge_group(
    ui: &mut UiDocument,
    parent: UiNodeId,
    name: &'static str,
    title: &'static str,
    same_action: &'static str,
    same: bool,
    values: [(&'static str, &'static str, f32); 4],
    range: std::ops::Range<f32>,
) {
    let group = style_control_group(ui, parent, format!("{name}.group"));
    style_group_title(ui, group, format!("{name}.title"), title);
    let fields = ui.add_child(
        group,
        UiNode::container(
            format!("{name}.fields"),
            LayoutStyle::column()
                .with_width(138.0)
                .with_flex_shrink(0.0)
                .gap(3.0),
        ),
    );
    style_compact_checkbox(ui, fields, same_action, "same", same);
    if same {
        style_number_row(ui, fields, values[0].1, "All", values[0].2, range, 0);
    } else {
        for (label, action, value) in values {
            style_number_row(ui, fields, action, label, value, range.clone(), 0);
        }
    }
}

fn style_fill_group(ui: &mut UiDocument, parent: UiNodeId, state: &ShowcaseState) {
    let group = style_control_group(ui, parent, "styling.fill.group");
    style_group_title(ui, group, "styling.fill.title", "Fill");
    let fields = style_group_fields(
        ui,
        group,
        "styling.fill.fields",
        STYLING_WIDE_FIELDS_WIDTH,
        4.0,
    );
    style_color_button_row(
        ui,
        fields,
        "styling.fill_color_button",
        "",
        state.styling.fill_color(),
        "Pick fill color",
    );
    if state.styling_fill_picker_open {
        ext_widgets::color_picker(
            ui,
            fields,
            "styling.fill_picker",
            &state.styling_fill_picker,
            ext_widgets::ColorPickerOptions::default()
                .with_label("Fill")
                .with_action_prefix("styling.fill_picker"),
        );
    }
}

fn style_stroke_group(ui: &mut UiDocument, parent: UiNodeId, state: &ShowcaseState) {
    let group = style_control_group(ui, parent, "styling.stroke.group");
    style_group_title(ui, group, "styling.stroke.title", "Stroke");
    let fields = style_group_fields(
        ui,
        group,
        "styling.stroke.fields",
        STYLING_WIDE_FIELDS_WIDTH,
        4.0,
    );
    let width_row = row(ui, fields, "styling.stroke.row", 6.0);
    style_inline_number(
        ui,
        width_row,
        "styling.stroke",
        "width",
        state.styling.stroke_width,
        0.0..STYLING_STROKE_MAX,
        1,
    );
    let mut options = widgets::SliderOptions::default()
        .with_layout(
            LayoutStyle::new()
                .with_width(60.0)
                .with_height(20.0)
                .with_flex_shrink(0.0),
        )
        .with_value_edit_action("styling.stroke");
    options.fill_color = color(120, 170, 230);
    widgets::slider(
        ui,
        width_row,
        "styling.stroke.slider",
        (state.styling.stroke_width / STYLING_STROKE_MAX).clamp(0.0, 1.0),
        0.0..1.0,
        options,
    );
    style_color_button_row(
        ui,
        fields,
        "styling.stroke_color_button",
        "",
        state.styling.stroke_color(),
        "Pick stroke color",
    );
    if state.styling_stroke_picker_open {
        ext_widgets::color_picker(
            ui,
            fields,
            "styling.stroke_picker",
            &state.styling_stroke_picker,
            ext_widgets::ColorPickerOptions::default()
                .with_label("Stroke color")
                .with_action_prefix("styling.stroke_picker"),
        );
    }
}

fn style_shadow_group(ui: &mut UiDocument, parent: UiNodeId, state: &ShowcaseState) {
    let group = style_control_group(ui, parent, "styling.shadow.group");
    style_group_title(ui, group, "styling.shadow.title", "Shadow");
    let fields = style_group_fields(
        ui,
        group,
        "styling.shadow.fields",
        STYLING_WIDE_FIELDS_WIDTH,
        4.0,
    );
    let offsets = row(ui, fields, "styling.shadow.offsets", 6.0);
    style_inline_number(
        ui,
        offsets,
        "styling.shadow_x",
        "x",
        state.styling.shadow_x,
        -24.0..24.0,
        0,
    );
    style_inline_number(
        ui,
        offsets,
        "styling.shadow_y",
        "y",
        state.styling.shadow_y,
        -24.0..24.0,
        0,
    );
    let spread = row(ui, fields, "styling.shadow.blur_spread", 6.0);
    style_inline_number(
        ui,
        spread,
        "styling.shadow",
        "blur",
        state.styling.shadow_blur,
        0.0..32.0,
        0,
    );
    style_inline_number(
        ui,
        spread,
        "styling.shadow_spread",
        "spread",
        state.styling.shadow_spread,
        0.0..16.0,
        0,
    );
    style_color_button_row(
        ui,
        fields,
        "styling.shadow_color_button",
        "",
        state.styling.shadow_color(),
        "Pick shadow color",
    );
    if state.styling_shadow_picker_open {
        ext_widgets::color_picker(
            ui,
            fields,
            "styling.shadow_picker",
            &state.styling_shadow_picker,
            ext_widgets::ColorPickerOptions::default()
                .with_label("Shadow color")
                .with_action_prefix("styling.shadow_picker"),
        );
    }
}

fn style_control_group(ui: &mut UiDocument, parent: UiNodeId, name: impl Into<String>) -> UiNodeId {
    ui.add_child(
        parent,
        UiNode::container(
            name,
            LayoutStyle::row()
                .with_width_percent(1.0)
                .with_flex_shrink(0.0)
                .padding(4.0)
                .gap(8.0),
        )
        .with_visual(UiVisual::panel(color(23, 27, 33), None, 2.0)),
    )
}

fn style_group_fields(
    ui: &mut UiDocument,
    parent: UiNodeId,
    name: impl Into<String>,
    width: f32,
    gap: f32,
) -> UiNodeId {
    ui.add_child(
        parent,
        UiNode::container(
            name,
            LayoutStyle::column()
                .with_width(width)
                .with_flex_shrink(0.0)
                .gap(gap),
        ),
    )
}

fn style_group_title(
    ui: &mut UiDocument,
    parent: UiNodeId,
    name: impl Into<String>,
    label: &'static str,
) {
    widgets::label(
        ui,
        parent,
        name,
        label,
        text(12.0, color(166, 176, 190)),
        LayoutStyle::new()
            .with_width(88.0)
            .with_flex_shrink(0.0)
            .with_height(22.0),
    );
}

fn style_color_button_row(
    ui: &mut UiDocument,
    parent: UiNodeId,
    action: &'static str,
    label: &'static str,
    value: ColorRgba,
    accessibility_label: &'static str,
) {
    let row = row(ui, parent, format!("{action}.row"), 8.0);
    if !label.is_empty() {
        widgets::label(
            ui,
            row,
            format!("{action}.label"),
            label,
            text(12.0, color(166, 176, 190)),
            LayoutStyle::new()
                .with_width(86.0)
                .with_flex_shrink(0.0)
                .with_height(24.0),
        );
    }
    ext_widgets::color_edit_button(
        ui,
        row,
        action,
        value,
        color_mini_button_options(action)
            .with_format(ext_widgets::ColorValueFormat::Rgba)
            .accessibility_label(accessibility_label),
    );
    widgets::label(
        ui,
        row,
        format!("{action}.value"),
        ext_widgets::color_picker::format_hex_color(value, value.a < 255),
        text(12.0, color(226, 232, 242)),
        LayoutStyle::new().with_width(96.0).with_height(24.0),
    );
}

fn style_number_row(
    ui: &mut UiDocument,
    parent: UiNodeId,
    name: &'static str,
    label: &'static str,
    value: f32,
    range: std::ops::Range<f32>,
    decimals: u8,
) {
    let row = row(ui, parent, format!("{name}.row"), 6.0);
    widgets::label(
        ui,
        row,
        format!("{name}.label"),
        label,
        text(12.0, color(166, 176, 190)),
        LayoutStyle::new().with_width(48.0).with_height(22.0),
    );
    style_value_input(ui, row, name, value, range, decimals);
}

fn style_inline_number(
    ui: &mut UiDocument,
    parent: UiNodeId,
    name: &'static str,
    label: &'static str,
    value: f32,
    range: std::ops::Range<f32>,
    decimals: u8,
) {
    let row = compact_row(ui, parent, format!("{name}.inline"), 3.0);
    widgets::label(
        ui,
        row,
        format!("{name}.inline_label"),
        format!("{label}:"),
        text(12.0, color(166, 176, 190)),
        LayoutStyle::new()
            .with_width(if label.len() > 1 { 42.0 } else { 16.0 })
            .with_height(22.0),
    );
    style_value_input(ui, row, name, value, range, decimals);
}

fn style_value_input(
    ui: &mut UiDocument,
    parent: UiNodeId,
    name: &'static str,
    value: f32,
    range: std::ops::Range<f32>,
    decimals: u8,
) {
    let mut options = widgets::DragValueOptions::default()
        .with_layout(
            LayoutStyle::row()
                .with_width(STYLING_VALUE_INPUT_WIDTH)
                .with_height(22.0)
                .with_flex_shrink(0.0)
                .with_align_items(taffy::prelude::AlignItems::Center)
                .with_justify_content(taffy::prelude::JustifyContent::Center)
                .with_padding(4.0),
        )
        .with_range(ext_widgets::NumericRange::new(
            f64::from(range.start),
            f64::from(range.end),
        ))
        .with_precision(ext_widgets::NumericPrecision::decimals(decimals))
        .with_action(name);
    options.text_style = text(12.0, color(226, 232, 242));
    widgets::drag_value_input(ui, parent, name, f64::from(value), options);
}

fn style_compact_checkbox(
    ui: &mut UiDocument,
    parent: UiNodeId,
    name: &'static str,
    label: &'static str,
    checked: bool,
) {
    let mut options = widgets::CheckboxOptions::default().with_action(name);
    options.layout = LayoutStyle::new().with_width(92.0).with_height(22.0);
    options.text_style = text(12.0, color(220, 228, 238));
    widgets::checkbox(ui, parent, name, label, checked, options);
}

fn compact_row(
    ui: &mut UiDocument,
    parent: UiNodeId,
    name: impl Into<String>,
    gap: f32,
) -> UiNodeId {
    ui.add_child(
        parent,
        UiNode::container(
            name,
            LayoutStyle::row()
                .with_height(22.0)
                .with_flex_shrink(0.0)
                .with_align_items(taffy::prelude::AlignItems::Center)
                .gap(gap),
        ),
    )
}

fn color_mini_button_options(action: &'static str) -> ext_widgets::ColorButtonOptions {
    ext_widgets::ColorButtonOptions::default()
        .with_layout(LayoutStyle::size(28.0, 24.0).with_flex_shrink(0.0))
        .with_swatch_size(UiSize::new(22.0, 18.0))
        .with_action(action)
        .show_label(false)
}

fn style_preview(ui: &mut UiDocument, parent: UiNodeId, styling: StylingState) {
    let (frame, text_rect) = style_preview_rects(styling);
    let scene_size = style_preview_scene_size(styling);
    ui.add_child(
        parent,
        UiNode::scene(
            "styling.preview.scene",
            vec![
                ScenePrimitive::Rect(
                    PaintRect::solid(frame, styling.fill_color())
                        .stroke(AlignedStroke::inside(StrokeStyle::new(
                            styling.stroke_color(),
                            styling.stroke_width,
                        )))
                        .corner_radii(styling.radii())
                        .effect(PaintEffect::shadow(
                            styling.shadow_color(),
                            UiPoint::new(styling.shadow_x, styling.shadow_y),
                            styling.shadow_blur,
                            styling.shadow_spread,
                        )),
                ),
                ScenePrimitive::Text(
                    PaintText::new("Content", text_rect, text(13.0, color(255, 255, 255)))
                        .horizontal_align(TextHorizontalAlign::Center)
                        .vertical_align(TextVerticalAlign::Center)
                        .multiline(false),
                ),
            ],
            operad::layout::with_min_size(
                LayoutStyle::new()
                    .with_width_percent(1.0)
                    .with_height(180.0)
                    .with_flex_shrink(0.0),
                operad::layout::px(scene_size.width),
                operad::layout::px(scene_size.height),
            ),
        ),
    );
}

fn style_preview_rects(styling: StylingState) -> (UiRect, UiRect) {
    let outer = styling.outer_edges();
    let inner = styling.inner_edges();
    let frame = UiRect::new(
        22.0 + outer[0],
        28.0 + outer[2],
        108.0 + inner[0] + inner[1],
        40.0 + inner[2] + inner[3],
    );
    let text_rect = UiRect::new(
        frame.x + inner[0],
        frame.y + inner[2],
        (frame.width - inner[0] - inner[1]).max(1.0),
        (frame.height - inner[2] - inner[3]).max(1.0),
    );
    (frame, text_rect)
}

fn style_preview_scene_size(styling: StylingState) -> UiSize {
    let (frame, text_rect) = style_preview_rects(styling);
    let shadow_outset = styling.shadow_blur.max(0.0) + styling.shadow_spread.max(0.0);
    let shadow_bounds = UiRect::new(
        frame.x + styling.shadow_x - shadow_outset,
        frame.y + styling.shadow_y - shadow_outset,
        frame.width + shadow_outset * 2.0,
        frame.height + shadow_outset * 2.0,
    );
    let right = frame
        .right()
        .max(text_rect.right())
        .max(shadow_bounds.right());
    let bottom = frame
        .bottom()
        .max(text_rect.bottom())
        .max(shadow_bounds.bottom())
        .max(180.0);
    UiSize::new(right.ceil().max(1.0), bottom.ceil().max(1.0))
}

fn slider_options(state: &ShowcaseState, width: f32) -> widgets::SliderOptions {
    let mut options = widgets::SliderOptions::default().with_layout(
        LayoutStyle::new()
            .with_width(width)
            .with_height(24.0)
            .with_flex_shrink(0.0),
    );
    options.fill_color = if state.slider_trailing_color {
        state.slider_trailing_picker.value()
    } else {
        color(42, 49, 58)
    };
    options.thumb_shape = match state.slider_thumb_shape {
        SliderThumbChoice::Circle => widgets::slider::SliderThumbShape::Circle,
        SliderThumbChoice::Square => widgets::slider::SliderThumbShape::Square,
        SliderThumbChoice::Rectangle => widgets::slider::SliderThumbShape::Rectangle,
    };
    options.thumb_visual = UiVisual::panel(
        state.slider_thumb_picker.value(),
        Some(StrokeStyle::new(color(79, 93, 113), 1.0)),
        6.0,
    );
    options
}

#[allow(clippy::field_reassign_with_default)]
fn slider_number_input(
    ui: &mut UiDocument,
    parent: UiNodeId,
    name: &'static str,
    input: &TextInputState,
    focused: FocusedTextInput,
    state: &ShowcaseState,
    width: f32,
) {
    let mut options = TextInputOptions::default();
    options.layout = LayoutStyle::new().with_width(width).with_height(28.0);
    options.text_style = text(12.0, color(230, 236, 246));
    options.placeholder_style = text(12.0, color(144, 156, 174));
    options.edit_action = Some(format!("{name}.edit").into());
    options.focused = state.focused_text == Some(focused);
    options.caret_visible = caret_visible(state.caret_phase);
    widgets::text_input(ui, parent, name, input, options);
}

fn form_status_chip(
    ui: &mut UiDocument,
    parent: UiNodeId,
    name: &'static str,
    label: &'static str,
    active: bool,
) {
    let chip = ui.add_child(
        parent,
        UiNode::container(
            name,
            LayoutStyle::new()
                .with_width(82.0)
                .with_height(24.0)
                .with_padding(4.0)
                .with_flex_shrink(0.0),
        )
        .with_visual(UiVisual::panel(
            if active {
                color(35, 74, 54)
            } else {
                color(28, 34, 43)
            },
            Some(StrokeStyle::new(
                if active {
                    color(90, 160, 112)
                } else {
                    color(60, 72, 88)
                },
                1.0,
            )),
            4.0,
        )),
    );
    widgets::label(
        ui,
        chip,
        format!("{name}.label"),
        label,
        text(11.0, color(218, 228, 240)),
        LayoutStyle::new()
            .with_width_percent(1.0)
            .with_height_percent(1.0),
    );
}

fn profile_form_summary(ui: &mut UiDocument, parent: UiNodeId, state: &ShowcaseState) {
    let has_errors = widgets::form_has_errors(&state.form);
    let title = profile_form_summary_title(state, has_errors);
    let detail = format!(
        "{} | {} | {}",
        profile_summary_value(state.form_name_text.text(), "No name"),
        profile_summary_value(state.form_email_text.text(), "No email"),
        profile_summary_value(state.form_role_text.text(), "No role"),
    );
    let hint = profile_form_summary_hint(state, has_errors);
    let stroke = if has_errors {
        color(196, 94, 104)
    } else if state.form.dirty {
        color(205, 160, 71)
    } else if state.form.submitted {
        color(91, 164, 119)
    } else {
        color(60, 72, 88)
    };
    let summary = ui.add_child(
        parent,
        UiNode::container(
            "forms.profile.summary",
            LayoutStyle::column()
                .with_width_percent(1.0)
                .with_padding(10.0)
                .with_gap(4.0)
                .with_flex_shrink(0.0),
        )
        .with_visual(UiVisual::panel(
            color(20, 25, 32),
            Some(StrokeStyle::new(stroke, 1.0)),
            4.0,
        ))
        .with_accessibility(
            AccessibilityMeta::new(AccessibilityRole::Group)
                .label("Live profile summary")
                .value(format!("{title}. {detail}. {hint}")),
        ),
    );
    widgets::label(
        ui,
        summary,
        "forms.profile.summary.title",
        title,
        text(13.0, color(232, 240, 250)),
        LayoutStyle::new().with_width_percent(1.0),
    );
    widgets::label(
        ui,
        summary,
        "forms.profile.summary.detail",
        detail,
        text(12.0, color(186, 198, 216)),
        LayoutStyle::new().with_width_percent(1.0),
    );
    widgets::label(
        ui,
        summary,
        "forms.profile.summary.hint",
        hint,
        text(11.0, color(154, 166, 184)),
        LayoutStyle::new().with_width_percent(1.0),
    );
}

fn profile_form_summary_title(state: &ShowcaseState, has_errors: bool) -> &'static str {
    if has_errors {
        "Profile needs fixes"
    } else if state.form.submitted {
        "Profile submitted"
    } else if state.form.dirty {
        "Profile draft"
    } else {
        "Profile saved"
    }
}

fn profile_form_summary_hint(state: &ShowcaseState, has_errors: bool) -> &'static str {
    if has_errors {
        "Fix validation errors before applying or submitting."
    } else if state.form.dirty {
        "Apply saves the draft; Submit saves and marks it submitted."
    } else if state.form.submitted {
        "Submission completed. Apply stays disabled until something changes."
    } else {
        "No pending changes. Submit marks the saved profile submitted."
    }
}

fn profile_summary_value<'a>(value: &'a str, empty: &'static str) -> &'a str {
    let value = value.trim();
    if value.is_empty() {
        empty
    } else {
        value
    }
}

#[allow(clippy::field_reassign_with_default)]
fn form_text_field(
    ui: &mut UiDocument,
    parent: UiNodeId,
    name: &'static str,
    input: &TextInputState,
    focused: FocusedTextInput,
    state: &ShowcaseState,
) {
    let mut options = TextInputOptions::default();
    options.layout = LayoutStyle::new().with_width_percent(1.0).with_height(30.0);
    options.text_style = text(12.0, color(230, 236, 246));
    options.placeholder_style = text(12.0, color(144, 156, 174));
    options.placeholder = "Required".to_string();
    options.edit_action = Some(format!("{name}.edit").into());
    options.focused = state.focused_text == Some(focused);
    options.caret_visible = caret_visible(state.caret_phase);
    widgets::text_input(ui, parent, name, input, options);
}

fn profile_email_valid(email: &str) -> bool {
    let email = email.trim();
    let Some((local, domain)) = email.split_once('@') else {
        return false;
    };
    !local.is_empty() && domain.contains('.') && !domain.ends_with('.')
}

fn drag_source_layout() -> LayoutStyle {
    LayoutStyle::row()
        .with_width(128.0)
        .with_height(40.0)
        .with_padding(8.0)
        .with_gap(6.0)
        .with_flex_shrink(0.0)
}

fn drop_zone_layout() -> LayoutStyle {
    LayoutStyle::column()
        .with_width(128.0)
        .with_height(78.0)
        .with_padding(10.0)
        .with_gap(6.0)
        .with_flex_shrink(0.0)
}

fn dnd_operation_chip(
    ui: &mut UiDocument,
    parent: UiNodeId,
    name: &'static str,
    label: &'static str,
) {
    let chip = ui.add_child(
        parent,
        UiNode::container(
            name,
            LayoutStyle::new()
                .with_width(58.0)
                .with_height(22.0)
                .with_padding(3.0)
                .with_flex_shrink(0.0),
        )
        .with_visual(UiVisual::panel(
            color(26, 32, 42),
            Some(StrokeStyle::new(color(62, 76, 94), 1.0)),
            3.0,
        )),
    );
    widgets::label(
        ui,
        chip,
        format!("{name}.label"),
        label,
        text(11.0, color(190, 204, 222)),
        LayoutStyle::new()
            .with_width_percent(1.0)
            .with_height_percent(1.0),
    );
}

fn media_preview_image_layout() -> LayoutStyle {
    LayoutStyle::size(46.0, 46.0).with_flex_shrink(0.0)
}

fn media_icon_columns(state: &ShowcaseState) -> usize {
    let theme = state.app_theme();
    let options = showcase_desktop_options(state.last_desktop_size, &theme);
    let window_width = state
        .desktop
        .size("media", default_window_size("media"))
        .width;
    let content_width = (window_width - options.content_padding * 2.0).max(MEDIA_ICON_TILE_WIDTH);
    let pitch = MEDIA_ICON_TILE_WIDTH + MEDIA_ICON_GRID_GAP;
    (((content_width + MEDIA_ICON_GRID_GAP) / pitch).floor() as usize).clamp(1, MEDIA_ICON_COLUMNS)
}

fn media_icon_grid_width(columns: usize) -> f32 {
    let columns = columns.max(1);
    columns as f32 * MEDIA_ICON_TILE_WIDTH + columns.saturating_sub(1) as f32 * MEDIA_ICON_GRID_GAP
}

fn media_icon_grid_height(columns: usize, item_count: usize) -> f32 {
    let columns = columns.max(1);
    let rows = item_count.div_ceil(columns).max(1);
    rows as f32 * MEDIA_ICON_TILE_HEIGHT + rows.saturating_sub(1) as f32 * MEDIA_ICON_GRID_GAP
}

fn media_icon_grid(
    ui: &mut UiDocument,
    parent: UiNodeId,
    name: impl Into<String>,
    columns: usize,
    item_count: usize,
) -> UiNodeId {
    let columns = columns.clamp(1, MEDIA_ICON_COLUMNS);
    let rows = item_count.div_ceil(columns).max(1);
    let width = media_icon_grid_width(columns);
    let height = media_icon_grid_height(columns, item_count);
    let layout = operad::layout::with_grid_template_rows(
        operad::layout::with_grid_template_columns(
            Layout::grid()
                .size(LayoutSize::points(width, height))
                .gap(LayoutGap::points(MEDIA_ICON_GRID_GAP, MEDIA_ICON_GRID_GAP))
                .flex(0.0, 0.0, LayoutDimension::Auto)
                .to_layout_style(),
            (0..columns).map(|_| LayoutGridTrack::points(MEDIA_ICON_TILE_WIDTH)),
        ),
        (0..rows).map(|_| LayoutGridTrack::points(MEDIA_ICON_TILE_HEIGHT)),
    );
    ui.add_child(parent, UiNode::container(name, layout))
}

fn media_icon_tile(ui: &mut UiDocument, parent: UiNodeId, icon: BuiltInIcon) {
    let name = icon.key().replace('.', "_").replace('-', "_");
    let tile = ui.add_child(
        parent,
        UiNode::container(
            format!("media.icon_tile.{name}"),
            LayoutStyle::column()
                .with_width(MEDIA_ICON_TILE_WIDTH)
                .with_height(MEDIA_ICON_TILE_HEIGHT)
                .with_padding(6.0)
                .with_gap(4.0)
                .with_flex_shrink(0.0),
        )
        .with_visual(UiVisual::panel(
            color(17, 22, 30),
            Some(StrokeStyle::new(color(50, 62, 78), 1.0)),
            4.0,
        )),
    );
    widgets::image(
        ui,
        tile,
        format!("media.icon.{name}"),
        icon_image(icon),
        widgets::ImageOptions::default()
            .with_layout(LayoutStyle::size(28.0, 28.0))
            .with_accessibility_label(icon.label()),
    );
    widgets::label(
        ui,
        tile,
        format!("media.icon_label.{name}"),
        icon.label(),
        text(9.0, color(180, 194, 214)),
        LayoutStyle::new().with_width_percent(1.0).with_height(30.0),
    );
}

fn slider_checkbox(
    ui: &mut UiDocument,
    parent: UiNodeId,
    name: &'static str,
    label: &'static str,
    checked: bool,
) {
    slider_checkbox_with_layout(
        ui,
        parent,
        name,
        label,
        checked,
        LayoutStyle::new().with_width_percent(1.0).with_height(30.0),
    );
}

fn slider_checkbox_with_layout(
    ui: &mut UiDocument,
    parent: UiNodeId,
    name: &'static str,
    label: &'static str,
    checked: bool,
    layout: LayoutStyle,
) {
    let mut options = widgets::CheckboxOptions::default().with_action(name);
    options.layout = layout;
    options.text_style = text(12.0, color(220, 228, 238));
    widgets::checkbox(ui, parent, name, label, checked, options);
}

fn choice_button(
    ui: &mut UiDocument,
    parent: UiNodeId,
    name: &'static str,
    label: &'static str,
    selected: bool,
) {
    let mut options =
        widgets::ButtonOptions::new(LayoutStyle::new().with_width(78.0).with_height(28.0))
            .with_action(name);
    options.visual = if selected {
        button_visual(48, 112, 184)
    } else {
        button_visual(38, 46, 58)
    };
    options.hovered_visual = Some(button_visual(65, 86, 106));
    options.pressed_visual = Some(button_visual(34, 54, 84));
    options.text_style = text(12.0, color(238, 244, 252));
    widgets::button(ui, parent, name, label, options);
}

fn divider(ui: &mut UiDocument, parent: UiNodeId, name: &'static str) {
    ui.add_child(
        parent,
        UiNode::container(
            name,
            LayoutStyle::new()
                .with_width_percent(1.0)
                .with_height(1.0)
                .with_flex_shrink(0.0),
        )
        .with_visual(UiVisual::panel(color(48, 58, 72), None, 0.0)),
    );
}

fn canvas(ui: &mut UiDocument, parent: UiNodeId, state: &ShowcaseState) {
    let canvas_intrinsic = UiSize::new(720.0, 405.0);
    let body = section_with_min_viewport(ui, parent, "canvas", "Canvas", UiSize::new(720.0, 458.0));
    let controls = wrapping_row(ui, body, "canvas.options", 10.0);
    canvas_option_checkbox(
        ui,
        controls,
        "canvas.grow_horizontal",
        "Grow width",
        state.canvas_grow_horizontal,
    );
    canvas_option_checkbox(
        ui,
        controls,
        "canvas.grow_vertical",
        "Grow height",
        state.canvas_grow_vertical,
    );
    canvas_option_checkbox(
        ui,
        controls,
        "canvas.keep_aspect_ratio",
        "Keep aspect ratio",
        state.canvas_keep_aspect_ratio,
    );

    let mut options = widgets::CanvasOptions::default()
        .with_accessibility_label("Shader canvas")
        .with_action("canvas.rotate")
        .with_intrinsic_size(canvas_intrinsic);
    options.action_mode = WidgetActionMode::Drag;
    if state.canvas_keep_aspect_ratio {
        options = options.with_aspect_ratio(16.0 / 9.0);
    }
    let canvas_width = if state.canvas_grow_horizontal {
        LayoutDimension::percent(1.0)
    } else {
        LayoutDimension::points(canvas_intrinsic.width)
    };
    let canvas_height = if state.canvas_grow_vertical {
        LayoutDimension::percent(1.0)
    } else {
        LayoutDimension::points(canvas_intrinsic.height)
    };
    options.layout = Layout::new()
        .size(LayoutSize::new(canvas_width, canvas_height))
        .min_size(LayoutSize::points(
            canvas_intrinsic.width,
            canvas_intrinsic.height,
        ))
        .flex(
            if state.canvas_grow_vertical { 1.0 } else { 0.0 },
            1.0,
            LayoutDimension::Auto,
        )
        .to_layout_style();
    options.visual = UiVisual::panel(
        color(18, 22, 28),
        Some(StrokeStyle::new(color(58, 68, 84), 1.0)),
        4.0,
    );
    widgets::canvas(
        ui,
        body,
        "canvas.shader",
        CanvasContent::new("canvas.shader").program(showcase_canvas_program(state.cube)),
        options,
    );
}

fn canvas_option_checkbox(
    ui: &mut UiDocument,
    parent: UiNodeId,
    name: &'static str,
    label: &'static str,
    checked: bool,
) {
    let mut options = widgets::CheckboxOptions::default()
        .with_action(name)
        .with_text_style(text(12.0, color(220, 228, 238)));
    options.layout = LayoutStyle::new().with_height(28.0).with_flex_shrink(0.0);
    widgets::checkbox(ui, parent, name, label, checked, options);
}

fn showcase_canvas_program(cube: CanvasCubeState) -> CanvasRenderProgram {
    CanvasRenderProgram::wgsl(include_str!("shaders/showcase_canvas.wgsl"))
        .label("showcase.canvas")
        .constant("CUBE_YAW", cube.yaw as f64)
        .constant("CUBE_PITCH", cube.pitch as f64)
        .clear_color(Some(color(18, 22, 28)))
}

fn section(
    ui: &mut UiDocument,
    parent: UiNodeId,
    name: impl Into<String>,
    _title: impl Into<String>,
) -> UiNodeId {
    section_with_min_viewport(ui, parent, name, _title, UiSize::ZERO)
}

fn section_with_min_viewport(
    ui: &mut UiDocument,
    parent: UiNodeId,
    name: impl Into<String>,
    _title: impl Into<String>,
    min_viewport_size: UiSize,
) -> UiNodeId {
    let name = name.into();
    let layout = Layout::column()
        .size(LayoutSize::percent(1.0, 1.0))
        .min_size(LayoutSize::points(
            min_viewport_size.width.max(0.0),
            min_viewport_size.height.max(0.0),
        ))
        .gap(LayoutGap::points(10.0, 10.0))
        .flex(1.0, 1.0, LayoutDimension::Auto)
        .to_layout_style();
    widgets::scroll_area(
        ui,
        parent,
        format!("{name}.section_scroll"),
        ScrollAxes::BOTH,
        layout,
    )
}

fn row(ui: &mut UiDocument, parent: UiNodeId, name: impl Into<String>, gap: f32) -> UiNodeId {
    ui.add_child(
        parent,
        UiNode::container(
            name,
            Layout::row()
                .size(LayoutSize::new(
                    LayoutDimension::percent(1.0),
                    LayoutDimension::Auto,
                ))
                .align_items(LayoutAlignment::Center)
                .gap(LayoutGap::points(gap, gap))
                .flex(0.0, 0.0, LayoutDimension::Auto)
                .to_layout_style(),
        ),
    )
}

fn wrapping_row(
    ui: &mut UiDocument,
    parent: UiNodeId,
    name: impl Into<String>,
    gap: f32,
) -> UiNodeId {
    ui.add_child(
        parent,
        UiNode::container(
            name,
            Layout::row()
                .size(LayoutSize::new(
                    LayoutDimension::percent(1.0),
                    LayoutDimension::Auto,
                ))
                .min_size(LayoutSize::points(0.0, 0.0))
                .align_items(LayoutAlignment::Center)
                .gap(LayoutGap::points(gap, gap))
                .flex_wrap(LayoutFlexWrap::Wrap)
                .flex(0.0, 0.0, LayoutDimension::Auto)
                .to_layout_style(),
        ),
    )
}

pub const fn percent(width: f32, height: f32) -> Self

Examples found in repository

examples/showcase.rs (line 12484)

fn styling_widgets(ui: &mut UiDocument, parent: UiNodeId, state: &ShowcaseState) {
    let preview_scene_size = style_preview_scene_size(state.styling);
    let preview_min_width = preview_scene_size.width + 16.0;
    let preview_min_height = preview_scene_size.height + 16.0;
    let body_min_width = STYLING_CONTROLS_WIDTH + 1.0 + preview_min_width + 20.0;
    let body = section_with_min_viewport(
        ui,
        parent,
        "styling",
        "Styling",
        UiSize::new(body_min_width, preview_min_height),
    );
    let grid_layout = operad::layout::with_grid_template_columns(
        Layout::grid()
            .size(LayoutSize::percent(1.0, 1.0))
            .gap(LayoutGap::points(10.0, 10.0))
            .to_layout_style(),
        [
            LayoutGridTrack::points(STYLING_CONTROLS_WIDTH),
            LayoutGridTrack::points(1.0),
            LayoutGridTrack::minmax_points_fraction(preview_min_width, 1.0),
        ],
    );
    let grid = ui.add_child(body, UiNode::container("styling.grid", grid_layout));
    let controls = ui.add_child(
        grid,
        UiNode::container(
            "styling.controls",
            LayoutStyle::column()
                .with_width(STYLING_CONTROLS_WIDTH)
                .with_height_percent(1.0)
                .with_flex_shrink(0.0)
                .gap(6.0),
        ),
    );
    style_edge_group(
        ui,
        controls,
        "styling.inner",
        "Inner margin",
        "styling.inner_same",
        state.styling.inner_same,
        [
            ("Left", "styling.inner", state.styling.inner_margin),
            ("Right", "styling.inner_right", state.styling.inner_right),
            ("Top", "styling.inner_top", state.styling.inner_top),
            ("Bottom", "styling.inner_bottom", state.styling.inner_bottom),
        ],
        0.0..32.0,
    );
    style_edge_group(
        ui,
        controls,
        "styling.outer",
        "Outer margin",
        "styling.outer_same",
        state.styling.outer_same,
        [
            ("Left", "styling.outer", state.styling.outer_margin),
            ("Right", "styling.outer_right", state.styling.outer_right),
            ("Top", "styling.outer_top", state.styling.outer_top),
            ("Bottom", "styling.outer_bottom", state.styling.outer_bottom),
        ],
        0.0..40.0,
    );
    style_edge_group(
        ui,
        controls,
        "styling.radius",
        "Corner radius",
        "styling.radius_same",
        state.styling.radius_same,
        [
            ("NW", "styling.radius", state.styling.corner_radius),
            ("NE", "styling.radius_ne", state.styling.corner_ne),
            ("SW", "styling.radius_sw", state.styling.corner_sw),
            ("SE", "styling.radius_se", state.styling.corner_se),
        ],
        0.0..28.0,
    );
    style_fill_group(ui, controls, state);
    style_stroke_group(ui, controls, state);
    style_shadow_group(ui, controls, state);
    widgets::separator(
        ui,
        grid,
        "styling.preview.separator",
        widgets::SeparatorOptions::vertical().with_layout(
            LayoutStyle::new()
                .with_width(1.0)
                .with_height_percent(1.0)
                .with_flex_shrink(0.0),
        ),
    );

    let preview = ui.add_child(
        grid,
        UiNode::container(
            "styling.preview",
            operad::layout::with_min_size(
                LayoutStyle::column()
                    .with_width_percent(1.0)
                    .with_height_percent(1.0)
                    .with_flex_shrink(0.0)
                    .padding(8.0),
                operad::layout::px(preview_min_width),
                operad::layout::px(preview_min_height),
            ),
        )
        .with_visual(UiVisual::panel(color(17, 20, 25), None, 0.0)),
    );
    style_preview(ui, preview, state.styling);
}

#[allow(clippy::too_many_arguments)]
fn style_edge_group(
    ui: &mut UiDocument,
    parent: UiNodeId,
    name: &'static str,
    title: &'static str,
    same_action: &'static str,
    same: bool,
    values: [(&'static str, &'static str, f32); 4],
    range: std::ops::Range<f32>,
) {
    let group = style_control_group(ui, parent, format!("{name}.group"));
    style_group_title(ui, group, format!("{name}.title"), title);
    let fields = ui.add_child(
        group,
        UiNode::container(
            format!("{name}.fields"),
            LayoutStyle::column()
                .with_width(138.0)
                .with_flex_shrink(0.0)
                .gap(3.0),
        ),
    );
    style_compact_checkbox(ui, fields, same_action, "same", same);
    if same {
        style_number_row(ui, fields, values[0].1, "All", values[0].2, range, 0);
    } else {
        for (label, action, value) in values {
            style_number_row(ui, fields, action, label, value, range.clone(), 0);
        }
    }
}

fn style_fill_group(ui: &mut UiDocument, parent: UiNodeId, state: &ShowcaseState) {
    let group = style_control_group(ui, parent, "styling.fill.group");
    style_group_title(ui, group, "styling.fill.title", "Fill");
    let fields = style_group_fields(
        ui,
        group,
        "styling.fill.fields",
        STYLING_WIDE_FIELDS_WIDTH,
        4.0,
    );
    style_color_button_row(
        ui,
        fields,
        "styling.fill_color_button",
        "",
        state.styling.fill_color(),
        "Pick fill color",
    );
    if state.styling_fill_picker_open {
        ext_widgets::color_picker(
            ui,
            fields,
            "styling.fill_picker",
            &state.styling_fill_picker,
            ext_widgets::ColorPickerOptions::default()
                .with_label("Fill")
                .with_action_prefix("styling.fill_picker"),
        );
    }
}

fn style_stroke_group(ui: &mut UiDocument, parent: UiNodeId, state: &ShowcaseState) {
    let group = style_control_group(ui, parent, "styling.stroke.group");
    style_group_title(ui, group, "styling.stroke.title", "Stroke");
    let fields = style_group_fields(
        ui,
        group,
        "styling.stroke.fields",
        STYLING_WIDE_FIELDS_WIDTH,
        4.0,
    );
    let width_row = row(ui, fields, "styling.stroke.row", 6.0);
    style_inline_number(
        ui,
        width_row,
        "styling.stroke",
        "width",
        state.styling.stroke_width,
        0.0..STYLING_STROKE_MAX,
        1,
    );
    let mut options = widgets::SliderOptions::default()
        .with_layout(
            LayoutStyle::new()
                .with_width(60.0)
                .with_height(20.0)
                .with_flex_shrink(0.0),
        )
        .with_value_edit_action("styling.stroke");
    options.fill_color = color(120, 170, 230);
    widgets::slider(
        ui,
        width_row,
        "styling.stroke.slider",
        (state.styling.stroke_width / STYLING_STROKE_MAX).clamp(0.0, 1.0),
        0.0..1.0,
        options,
    );
    style_color_button_row(
        ui,
        fields,
        "styling.stroke_color_button",
        "",
        state.styling.stroke_color(),
        "Pick stroke color",
    );
    if state.styling_stroke_picker_open {
        ext_widgets::color_picker(
            ui,
            fields,
            "styling.stroke_picker",
            &state.styling_stroke_picker,
            ext_widgets::ColorPickerOptions::default()
                .with_label("Stroke color")
                .with_action_prefix("styling.stroke_picker"),
        );
    }
}

fn style_shadow_group(ui: &mut UiDocument, parent: UiNodeId, state: &ShowcaseState) {
    let group = style_control_group(ui, parent, "styling.shadow.group");
    style_group_title(ui, group, "styling.shadow.title", "Shadow");
    let fields = style_group_fields(
        ui,
        group,
        "styling.shadow.fields",
        STYLING_WIDE_FIELDS_WIDTH,
        4.0,
    );
    let offsets = row(ui, fields, "styling.shadow.offsets", 6.0);
    style_inline_number(
        ui,
        offsets,
        "styling.shadow_x",
        "x",
        state.styling.shadow_x,
        -24.0..24.0,
        0,
    );
    style_inline_number(
        ui,
        offsets,
        "styling.shadow_y",
        "y",
        state.styling.shadow_y,
        -24.0..24.0,
        0,
    );
    let spread = row(ui, fields, "styling.shadow.blur_spread", 6.0);
    style_inline_number(
        ui,
        spread,
        "styling.shadow",
        "blur",
        state.styling.shadow_blur,
        0.0..32.0,
        0,
    );
    style_inline_number(
        ui,
        spread,
        "styling.shadow_spread",
        "spread",
        state.styling.shadow_spread,
        0.0..16.0,
        0,
    );
    style_color_button_row(
        ui,
        fields,
        "styling.shadow_color_button",
        "",
        state.styling.shadow_color(),
        "Pick shadow color",
    );
    if state.styling_shadow_picker_open {
        ext_widgets::color_picker(
            ui,
            fields,
            "styling.shadow_picker",
            &state.styling_shadow_picker,
            ext_widgets::ColorPickerOptions::default()
                .with_label("Shadow color")
                .with_action_prefix("styling.shadow_picker"),
        );
    }
}

fn style_control_group(ui: &mut UiDocument, parent: UiNodeId, name: impl Into<String>) -> UiNodeId {
    ui.add_child(
        parent,
        UiNode::container(
            name,
            LayoutStyle::row()
                .with_width_percent(1.0)
                .with_flex_shrink(0.0)
                .padding(4.0)
                .gap(8.0),
        )
        .with_visual(UiVisual::panel(color(23, 27, 33), None, 2.0)),
    )
}

fn style_group_fields(
    ui: &mut UiDocument,
    parent: UiNodeId,
    name: impl Into<String>,
    width: f32,
    gap: f32,
) -> UiNodeId {
    ui.add_child(
        parent,
        UiNode::container(
            name,
            LayoutStyle::column()
                .with_width(width)
                .with_flex_shrink(0.0)
                .gap(gap),
        ),
    )
}

fn style_group_title(
    ui: &mut UiDocument,
    parent: UiNodeId,
    name: impl Into<String>,
    label: &'static str,
) {
    widgets::label(
        ui,
        parent,
        name,
        label,
        text(12.0, color(166, 176, 190)),
        LayoutStyle::new()
            .with_width(88.0)
            .with_flex_shrink(0.0)
            .with_height(22.0),
    );
}

fn style_color_button_row(
    ui: &mut UiDocument,
    parent: UiNodeId,
    action: &'static str,
    label: &'static str,
    value: ColorRgba,
    accessibility_label: &'static str,
) {
    let row = row(ui, parent, format!("{action}.row"), 8.0);
    if !label.is_empty() {
        widgets::label(
            ui,
            row,
            format!("{action}.label"),
            label,
            text(12.0, color(166, 176, 190)),
            LayoutStyle::new()
                .with_width(86.0)
                .with_flex_shrink(0.0)
                .with_height(24.0),
        );
    }
    ext_widgets::color_edit_button(
        ui,
        row,
        action,
        value,
        color_mini_button_options(action)
            .with_format(ext_widgets::ColorValueFormat::Rgba)
            .accessibility_label(accessibility_label),
    );
    widgets::label(
        ui,
        row,
        format!("{action}.value"),
        ext_widgets::color_picker::format_hex_color(value, value.a < 255),
        text(12.0, color(226, 232, 242)),
        LayoutStyle::new().with_width(96.0).with_height(24.0),
    );
}

fn style_number_row(
    ui: &mut UiDocument,
    parent: UiNodeId,
    name: &'static str,
    label: &'static str,
    value: f32,
    range: std::ops::Range<f32>,
    decimals: u8,
) {
    let row = row(ui, parent, format!("{name}.row"), 6.0);
    widgets::label(
        ui,
        row,
        format!("{name}.label"),
        label,
        text(12.0, color(166, 176, 190)),
        LayoutStyle::new().with_width(48.0).with_height(22.0),
    );
    style_value_input(ui, row, name, value, range, decimals);
}

fn style_inline_number(
    ui: &mut UiDocument,
    parent: UiNodeId,
    name: &'static str,
    label: &'static str,
    value: f32,
    range: std::ops::Range<f32>,
    decimals: u8,
) {
    let row = compact_row(ui, parent, format!("{name}.inline"), 3.0);
    widgets::label(
        ui,
        row,
        format!("{name}.inline_label"),
        format!("{label}:"),
        text(12.0, color(166, 176, 190)),
        LayoutStyle::new()
            .with_width(if label.len() > 1 { 42.0 } else { 16.0 })
            .with_height(22.0),
    );
    style_value_input(ui, row, name, value, range, decimals);
}

fn style_value_input(
    ui: &mut UiDocument,
    parent: UiNodeId,
    name: &'static str,
    value: f32,
    range: std::ops::Range<f32>,
    decimals: u8,
) {
    let mut options = widgets::DragValueOptions::default()
        .with_layout(
            LayoutStyle::row()
                .with_width(STYLING_VALUE_INPUT_WIDTH)
                .with_height(22.0)
                .with_flex_shrink(0.0)
                .with_align_items(taffy::prelude::AlignItems::Center)
                .with_justify_content(taffy::prelude::JustifyContent::Center)
                .with_padding(4.0),
        )
        .with_range(ext_widgets::NumericRange::new(
            f64::from(range.start),
            f64::from(range.end),
        ))
        .with_precision(ext_widgets::NumericPrecision::decimals(decimals))
        .with_action(name);
    options.text_style = text(12.0, color(226, 232, 242));
    widgets::drag_value_input(ui, parent, name, f64::from(value), options);
}

fn style_compact_checkbox(
    ui: &mut UiDocument,
    parent: UiNodeId,
    name: &'static str,
    label: &'static str,
    checked: bool,
) {
    let mut options = widgets::CheckboxOptions::default().with_action(name);
    options.layout = LayoutStyle::new().with_width(92.0).with_height(22.0);
    options.text_style = text(12.0, color(220, 228, 238));
    widgets::checkbox(ui, parent, name, label, checked, options);
}

fn compact_row(
    ui: &mut UiDocument,
    parent: UiNodeId,
    name: impl Into<String>,
    gap: f32,
) -> UiNodeId {
    ui.add_child(
        parent,
        UiNode::container(
            name,
            LayoutStyle::row()
                .with_height(22.0)
                .with_flex_shrink(0.0)
                .with_align_items(taffy::prelude::AlignItems::Center)
                .gap(gap),
        ),
    )
}

fn color_mini_button_options(action: &'static str) -> ext_widgets::ColorButtonOptions {
    ext_widgets::ColorButtonOptions::default()
        .with_layout(LayoutStyle::size(28.0, 24.0).with_flex_shrink(0.0))
        .with_swatch_size(UiSize::new(22.0, 18.0))
        .with_action(action)
        .show_label(false)
}

fn style_preview(ui: &mut UiDocument, parent: UiNodeId, styling: StylingState) {
    let (frame, text_rect) = style_preview_rects(styling);
    let scene_size = style_preview_scene_size(styling);
    ui.add_child(
        parent,
        UiNode::scene(
            "styling.preview.scene",
            vec![
                ScenePrimitive::Rect(
                    PaintRect::solid(frame, styling.fill_color())
                        .stroke(AlignedStroke::inside(StrokeStyle::new(
                            styling.stroke_color(),
                            styling.stroke_width,
                        )))
                        .corner_radii(styling.radii())
                        .effect(PaintEffect::shadow(
                            styling.shadow_color(),
                            UiPoint::new(styling.shadow_x, styling.shadow_y),
                            styling.shadow_blur,
                            styling.shadow_spread,
                        )),
                ),
                ScenePrimitive::Text(
                    PaintText::new("Content", text_rect, text(13.0, color(255, 255, 255)))
                        .horizontal_align(TextHorizontalAlign::Center)
                        .vertical_align(TextVerticalAlign::Center)
                        .multiline(false),
                ),
            ],
            operad::layout::with_min_size(
                LayoutStyle::new()
                    .with_width_percent(1.0)
                    .with_height(180.0)
                    .with_flex_shrink(0.0),
                operad::layout::px(scene_size.width),
                operad::layout::px(scene_size.height),
            ),
        ),
    );
}

fn style_preview_rects(styling: StylingState) -> (UiRect, UiRect) {
    let outer = styling.outer_edges();
    let inner = styling.inner_edges();
    let frame = UiRect::new(
        22.0 + outer[0],
        28.0 + outer[2],
        108.0 + inner[0] + inner[1],
        40.0 + inner[2] + inner[3],
    );
    let text_rect = UiRect::new(
        frame.x + inner[0],
        frame.y + inner[2],
        (frame.width - inner[0] - inner[1]).max(1.0),
        (frame.height - inner[2] - inner[3]).max(1.0),
    );
    (frame, text_rect)
}

fn style_preview_scene_size(styling: StylingState) -> UiSize {
    let (frame, text_rect) = style_preview_rects(styling);
    let shadow_outset = styling.shadow_blur.max(0.0) + styling.shadow_spread.max(0.0);
    let shadow_bounds = UiRect::new(
        frame.x + styling.shadow_x - shadow_outset,
        frame.y + styling.shadow_y - shadow_outset,
        frame.width + shadow_outset * 2.0,
        frame.height + shadow_outset * 2.0,
    );
    let right = frame
        .right()
        .max(text_rect.right())
        .max(shadow_bounds.right());
    let bottom = frame
        .bottom()
        .max(text_rect.bottom())
        .max(shadow_bounds.bottom())
        .max(180.0);
    UiSize::new(right.ceil().max(1.0), bottom.ceil().max(1.0))
}

fn slider_options(state: &ShowcaseState, width: f32) -> widgets::SliderOptions {
    let mut options = widgets::SliderOptions::default().with_layout(
        LayoutStyle::new()
            .with_width(width)
            .with_height(24.0)
            .with_flex_shrink(0.0),
    );
    options.fill_color = if state.slider_trailing_color {
        state.slider_trailing_picker.value()
    } else {
        color(42, 49, 58)
    };
    options.thumb_shape = match state.slider_thumb_shape {
        SliderThumbChoice::Circle => widgets::slider::SliderThumbShape::Circle,
        SliderThumbChoice::Square => widgets::slider::SliderThumbShape::Square,
        SliderThumbChoice::Rectangle => widgets::slider::SliderThumbShape::Rectangle,
    };
    options.thumb_visual = UiVisual::panel(
        state.slider_thumb_picker.value(),
        Some(StrokeStyle::new(color(79, 93, 113), 1.0)),
        6.0,
    );
    options
}

#[allow(clippy::field_reassign_with_default)]
fn slider_number_input(
    ui: &mut UiDocument,
    parent: UiNodeId,
    name: &'static str,
    input: &TextInputState,
    focused: FocusedTextInput,
    state: &ShowcaseState,
    width: f32,
) {
    let mut options = TextInputOptions::default();
    options.layout = LayoutStyle::new().with_width(width).with_height(28.0);
    options.text_style = text(12.0, color(230, 236, 246));
    options.placeholder_style = text(12.0, color(144, 156, 174));
    options.edit_action = Some(format!("{name}.edit").into());
    options.focused = state.focused_text == Some(focused);
    options.caret_visible = caret_visible(state.caret_phase);
    widgets::text_input(ui, parent, name, input, options);
}

fn form_status_chip(
    ui: &mut UiDocument,
    parent: UiNodeId,
    name: &'static str,
    label: &'static str,
    active: bool,
) {
    let chip = ui.add_child(
        parent,
        UiNode::container(
            name,
            LayoutStyle::new()
                .with_width(82.0)
                .with_height(24.0)
                .with_padding(4.0)
                .with_flex_shrink(0.0),
        )
        .with_visual(UiVisual::panel(
            if active {
                color(35, 74, 54)
            } else {
                color(28, 34, 43)
            },
            Some(StrokeStyle::new(
                if active {
                    color(90, 160, 112)
                } else {
                    color(60, 72, 88)
                },
                1.0,
            )),
            4.0,
        )),
    );
    widgets::label(
        ui,
        chip,
        format!("{name}.label"),
        label,
        text(11.0, color(218, 228, 240)),
        LayoutStyle::new()
            .with_width_percent(1.0)
            .with_height_percent(1.0),
    );
}

fn profile_form_summary(ui: &mut UiDocument, parent: UiNodeId, state: &ShowcaseState) {
    let has_errors = widgets::form_has_errors(&state.form);
    let title = profile_form_summary_title(state, has_errors);
    let detail = format!(
        "{} | {} | {}",
        profile_summary_value(state.form_name_text.text(), "No name"),
        profile_summary_value(state.form_email_text.text(), "No email"),
        profile_summary_value(state.form_role_text.text(), "No role"),
    );
    let hint = profile_form_summary_hint(state, has_errors);
    let stroke = if has_errors {
        color(196, 94, 104)
    } else if state.form.dirty {
        color(205, 160, 71)
    } else if state.form.submitted {
        color(91, 164, 119)
    } else {
        color(60, 72, 88)
    };
    let summary = ui.add_child(
        parent,
        UiNode::container(
            "forms.profile.summary",
            LayoutStyle::column()
                .with_width_percent(1.0)
                .with_padding(10.0)
                .with_gap(4.0)
                .with_flex_shrink(0.0),
        )
        .with_visual(UiVisual::panel(
            color(20, 25, 32),
            Some(StrokeStyle::new(stroke, 1.0)),
            4.0,
        ))
        .with_accessibility(
            AccessibilityMeta::new(AccessibilityRole::Group)
                .label("Live profile summary")
                .value(format!("{title}. {detail}. {hint}")),
        ),
    );
    widgets::label(
        ui,
        summary,
        "forms.profile.summary.title",
        title,
        text(13.0, color(232, 240, 250)),
        LayoutStyle::new().with_width_percent(1.0),
    );
    widgets::label(
        ui,
        summary,
        "forms.profile.summary.detail",
        detail,
        text(12.0, color(186, 198, 216)),
        LayoutStyle::new().with_width_percent(1.0),
    );
    widgets::label(
        ui,
        summary,
        "forms.profile.summary.hint",
        hint,
        text(11.0, color(154, 166, 184)),
        LayoutStyle::new().with_width_percent(1.0),
    );
}

fn profile_form_summary_title(state: &ShowcaseState, has_errors: bool) -> &'static str {
    if has_errors {
        "Profile needs fixes"
    } else if state.form.submitted {
        "Profile submitted"
    } else if state.form.dirty {
        "Profile draft"
    } else {
        "Profile saved"
    }
}

fn profile_form_summary_hint(state: &ShowcaseState, has_errors: bool) -> &'static str {
    if has_errors {
        "Fix validation errors before applying or submitting."
    } else if state.form.dirty {
        "Apply saves the draft; Submit saves and marks it submitted."
    } else if state.form.submitted {
        "Submission completed. Apply stays disabled until something changes."
    } else {
        "No pending changes. Submit marks the saved profile submitted."
    }
}

fn profile_summary_value<'a>(value: &'a str, empty: &'static str) -> &'a str {
    let value = value.trim();
    if value.is_empty() {
        empty
    } else {
        value
    }
}

#[allow(clippy::field_reassign_with_default)]
fn form_text_field(
    ui: &mut UiDocument,
    parent: UiNodeId,
    name: &'static str,
    input: &TextInputState,
    focused: FocusedTextInput,
    state: &ShowcaseState,
) {
    let mut options = TextInputOptions::default();
    options.layout = LayoutStyle::new().with_width_percent(1.0).with_height(30.0);
    options.text_style = text(12.0, color(230, 236, 246));
    options.placeholder_style = text(12.0, color(144, 156, 174));
    options.placeholder = "Required".to_string();
    options.edit_action = Some(format!("{name}.edit").into());
    options.focused = state.focused_text == Some(focused);
    options.caret_visible = caret_visible(state.caret_phase);
    widgets::text_input(ui, parent, name, input, options);
}

fn profile_email_valid(email: &str) -> bool {
    let email = email.trim();
    let Some((local, domain)) = email.split_once('@') else {
        return false;
    };
    !local.is_empty() && domain.contains('.') && !domain.ends_with('.')
}

fn drag_source_layout() -> LayoutStyle {
    LayoutStyle::row()
        .with_width(128.0)
        .with_height(40.0)
        .with_padding(8.0)
        .with_gap(6.0)
        .with_flex_shrink(0.0)
}

fn drop_zone_layout() -> LayoutStyle {
    LayoutStyle::column()
        .with_width(128.0)
        .with_height(78.0)
        .with_padding(10.0)
        .with_gap(6.0)
        .with_flex_shrink(0.0)
}

fn dnd_operation_chip(
    ui: &mut UiDocument,
    parent: UiNodeId,
    name: &'static str,
    label: &'static str,
) {
    let chip = ui.add_child(
        parent,
        UiNode::container(
            name,
            LayoutStyle::new()
                .with_width(58.0)
                .with_height(22.0)
                .with_padding(3.0)
                .with_flex_shrink(0.0),
        )
        .with_visual(UiVisual::panel(
            color(26, 32, 42),
            Some(StrokeStyle::new(color(62, 76, 94), 1.0)),
            3.0,
        )),
    );
    widgets::label(
        ui,
        chip,
        format!("{name}.label"),
        label,
        text(11.0, color(190, 204, 222)),
        LayoutStyle::new()
            .with_width_percent(1.0)
            .with_height_percent(1.0),
    );
}

fn media_preview_image_layout() -> LayoutStyle {
    LayoutStyle::size(46.0, 46.0).with_flex_shrink(0.0)
}

fn media_icon_columns(state: &ShowcaseState) -> usize {
    let theme = state.app_theme();
    let options = showcase_desktop_options(state.last_desktop_size, &theme);
    let window_width = state
        .desktop
        .size("media", default_window_size("media"))
        .width;
    let content_width = (window_width - options.content_padding * 2.0).max(MEDIA_ICON_TILE_WIDTH);
    let pitch = MEDIA_ICON_TILE_WIDTH + MEDIA_ICON_GRID_GAP;
    (((content_width + MEDIA_ICON_GRID_GAP) / pitch).floor() as usize).clamp(1, MEDIA_ICON_COLUMNS)
}

fn media_icon_grid_width(columns: usize) -> f32 {
    let columns = columns.max(1);
    columns as f32 * MEDIA_ICON_TILE_WIDTH + columns.saturating_sub(1) as f32 * MEDIA_ICON_GRID_GAP
}

fn media_icon_grid_height(columns: usize, item_count: usize) -> f32 {
    let columns = columns.max(1);
    let rows = item_count.div_ceil(columns).max(1);
    rows as f32 * MEDIA_ICON_TILE_HEIGHT + rows.saturating_sub(1) as f32 * MEDIA_ICON_GRID_GAP
}

fn media_icon_grid(
    ui: &mut UiDocument,
    parent: UiNodeId,
    name: impl Into<String>,
    columns: usize,
    item_count: usize,
) -> UiNodeId {
    let columns = columns.clamp(1, MEDIA_ICON_COLUMNS);
    let rows = item_count.div_ceil(columns).max(1);
    let width = media_icon_grid_width(columns);
    let height = media_icon_grid_height(columns, item_count);
    let layout = operad::layout::with_grid_template_rows(
        operad::layout::with_grid_template_columns(
            Layout::grid()
                .size(LayoutSize::points(width, height))
                .gap(LayoutGap::points(MEDIA_ICON_GRID_GAP, MEDIA_ICON_GRID_GAP))
                .flex(0.0, 0.0, LayoutDimension::Auto)
                .to_layout_style(),
            (0..columns).map(|_| LayoutGridTrack::points(MEDIA_ICON_TILE_WIDTH)),
        ),
        (0..rows).map(|_| LayoutGridTrack::points(MEDIA_ICON_TILE_HEIGHT)),
    );
    ui.add_child(parent, UiNode::container(name, layout))
}

fn media_icon_tile(ui: &mut UiDocument, parent: UiNodeId, icon: BuiltInIcon) {
    let name = icon.key().replace('.', "_").replace('-', "_");
    let tile = ui.add_child(
        parent,
        UiNode::container(
            format!("media.icon_tile.{name}"),
            LayoutStyle::column()
                .with_width(MEDIA_ICON_TILE_WIDTH)
                .with_height(MEDIA_ICON_TILE_HEIGHT)
                .with_padding(6.0)
                .with_gap(4.0)
                .with_flex_shrink(0.0),
        )
        .with_visual(UiVisual::panel(
            color(17, 22, 30),
            Some(StrokeStyle::new(color(50, 62, 78), 1.0)),
            4.0,
        )),
    );
    widgets::image(
        ui,
        tile,
        format!("media.icon.{name}"),
        icon_image(icon),
        widgets::ImageOptions::default()
            .with_layout(LayoutStyle::size(28.0, 28.0))
            .with_accessibility_label(icon.label()),
    );
    widgets::label(
        ui,
        tile,
        format!("media.icon_label.{name}"),
        icon.label(),
        text(9.0, color(180, 194, 214)),
        LayoutStyle::new().with_width_percent(1.0).with_height(30.0),
    );
}

fn slider_checkbox(
    ui: &mut UiDocument,
    parent: UiNodeId,
    name: &'static str,
    label: &'static str,
    checked: bool,
) {
    slider_checkbox_with_layout(
        ui,
        parent,
        name,
        label,
        checked,
        LayoutStyle::new().with_width_percent(1.0).with_height(30.0),
    );
}

fn slider_checkbox_with_layout(
    ui: &mut UiDocument,
    parent: UiNodeId,
    name: &'static str,
    label: &'static str,
    checked: bool,
    layout: LayoutStyle,
) {
    let mut options = widgets::CheckboxOptions::default().with_action(name);
    options.layout = layout;
    options.text_style = text(12.0, color(220, 228, 238));
    widgets::checkbox(ui, parent, name, label, checked, options);
}

fn choice_button(
    ui: &mut UiDocument,
    parent: UiNodeId,
    name: &'static str,
    label: &'static str,
    selected: bool,
) {
    let mut options =
        widgets::ButtonOptions::new(LayoutStyle::new().with_width(78.0).with_height(28.0))
            .with_action(name);
    options.visual = if selected {
        button_visual(48, 112, 184)
    } else {
        button_visual(38, 46, 58)
    };
    options.hovered_visual = Some(button_visual(65, 86, 106));
    options.pressed_visual = Some(button_visual(34, 54, 84));
    options.text_style = text(12.0, color(238, 244, 252));
    widgets::button(ui, parent, name, label, options);
}

fn divider(ui: &mut UiDocument, parent: UiNodeId, name: &'static str) {
    ui.add_child(
        parent,
        UiNode::container(
            name,
            LayoutStyle::new()
                .with_width_percent(1.0)
                .with_height(1.0)
                .with_flex_shrink(0.0),
        )
        .with_visual(UiVisual::panel(color(48, 58, 72), None, 0.0)),
    );
}

fn canvas(ui: &mut UiDocument, parent: UiNodeId, state: &ShowcaseState) {
    let canvas_intrinsic = UiSize::new(720.0, 405.0);
    let body = section_with_min_viewport(ui, parent, "canvas", "Canvas", UiSize::new(720.0, 458.0));
    let controls = wrapping_row(ui, body, "canvas.options", 10.0);
    canvas_option_checkbox(
        ui,
        controls,
        "canvas.grow_horizontal",
        "Grow width",
        state.canvas_grow_horizontal,
    );
    canvas_option_checkbox(
        ui,
        controls,
        "canvas.grow_vertical",
        "Grow height",
        state.canvas_grow_vertical,
    );
    canvas_option_checkbox(
        ui,
        controls,
        "canvas.keep_aspect_ratio",
        "Keep aspect ratio",
        state.canvas_keep_aspect_ratio,
    );

    let mut options = widgets::CanvasOptions::default()
        .with_accessibility_label("Shader canvas")
        .with_action("canvas.rotate")
        .with_intrinsic_size(canvas_intrinsic);
    options.action_mode = WidgetActionMode::Drag;
    if state.canvas_keep_aspect_ratio {
        options = options.with_aspect_ratio(16.0 / 9.0);
    }
    let canvas_width = if state.canvas_grow_horizontal {
        LayoutDimension::percent(1.0)
    } else {
        LayoutDimension::points(canvas_intrinsic.width)
    };
    let canvas_height = if state.canvas_grow_vertical {
        LayoutDimension::percent(1.0)
    } else {
        LayoutDimension::points(canvas_intrinsic.height)
    };
    options.layout = Layout::new()
        .size(LayoutSize::new(canvas_width, canvas_height))
        .min_size(LayoutSize::points(
            canvas_intrinsic.width,
            canvas_intrinsic.height,
        ))
        .flex(
            if state.canvas_grow_vertical { 1.0 } else { 0.0 },
            1.0,
            LayoutDimension::Auto,
        )
        .to_layout_style();
    options.visual = UiVisual::panel(
        color(18, 22, 28),
        Some(StrokeStyle::new(color(58, 68, 84), 1.0)),
        4.0,
    );
    widgets::canvas(
        ui,
        body,
        "canvas.shader",
        CanvasContent::new("canvas.shader").program(showcase_canvas_program(state.cube)),
        options,
    );
}

fn canvas_option_checkbox(
    ui: &mut UiDocument,
    parent: UiNodeId,
    name: &'static str,
    label: &'static str,
    checked: bool,
) {
    let mut options = widgets::CheckboxOptions::default()
        .with_action(name)
        .with_text_style(text(12.0, color(220, 228, 238)));
    options.layout = LayoutStyle::new().with_height(28.0).with_flex_shrink(0.0);
    widgets::checkbox(ui, parent, name, label, checked, options);
}

fn showcase_canvas_program(cube: CanvasCubeState) -> CanvasRenderProgram {
    CanvasRenderProgram::wgsl(include_str!("shaders/showcase_canvas.wgsl"))
        .label("showcase.canvas")
        .constant("CUBE_YAW", cube.yaw as f64)
        .constant("CUBE_PITCH", cube.pitch as f64)
        .clear_color(Some(color(18, 22, 28)))
}

fn section(
    ui: &mut UiDocument,
    parent: UiNodeId,
    name: impl Into<String>,
    _title: impl Into<String>,
) -> UiNodeId {
    section_with_min_viewport(ui, parent, name, _title, UiSize::ZERO)
}

fn section_with_min_viewport(
    ui: &mut UiDocument,
    parent: UiNodeId,
    name: impl Into<String>,
    _title: impl Into<String>,
    min_viewport_size: UiSize,
) -> UiNodeId {
    let name = name.into();
    let layout = Layout::column()
        .size(LayoutSize::percent(1.0, 1.0))
        .min_size(LayoutSize::points(
            min_viewport_size.width.max(0.0),
            min_viewport_size.height.max(0.0),
        ))
        .gap(LayoutGap::points(10.0, 10.0))
        .flex(1.0, 1.0, LayoutDimension::Auto)
        .to_layout_style();
    widgets::scroll_area(
        ui,
        parent,
        format!("{name}.section_scroll"),
        ScrollAxes::BOTH,
        layout,
    )
}

pub const fn width(self, width: LayoutDimension) -> Self

pub const fn height(self, height: LayoutDimension) -> Self

pub const fn to_taffy(self) -> TaffySize<Dimension>

pub fn from_taffy(size: TaffySize<Dimension>) -> Option<Self>

Trait Implementations

impl Clone for LayoutSize

fn clone(&self) -> LayoutSize

Returns a duplicate of the value.

fn clone_from(&mut self, source: &Self)

Performs copy-assignment from source.

impl Debug for LayoutSize

fn fmt(&self, f: &mut Formatter<'_>) -> Result

Formats the value using the given formatter.

impl From<LayoutSize> for Size<Dimension>

fn from(value: LayoutSize) -> Self

Converts to this type from the input type.

impl PartialEq for LayoutSize

fn eq(&self, other: &LayoutSize) -> bool

Tests for self and other values to be equal, and is used by ==.

fn ne(&self, other: &Rhs) -> bool

Tests for !=. The default implementation is almost always sufficient, and should not be overridden without very good reason.

impl Copy for LayoutSize

impl StructuralPartialEq for LayoutSize