cranpose_liquid/widgets/

button.rs

use std::{
    cell::{Cell, RefCell},
    rc::Rc,
};

use cranpose_animation::{AnimationSpec, AnimationType, Easing};
use cranpose_core::{State, mutableStateOf, remember};
use cranpose_macros::composable;
use cranpose_services::{HapticFeedback, default_haptics};
use cranpose_ui::{
    Modifier, PointerEventKind, PointerInputScope, SemanticsWidgetRole, Size,
    text::TextStyle,
    widgets::{Box, BoxSpec, Text},
};
use cranpose_ui_graphics::{Color, GraphicsLayer};
use cranpose_ui_layout::Alignment;

use super::floating_button::{FloatingButtonSurface, floating_button_content};
use crate::{
    material::{Glass, GlassDynamics, GlassMorph, LiquidModifierExt, LiquidShape},
    motion::LiquidMotion,
    theme::{liquid_colors, liquid_typography},
    widgets::content_scope::ScopeContent,
};

const ICON_BACKPLATE_DIAMETER_RATIO: f32 = 0.50;
const ICON_BACKPLATE_GLYPH_RATIO: f32 = 0.28;
const TAP_EXIT_SLOP: f32 = 12.0;

/// Visual style of a [`GlassButton`].
#[derive(Clone, Copy, Debug, PartialEq, Eq, Default)]
pub enum GlassButtonStyle {
    /// Translucent glass with the label in the accent color.
    #[default]
    Glass,
    /// Accent-tinted glass with white content — the primary action.
    Prominent,
    /// No material: just the label with press feedback (toolbar/text button).
    Plain,
    /// Destructive variant of `Plain`.
    Destructive,
}

/// Configuration for [`GlassButton`] / [`GlassIconButton`].
#[derive(Clone, Debug, Default, PartialEq)]
pub struct GlassButtonSpec {
    pub style: GlassButtonStyle,
    /// Text button sizing; icon buttons use their explicit diameter.
    pub size: GlassButtonSize,
    /// Overrides the material (advanced).
    pub glass: Option<Glass>,
    /// Overrides the label/icon color (defaults per style).
    pub content_color: Option<Color>,
    /// Optional inner color disc for icon buttons. The outer material remains
    /// clear glass; the disc colors only the icon's compact foreground core.
    pub icon_backplate: Option<Color>,
}

/// Native text button sizes, including their label style and content insets.
#[derive(Clone, Copy, Debug, Default, PartialEq, Eq)]
pub enum GlassButtonSize {
    /// Compact action with a 15 point label.
    Small,
    /// Standard action with a 17 point label.
    #[default]
    Regular,
    /// Large action with a 17 point label.
    Large,
}

impl GlassButtonSize {
    fn minimum_height(self) -> f32 {
        match self {
            Self::Small => 28.0,
            Self::Regular => 34.0,
            Self::Large => 50.0,
        }
    }

    fn padding(self) -> (f32, f32) {
        match self {
            Self::Small => (10.0, 5.0),
            Self::Regular => (12.0, 7.0),
            Self::Large => (20.0, 15.0),
        }
    }

    fn label_style(self, typography: crate::theme::LiquidTypography) -> TextStyle {
        match self {
            Self::Small => typography.subheadline,
            Self::Regular | Self::Large => typography.body,
        }
    }
}

impl GlassButtonSpec {
    pub fn glass() -> Self {
        Self::default()
    }

    pub fn prominent() -> Self {
        Self {
            style: GlassButtonStyle::Prominent,
            ..Self::default()
        }
    }

    pub fn plain() -> Self {
        Self {
            style: GlassButtonStyle::Plain,
            ..Self::default()
        }
    }

    pub fn destructive() -> Self {
        Self {
            style: GlassButtonStyle::Destructive,
            ..Self::default()
        }
    }

    pub fn with_glass(mut self, glass: Glass) -> Self {
        self.glass = Some(glass);
        self
    }

    pub fn with_content_color(mut self, color: Color) -> Self {
        self.content_color = Some(color);
        self
    }

    /// Sets the label style and padding used by a text button.
    pub fn with_size(mut self, size: GlassButtonSize) -> Self {
        self.size = size;
        self
    }

    pub fn with_icon_backplate(mut self, color: Color) -> Self {
        self.icon_backplate = Some(color);
        self
    }

    /// The label color for this style under `colors`.
    pub fn content_color(&self, colors: &crate::theme::LiquidColors) -> Color {
        if let Some(color) = self.content_color {
            return color;
        }
        match self.style {
            GlassButtonStyle::Glass => colors.accent,
            GlassButtonStyle::Prominent => colors.on_accent,
            GlassButtonStyle::Plain => colors.accent,
            GlassButtonStyle::Destructive => colors.destructive,
        }
    }

    /// The glyph color for icon buttons: the reference nav/search circles
    /// draw BLACK glyphs on plain glass (only prominent tints stay white).
    pub fn icon_color(&self, colors: &crate::theme::LiquidColors) -> Color {
        if let Some(color) = self.content_color {
            return color;
        }
        match self.style {
            GlassButtonStyle::Glass | GlassButtonStyle::Plain => colors.label,
            GlassButtonStyle::Prominent => colors.on_accent,
            GlassButtonStyle::Destructive => colors.destructive,
        }
    }

    fn resolve_material(
        &self,
        colors: &crate::theme::LiquidColors,
        foreground: Color,
        height: f32,
    ) -> Option<Glass> {
        if let Some(glass) = &self.glass {
            return Some(if glass.foreground.is_some() {
                glass.clone()
            } else {
                glass
                    .clone()
                    .adaptive_frost(foreground, glass.adaptive_frost)
            });
        }
        match self.style {
            GlassButtonStyle::Glass => Some(super::glass_surface::floating_material(
                colors.label,
                height,
            )),
            GlassButtonStyle::Prominent => Some(
                super::glass_surface::floating_material(colors.label, height)
                    .transmission_tint(colors.accent, 0.6),
            ),
            GlassButtonStyle::Plain | GlassButtonStyle::Destructive => None,
        }
    }
}

/// One action in a [`GlassIconButtonGroup`].
#[derive(Clone)]
pub struct GlassIconButtonGroupItem {
    spec: GlassButtonSpec,
    icon_path: &'static str,
    content_description: String,
    on_click: Rc<RefCell<dyn FnMut()>>,
}

impl PartialEq for GlassIconButtonGroupItem {
    fn eq(&self, other: &Self) -> bool {
        self.spec == other.spec
            && self.icon_path == other.icon_path
            && self.content_description == other.content_description
            && Rc::ptr_eq(&self.on_click, &other.on_click)
    }
}

impl GlassIconButtonGroupItem {
    pub fn new(
        icon_path: &'static str,
        content_description: impl Into<String>,
        on_click: impl FnMut() + 'static,
    ) -> Self {
        Self {
            spec: GlassButtonSpec::glass(),
            icon_path,
            content_description: content_description.into(),
            on_click: Rc::new(RefCell::new(on_click)),
        }
    }

    pub fn with_spec(mut self, spec: GlassButtonSpec) -> Self {
        self.spec = spec;
        self
    }
}

/// The scope a group's actions are declared in.
///
/// Each call adds one circular action, in the order it is made, which is also
/// the order they sit in left to right.
pub struct GlassIconButtonGroupScope {
    items: ScopeContent<GlassIconButtonGroupItem>,
}

impl GlassIconButtonGroupScope {
    /// An action drawing `icon_path`, announced as `content_description`.
    pub fn action(
        &self,
        icon_path: &'static str,
        content_description: impl Into<String>,
        on_click: impl FnMut() + 'static,
    ) {
        self.push(GlassIconButtonGroupItem::new(
            icon_path,
            content_description,
            on_click,
        ));
    }

    /// An action built out, for the material a particular action needs — see
    /// [`GlassIconButtonGroupItem`].
    pub fn push(&self, item: GlassIconButtonGroupItem) {
        self.items.push(item);
    }
}

fn collect_items(
    content: impl FnOnce(&GlassIconButtonGroupScope),
) -> Vec<GlassIconButtonGroupItem> {
    ScopeContent::collect(|items| GlassIconButtonGroupScope { items }, content)
}

/// Geometry and interaction material for [`GlassIconButtonGroup`].
#[derive(Clone, Copy, Debug, PartialEq)]
pub struct GlassIconButtonGroupSpec {
    diameter: f32,
    spacing: f32,
    pressed_scale: f32,
    glue_radius: f32,
}

impl GlassIconButtonGroupSpec {
    pub fn new(diameter: f32) -> Self {
        Self {
            diameter: diameter.max(1.0),
            ..Self::default()
        }
    }

    pub fn with_spacing(mut self, spacing: f32) -> Self {
        self.spacing = spacing.max(0.0);
        self
    }

    pub fn with_pressed_scale(mut self, pressed_scale: f32) -> Self {
        self.pressed_scale = pressed_scale.max(1.0);
        self
    }

    pub fn with_glue_radius(mut self, glue_radius: f32) -> Self {
        self.glue_radius = glue_radius.max(0.0);
        self
    }
}

impl Default for GlassIconButtonGroupSpec {
    fn default() -> Self {
        Self {
            diameter: 44.0,
            spacing: 8.0,
            pressed_scale: 1.55,
            glue_radius: 12.0,
        }
    }
}

fn merge_glyph_alpha(merge: f32) -> f32 {
    let m = merge.clamp(0.0, 1.0);
    if m <= 0.0 {
        return 1.0;
    }
    let fade_out = 1.0 - ((m - 0.02) / 0.10).clamp(0.0, 1.0);
    let fade_in = ((m - 0.78) / 0.18).clamp(0.0, 1.0);
    fade_out.max(fade_in)
}

fn icon_group_width(count: usize, spec: GlassIconButtonGroupSpec) -> f32 {
    if count == 0 {
        0.0
    } else {
        spec.diameter * count as f32 + spec.spacing * count.saturating_sub(1) as f32
    }
}

fn icon_group_item_at(
    x: f32,
    y: f32,
    count: usize,
    spec: GlassIconButtonGroupSpec,
) -> Option<usize> {
    if !(0.0..=spec.diameter).contains(&y) {
        return None;
    }
    let pitch = spec.diameter + spec.spacing;
    let index = (x / pitch).floor() as isize;
    if index < 0 || index as usize >= count {
        return None;
    }
    let local_x = x - index as f32 * pitch;
    (local_x <= spec.diameter).then_some(index as usize)
}

fn icon_group_neighbor_shapes(
    count: usize,
    active: usize,
    spec: GlassIconButtonGroupSpec,
    pad: f32,
    center_y: f32,
) -> Vec<(f32, f32, f32, f32, f32)> {
    let pitch = spec.diameter + spec.spacing;
    let contact_diameter = spec.diameter * 0.36;
    let contact_offset = spec.diameter * 0.38;
    (0..count)
        .filter(|index| index.abs_diff(active) == 1)
        .map(|index| {
            let toward_active = if index < active { 1.0 } else { -1.0 };
            (
                pad + index as f32 * pitch + spec.diameter * 0.5 + toward_active * contact_offset,
                center_y,
                contact_diameter,
                contact_diameter,
                -1.0,
            )
        })
        .collect()
}

/// A glass button. `content` composes the label (see [`GlassButton`] with
/// [`Text`], or an [`crate::icons::Icon`] + text row).
#[composable]
pub fn GlassButton(
    modifier: Modifier,
    spec: GlassButtonSpec,
    on_click: impl Fn() + 'static,
    content: impl FnMut() + 'static,
) {
    GlassButtonWithFeedback(
        modifier,
        spec,
        HapticFeedback::ImpactLight,
        None,
        on_click,
        content,
    );
}

#[composable]
pub(crate) fn GlassButtonWithFeedback(
    modifier: Modifier,
    spec: GlassButtonSpec,
    feedback: HapticFeedback,
    tint_progress: Option<State<f32>>,
    on_click: impl Fn() + 'static,
    content: impl FnMut() + 'static,
) {
    let colors = liquid_colors();
    let material = spec.resolve_material(
        &colors,
        spec.content_color(&colors),
        spec.size.minimum_height(),
    );
    let (pressed_modifier, base, gesture, illumination, content_activity) = FloatingButtonSurface(
        material,
        spec.glass.is_none(),
        0.0,
        feedback,
        tint_progress.map(|state| {
            (
                state,
                super::glass_surface::floating_material(colors.label, spec.size.minimum_height())
                    .tint
                    .unwrap_or(Color::TRANSPARENT),
            )
        }),
        on_click,
    );

    let (horizontal_padding, vertical_padding) = spec.size.padding();
    let base = base
        .height_in(spec.size.minimum_height(), f32::INFINITY)
        .padding_symmetric(horizontal_padding, vertical_padding);

    let content_fade = if matches!(
        spec.style,
        GlassButtonStyle::Glass | GlassButtonStyle::Prominent
    ) {
        0.0
    } else {
        0.35
    };
    let content_layer = illumination.graphics_layer(move || GraphicsLayer {
        alpha: (1.0 - content_fade * content_activity.get()).clamp(0.0, 1.0),
        ..Default::default()
    });
    let content = Rc::new(RefCell::new(content));
    floating_button_content(
        modifier.then(gesture),
        pressed_modifier,
        base,
        content_layer,
        move || (content.borrow_mut())(),
    );
}

/// Convenience text label styled for the enclosing button.
#[composable]
pub fn GlassButtonLabel(text: impl Into<String>, spec: GlassButtonSpec) {
    let mut style = spec.size.label_style(liquid_typography());
    let color = spec.content_color(&liquid_colors());
    style.span_style.color = Some(color);
    Text(text.into(), Modifier::empty(), style);
}

#[composable]
pub(crate) fn GlassIconForeground(spec: GlassButtonSpec, diameter: f32, icon_path: &'static str) {
    let colors = liquid_colors();
    let icon_color = spec.icon_color(&colors);
    if let Some(backplate) = spec.icon_backplate {
        let backplate_diameter = diameter * ICON_BACKPLATE_DIAMETER_RATIO;
        Box(
            Modifier::empty()
                .size(Size::new(backplate_diameter, backplate_diameter))
                .draw_behind(move |scope| {
                    scope.draw_circle(
                        cranpose_ui_graphics::Brush::solid(backplate),
                        cranpose_ui_graphics::Point::new(
                            backplate_diameter * 0.5,
                            backplate_diameter * 0.5,
                        ),
                        backplate_diameter * 0.5,
                    );
                }),
            BoxSpec::default().content_alignment(Alignment::CENTER),
            move || {
                crate::icons::Icon(
                    icon_path,
                    None,
                    diameter * ICON_BACKPLATE_GLYPH_RATIO,
                    icon_color,
                );
            },
        );
    } else {
        crate::icons::Icon(icon_path, None, diameter * 0.5, icon_color);
    }
}

/// A circular glass icon button (44dp target).
#[composable]
pub fn GlassIconButton(
    modifier: Modifier,
    spec: GlassButtonSpec,
    diameter: f32,
    on_click: impl Fn() + 'static,
    icon_path: &'static str,
) {
    GlassIconButtonWithForegroundAlpha(modifier, spec, diameter, 1.0, on_click, icon_path);
}

#[composable]
pub(crate) fn GlassIconButtonWithForegroundAlpha(
    modifier: Modifier,
    spec: GlassButtonSpec,
    diameter: f32,
    foreground_alpha: f32,
    on_click: impl Fn() + 'static,
    icon_path: &'static str,
) {
    let colors = liquid_colors();
    let material = spec
        .resolve_material(&colors, spec.icon_color(&colors), diameter)
        .map(|glass| glass.shape(LiquidShape::Circle));
    let (pressed_modifier, base, gesture, illumination, content_activity) = FloatingButtonSurface(
        material,
        spec.glass.is_none(),
        diameter * 0.25,
        HapticFeedback::ImpactLight,
        None,
        on_click,
    );

    let base = base.size(Size::new(diameter, diameter));

    let content_layer = illumination.graphics_layer(move || GraphicsLayer {
        alpha: (1.0 - 0.85 * content_activity.get()).clamp(0.0, 1.0)
            * foreground_alpha.clamp(0.0, 1.0),
        ..Default::default()
    });
    floating_button_content(
        modifier.then(gesture),
        pressed_modifier,
        base,
        content_layer,
        move || GlassIconForeground(spec.clone(), diameter, icon_path),
    );
}

/// A row of circular actions whose pressed glass can join adjacent members.
/// Each member keeps its own base material and foreground; one transparent,
/// persistent interaction field supplies the shared refraction and neck.
#[composable]
pub fn GlassIconButtonGroup(
    modifier: Modifier,
    spec: GlassIconButtonGroupSpec,
    content: impl FnOnce(&GlassIconButtonGroupScope),
) {
    let items = collect_items(content);
    let count = items.len();
    if count == 0 {
        return;
    }

    let colors = liquid_colors();
    let live_items: Rc<RefCell<Vec<GlassIconButtonGroupItem>>> =
        remember(|| Rc::new(RefCell::new(Vec::new()))).with(Rc::clone);
    let ghosts: Rc<RefCell<Vec<(GlassIconButtonGroupItem, usize, f32)>>> =
        remember(|| Rc::new(RefCell::new(Vec::new()))).with(Rc::clone);
    let ghost_fade = remember(|| {
        let runtime = cranpose_core::with_current_composer(|composer| composer.runtime_handle());
        Rc::new(RefCell::new(cranpose_animation::Animatable::new(
            0.0f32, runtime,
        )))
    })
    .with(Rc::clone);
    let active = remember(|| mutableStateOf(None::<usize>)).with(|state| *state);
    let drag_x = remember(|| mutableStateOf(None::<f32>)).with(|state| *state);
    let last_active = remember(|| Rc::new(Cell::new(0usize))).with(Rc::clone);
    if let Some(index) = active.get() {
        last_active.set(index.min(count - 1));
    }
    let press_progress = cranpose_animation::animateFloatAsState(
        if active.get().is_some() { 1.0 } else { 0.0 },
        LiquidMotion::snappy(),
        "glass-icon-group-press",
    );
    let press_orphaned = remember(|| Rc::new(Cell::new(false))).with(Rc::clone);

    {
        let member_stays = |member: &GlassIconButtonGroupItem| {
            items.iter().any(|item| {
                item.icon_path == member.icon_path
                    && item.content_description == member.content_description
            })
        };
        let previous = live_items.borrow();
        if !previous.is_empty() {
            let leavers: Vec<(GlassIconButtonGroupItem, usize, f32)> = previous
                .iter()
                .enumerate()
                .filter(|(_, member)| !member_stays(member))
                .map(|(index, member)| {
                    let departure = if index == last_active.get() {
                        press_orphaned.set(true);
                        press_progress.get().clamp(0.0, 1.0)
                    } else {
                        0.0
                    };
                    (member.clone(), index, departure)
                })
                .collect();
            if !leavers.is_empty() {
                *ghosts.borrow_mut() = leavers;
                let mut fade = ghost_fade.borrow_mut();
                fade.snapTo(1.0);
                fade.animateTo(
                    0.0,
                    AnimationType::Tween(AnimationSpec::tween(250, Easing::EaseIn)),
                );
            }
        }
    }
    let ghost_alpha = ghost_fade.borrow().state();
    if !ghosts.borrow().is_empty() && ghost_alpha.get() <= 0.01 {
        ghosts.borrow_mut().clear();
    }
    *live_items.borrow_mut() = items;
    let render_items = live_items.borrow().clone();

    let ghost_slots = ghosts
        .borrow()
        .iter()
        .map(|(_, index, _)| index + 1)
        .max()
        .unwrap_or(0);
    let layout_count = count.max(ghost_slots);
    let merge = if layout_count > count {
        (1.0 - ghost_alpha.get().clamp(0.0, 1.0)).clamp(0.0, 1.0)
    } else {
        0.0
    };
    let full_width = icon_group_width(layout_count, spec);
    let settled_width = icon_group_width(count, spec);
    let width = settled_width + (full_width - settled_width) * (1.0 - merge);
    let ghost_trailing_shift = width - full_width;
    let gesture_items = Rc::clone(&live_items);
    let gesture_press_orphaned = Rc::clone(&press_orphaned);
    let gesture = modifier
        .size(Size::new(width, spec.diameter))
        .pointer_input(count, move |scope: PointerInputScope| {
            let gesture_items = Rc::clone(&gesture_items);
            let gesture_press_orphaned = Rc::clone(&gesture_press_orphaned);
            async move {
                scope
                    .await_pointer_event_scope(|await_scope| async move {
                        let mut down_index = None::<usize>;
                        loop {
                            let event = await_scope.await_pointer_event().await;
                            match event.kind {
                                PointerEventKind::Down if down_index.is_none() => {
                                    down_index = icon_group_item_at(
                                        event.position.x,
                                        event.position.y,
                                        gesture_items.borrow().len(),
                                        spec,
                                    );
                                    if let Some(index) = down_index {
                                        active.set(Some(index));
                                        drag_x.set(Some(event.position.x));
                                        gesture_press_orphaned.set(false);
                                        default_haptics().perform(HapticFeedback::Selection);
                                        event.consume();
                                    }
                                }
                                PointerEventKind::Move if down_index.is_some() => {
                                    drag_x.set(Some(event.position.x));
                                    event.consume();
                                }
                                PointerEventKind::Up => {
                                    let pressed_index = down_index.take();
                                    active.set(None);
                                    drag_x.set(None);
                                    if let Some(index) = pressed_index {
                                        let count = gesture_items.borrow().len();
                                        let released_inside = (-TAP_EXIT_SLOP
                                            ..=spec.diameter + TAP_EXIT_SLOP)
                                            .contains(&event.position.y)
                                            && (-TAP_EXIT_SLOP
                                                ..=icon_group_width(count, spec) + TAP_EXIT_SLOP)
                                                .contains(&event.position.x);
                                        if released_inside {
                                            let on_click = gesture_items
                                                .borrow()
                                                .get(index)
                                                .map(|item| Rc::clone(&item.on_click));
                                            if let Some(on_click) = on_click {
                                                default_haptics()
                                                    .perform(HapticFeedback::ImpactLight);
                                                (on_click.borrow_mut())();
                                            }
                                        }
                                        event.consume();
                                    }
                                }
                                PointerEventKind::Cancel if down_index.take().is_some() => {
                                    active.set(None);
                                    drag_x.set(None);
                                    event.consume();
                                }
                                _ => {}
                            }
                        }
                    })
                    .await;
            }
        });

    Box(gesture, BoxSpec::default(), move || {
        let pitch = spec.diameter + spec.spacing;
        let active_index = last_active.get().min(count - 1);

        let pad = spec.glue_radius + spec.diameter * (spec.pressed_scale - 1.0) * 0.5 + 4.0;
        let node_width = width + pad * 2.0;
        let node_height = spec.diameter * spec.pressed_scale + pad * 2.0;
        let shared_progress = press_progress;
        let shared_orphaned = Rc::clone(&press_orphaned);
        let shared_last_active = Rc::clone(&last_active);
        let union_tint = render_items
            .get(active_index)
            .and_then(|item| {
                item.spec
                    .resolve_material(&colors, item.spec.icon_color(&colors), spec.diameter)
            })
            .and_then(|material| material.tint)
            .map_or(Color(1.0, 1.0, 1.0, 0.035), |tint| tint.with_alpha(0.85));
        let shared = Modifier::empty()
            .required_size(Size::new(node_width, node_height))
            .offset(-pad, (spec.diameter - node_height) * 0.5)
            .glass_effect_with(
                Glass::regular()
                    .blur_radius(0.0)
                    .tint(union_tint)
                    .lift(0.0)
                    .highlight(0.48)
                    .shadow(false)
                    .no_clip(),
                move || {
                    let progress = if shared_orphaned.get() {
                        0.0
                    } else {
                        shared_progress.get().clamp(0.0, 1.0)
                    };
                    let active_index = shared_last_active.get().min(count - 1);
                    let center_y = node_height * 0.5;
                    let rest_center = active_index as f32 * pitch + spec.diameter * 0.5;
                    let ridden = drag_x
                        .get()
                        .map(|x| x.clamp(rest_center - pitch * 0.35, rest_center + pitch * 0.35))
                        .unwrap_or(rest_center);
                    let center_x = pad + rest_center + (ridden - rest_center) * progress;
                    let diameter = spec.diameter * (1.0 + (spec.pressed_scale - 1.0) * progress);
                    let touch = drag_x.get().map(|x| {
                        (
                            pad + x.clamp(0.0, node_width - 2.0 * pad),
                            center_y,
                            progress,
                        )
                    });
                    GlassDynamics {
                        activity: Some(progress),
                        touch,
                        morph: Some(GlassMorph {
                            node_size: (node_width, node_height),
                            primary: (center_x, center_y, diameter, diameter, -1.0),
                            shapes: icon_group_neighbor_shapes(
                                count,
                                active_index,
                                spec,
                                pad,
                                center_y,
                            ),
                            glue: spec.glue_radius * progress,
                            ..Default::default()
                        }),
                        ..Default::default()
                    }
                },
            );
        Box(shared, BoxSpec::default(), || {});

        for (index, item) in render_items.iter().enumerate() {
            let x = index as f32 * pitch;
            let surface_progress = press_progress;
            let item_is_active = index == active_index;
            let scale_orphaned = Rc::clone(&press_orphaned);
            let outer = Modifier::empty()
                .size(Size::new(spec.diameter, spec.diameter))
                .offset(x, 0.0);
            let rest_center = index as f32 * pitch + spec.diameter * 0.5;
            let scale_layer = Modifier::empty().graphics_layer(move || {
                let progress = if item_is_active && !scale_orphaned.get() {
                    surface_progress.get().clamp(0.0, 1.0)
                } else {
                    0.0
                };
                let scale = 1.0 + (spec.pressed_scale - 1.0) * progress;
                let ridden = if item_is_active {
                    drag_x
                        .get()
                        .map(|x| x.clamp(rest_center - pitch * 0.35, rest_center + pitch * 0.35))
                        .unwrap_or(rest_center)
                } else {
                    rest_center
                };
                GraphicsLayer {
                    translation_x: (ridden - rest_center) * progress,
                    scale_x: scale,
                    scale_y: scale,
                    ..Default::default()
                }
            });
            let mut surface = Modifier::empty().size(Size::new(spec.diameter, spec.diameter));
            if let Some(material) =
                item.spec
                    .resolve_material(&colors, item.spec.icon_color(&colors), spec.diameter)
            {
                let surface_progress = press_progress;
                let dynamics_orphaned = Rc::clone(&press_orphaned);
                surface =
                    surface.glass_effect_with(material.shape(LiquidShape::Circle), move || {
                        let progress = if dynamics_orphaned.get() {
                            0.0
                        } else {
                            surface_progress.get().clamp(0.0, 1.0)
                        };
                        GlassDynamics {
                            highlight_boost: if item_is_active { 0.60 * progress } else { 0.0 },
                            saturation_boost: if item_is_active { 1.6 * progress } else { 0.0 },
                            tint_alpha_multiplier: item_is_active.then_some(1.0 + 0.85 * progress),
                            ..Default::default()
                        }
                    });
            }
            Box(outer, BoxSpec::default(), move || {
                let surface = surface.clone();
                Box(scale_layer.clone(), BoxSpec::default(), move || {
                    Box(surface.clone(), BoxSpec::default(), || {});
                });
            });
        }

        for (index, item) in render_items.iter().enumerate() {
            let x = index as f32 * pitch;
            let item_is_active = index == active_index;
            let foreground_progress = press_progress;
            let foreground_orphaned = Rc::clone(&press_orphaned);
            let foreground_spec = item.spec.clone();
            let icon_path = item.icon_path;
            let description = item.content_description.clone();
            let merge_alpha = merge_glyph_alpha(merge);
            let foreground = Modifier::empty()
                .size(Size::new(spec.diameter, spec.diameter))
                .offset(x, 0.0)
                .graphics_layer(move || GraphicsLayer {
                    alpha: merge_alpha
                        * if item_is_active && !foreground_orphaned.get() {
                            1.0 - foreground_progress.get().clamp(0.0, 1.0)
                        } else {
                            1.0
                        },
                    ..Default::default()
                })
                .stable_semantics(move |config| {
                    config.role = Some(SemanticsWidgetRole::Button);
                    config.is_clickable = true;
                    config.content_description = Some(description.clone());
                })
                .focusable();
            Box(
                foreground,
                BoxSpec::default().content_alignment(Alignment::CENTER),
                move || {
                    GlassIconForeground(foreground_spec.clone(), spec.diameter, icon_path);
                },
            );
        }

        for (ghost, ghost_index, departure) in ghosts.borrow().iter() {
            let x = *ghost_index as f32 * pitch + ghost_trailing_shift;
            let fade = ghost_alpha;
            let departure = *departure;
            let ghost_layer = Modifier::empty()
                .size(Size::new(spec.diameter, spec.diameter))
                .offset(x, 0.0)
                .graphics_layer(move || {
                    let alpha = fade.get().clamp(0.0, 1.0);
                    let scale =
                        1.0 + (spec.pressed_scale - 1.0) * departure * (0.55 + 0.45 * alpha);
                    GraphicsLayer {
                        alpha,
                        scale_x: scale,
                        scale_y: scale,
                        render_effect: (departure > 0.05 && alpha < 0.98).then(|| {
                            cranpose_ui_graphics::RenderEffect::blur(
                                (1.0 - alpha) * 9.0 * departure,
                            )
                        }),
                        ..Default::default()
                    }
                });
            let ghost_spec = ghost.spec.clone();
            let ghost_icon = ghost.icon_path;
            let surface = ghost
                .spec
                .resolve_material(&colors, ghost.spec.icon_color(&colors), spec.diameter)
                .map(|material| {
                    Modifier::empty()
                        .size(Size::new(spec.diameter, spec.diameter))
                        .glass_effect_with(material.shape(LiquidShape::Circle), move || {
                            GlassDynamics {
                                highlight_boost: 0.60 * departure,
                                saturation_boost: 1.6 * departure,
                                tint_alpha_multiplier: Some(1.0 + 0.85 * departure),
                                ..Default::default()
                            }
                        })
                });
            let glyph_alpha = 1.0 - departure;
            Box(
                ghost_layer,
                BoxSpec::default().content_alignment(Alignment::CENTER),
                move || {
                    if let Some(surface) = surface.clone() {
                        Box(surface, BoxSpec::default(), || {});
                    }
                    let glyph_layer = Modifier::empty().graphics_layer(move || GraphicsLayer {
                        alpha: glyph_alpha,
                        ..Default::default()
                    });
                    let glyph_spec = ghost_spec.clone();
                    Box(
                        glyph_layer,
                        BoxSpec::default().content_alignment(Alignment::CENTER),
                        move || {
                            GlassIconForeground(glyph_spec.clone(), spec.diameter, ghost_icon);
                        },
                    );
                },
            );
        }
    });
}

#[cfg(test)]
#[path = "tests/button_tests.rs"]
mod tests;