ravenrs_widgets/

floating.rs

//! More floating UI: context menus, hover cards, sheets, splash screens, toasts,
//! the command palette and the combobox.

use std::cell::Cell;
use std::collections::hash_map::DefaultHasher;
use std::fmt;
use std::hash::{Hash, Hasher};
use std::rc::Rc;

use ravenrs_animation::Transition;
use ravenrs_core::{Border, Color, CursorIcon, Effect, Insets, Key, Point, Role};
use ravenrs_layout::{Align, Axis, Justify, LayoutStyle};
use ravenrs_reactive::{Binding, State};
use ravenrs_style::{Semantic, TextStyle, Theme, Weight};

use crate::context::{BuildCx, NodeId, Paint, Placement, QuadPaint, Semantics};
use crate::overlay::{Entry, MenuList, PanelOf, panel};
use crate::{
    Button, ButtonSize, ButtonStyle, IconButton, IconName, MenuItem, Motion, TextField, Tone, View, motion,
    util,
};

/// Opens a menu at the pointer on right click (or long press, planned) over its content.
pub struct ContextMenu<V> {
    content: V,
    entries: Vec<Entry>,
}

impl<V> fmt::Debug for ContextMenu<V> {
    fn fmt(&self, f: &mut fmt::Formatter<'_>) -> fmt::Result {
        f.debug_struct("ContextMenu").field("entries", &self.entries.len()).finish_non_exhaustive()
    }
}

#[cfg_attr(feature = "live", ravenrs_live::expose)]
impl<V: View> ContextMenu<V> {
    /// Wraps `content` with an initially empty menu.
    pub fn new(content: V) -> Self {
        Self { content, entries: Vec::new() }
    }

    /// Appends a menu item.
    pub fn item(mut self, item: MenuItem) -> Self {
        self.entries.push(Entry::Item(item));
        self
    }

    /// Appends a separator line.
    pub fn separator(mut self) -> Self {
        self.entries.push(Entry::Separator);
        self
    }
}

impl<V: View> View for ContextMenu<V> {
    fn build(&self, cx: &mut BuildCx<'_>) -> NodeId {
        let at: State<Option<Point>> = cx.use_state(|| None);
        let child = cx.child(&self.content);
        let node = cx.container(
            LayoutStyle { align: Align::Stretch, ..LayoutStyle::stack(Axis::Vertical) },
            &[child],
            Paint::None,
        );
        let open = at.clone();
        cx.on_context_menu(node, Rc::new(move |p| open.set(Some(p))));
        if let Some(p) = at.get() {
            let close: Rc<dyn Fn()> = {
                let at = at.clone();
                Rc::new(move || at.set(None))
            };
            cx.overlay(
                node,
                Placement::At(p),
                &MenuList { entries: &self.entries, close: close.clone(), on_side: None },
                Some(close),
            );
        }
        node
    }
}

/// Rich content shown below a trigger while the pointer is over the trigger or
/// the card itself.
pub struct HoverCard<A, C> {
    trigger: A,
    content: C,
}

impl<A, C> fmt::Debug for HoverCard<A, C> {
    fn fmt(&self, f: &mut fmt::Formatter<'_>) -> fmt::Result {
        f.write_str("HoverCard")
    }
}

#[cfg_attr(feature = "live", ravenrs_live::expose)]
impl<A: View, C: View> HoverCard<A, C> {
    /// Shows `content` below `trigger` on hover.
    pub fn new(trigger: A, content: C) -> Self {
        Self { trigger, content }
    }
}

impl<A: View, C: View> View for HoverCard<A, C> {
    fn build(&self, cx: &mut BuildCx<'_>) -> NodeId {
        let child = cx.child(&self.trigger);
        let node = cx.container(
            LayoutStyle { align_self: Some(Align::Fit), ..LayoutStyle::stack(Axis::Horizontal) },
            &[child],
            Paint::None,
        );
        cx.cursor(node, CursorIcon::Default);
        if cx.is_hover_within() {
            cx.overlay(node, Placement::Below, &PanelOf(&self.content), None);
        }
        node
    }
}

/// The edge a [`Sheet`] slides in from.
#[derive(Clone, Copy, Debug, Default, PartialEq, Eq)]
#[non_exhaustive]
#[cfg_attr(feature = "live", ravenrs_live::expose(part = "variants"))]
pub enum Side {
    /// The left edge.
    Left,
    /// The right edge.
    #[default]
    Right,
}

/// A panel that slides over the UI from one edge, over a dimmed backdrop.
#[cfg_attr(feature = "live", ravenrs_live::expose(part = "fields"))]
pub struct Sheet {
    open: Binding<bool>,
    title: String,
    description: Option<String>,
    content: Option<crate::AnyView>,
    side: Side,
    width: f32,
}

impl fmt::Debug for Sheet {
    fn fmt(&self, f: &mut fmt::Formatter<'_>) -> fmt::Result {
        f.debug_struct("Sheet").field("title", &self.title).finish_non_exhaustive()
    }
}

#[cfg_attr(feature = "live", ravenrs_live::expose)]
impl Sheet {
    /// A sheet shown while `open` is true; slides from the right, 400 logical pixels wide.
    pub fn new(open: Binding<bool>, title: impl Into<String>) -> Self {
        Self { open, title: title.into(), description: None, content: None, side: Side::Right, width: 400.0 }
    }

    /// Adds a muted description under the title.
    pub fn description(mut self, text: impl Into<String>) -> Self {
        self.description = Some(text.into());
        self
    }

    /// Sets the sheet body.
    pub fn content(mut self, content: impl View + 'static) -> Self {
        self.content = Some(Box::new(content));
        self
    }

    /// Sets the edge it slides in from.
    pub fn side(mut self, side: Side) -> Self {
        self.side = side;
        self
    }

    /// Sets the panel width in logical pixels.
    pub fn width(mut self, width: f32) -> Self {
        self.width = width;
        self
    }
}

/// The dimmed backdrop and sliding panel of a sheet. `bare` leaves out the title
/// row and the padding, for content that brings its own (a sidebar).
pub(crate) struct SheetLayer<'a> {
    pub open: &'a Binding<bool>,
    pub title: &'a str,
    pub description: Option<&'a str>,
    pub content: Option<&'a dyn View>,
    pub side: Side,
    pub width: f32,
    pub bare: bool,
}

impl View for SheetLayer<'_> {
    fn build(&self, cx: &mut BuildCx<'_>) -> NodeId {
        let theme = *cx.theme();
        let s = self;
        let viewport = cx.viewport();
        let mut body = Vec::new();
        if !s.bare {
            let close = s.open.clone();
            let title = util::label(cx, s.title, TextStyle::Title, None, theme.color(Semantic::Ink));
            let title = cx.container(
                LayoutStyle { grow: 1.0, ..LayoutStyle::stack(Axis::Horizontal) },
                &[title],
                Paint::None,
            );
            let x = cx.child(
                &IconButton::new(IconName::X)
                    .label(cx.labels().close.clone())
                    .size(ButtonSize::Small)
                    .on_click(move || close.set(false)),
            );
            let header = cx.container(
                LayoutStyle { align: Align::Center, spacing: 12.0, ..LayoutStyle::stack(Axis::Horizontal) },
                &[title, x],
                Paint::None,
            );
            body.push(header);
        }
        if let Some(d) = s.description {
            body.push(util::label(cx, d, TextStyle::Body, None, theme.color(Semantic::InkMuted)));
        }
        if let Some(c) = s.content {
            body.push(cx.child(c));
        }
        let panel = cx.container(
            LayoutStyle {
                width: Some(s.width.min(viewport.width)),
                height: Some(viewport.height),
                padding: if s.bare { Insets::ZERO } else { Insets::uniform(24.0) },
                spacing: if s.bare { 0.0 } else { 16.0 },
                align: Align::Stretch,
                ..LayoutStyle::stack(Axis::Vertical)
            },
            &body,
            Paint::Quad(QuadPaint {
                border: Some(Border { width: 1.0, color: theme.color(Semantic::Border) }),
                shadow: Some(theme.elevation.raised),
                ..QuadPaint::new(theme.color(Semantic::SurfaceElevated))
            }),
        );
        let mut semantics = Semantics::new(Role::Dialog).name(s.title).modal();
        if let Some(d) = s.description {
            semantics = semantics.description(d);
        }
        cx.semantics(panel, semantics);
        cx.cursor(panel, CursorIcon::Default);
        let away = s.width.min(viewport.width) * if s.side == Side::Right { 1.0 } else { -1.0 };
        cx.motion(
            panel,
            Motion::new()
                .enter(Effect::moved(away, 0.0), theme.motion.gentle)
                .exit(Effect::moved(away, 0.0), theme.motion.base),
        );
        let scrim = motion::scrim(cx, viewport);
        let backdrop = cx.container(
            LayoutStyle {
                width: Some(viewport.width),
                height: Some(viewport.height),
                justify: if s.side == Side::Right { Justify::End } else { Justify::Start },
                ..LayoutStyle::stack(Axis::Horizontal)
            },
            &[scrim, panel],
            Paint::None,
        );
        let close = s.open.clone();
        cx.on_click(backdrop, Rc::new(move || close.set(false)));
        backdrop
    }
}

impl View for Sheet {
    fn build(&self, cx: &mut BuildCx<'_>) -> NodeId {
        let anchor = cx.empty();
        if self.open.get() {
            let close = self.open.clone();
            let layer = SheetLayer {
                open: &self.open,
                title: &self.title,
                description: self.description.as_deref(),
                content: self.content.as_deref(),
                side: self.side,
                width: self.width,
                bare: false,
            };
            cx.overlay(anchor, Placement::Fill, &layer, Some(Rc::new(move || close.set(false))));
        }
        anchor
    }
}

/// How wide the content of a [`SplashScreen`] gets, in logical pixels.
const SPLASH_CONTENT_WIDTH: f32 = 320.0;
/// The size of a [`SplashScreen`]'s icon, in logical pixels.
const SPLASH_ICON_SIZE: f32 = 64.0;
/// How long after the name the rest of a [`SplashScreen`] appears, in seconds.
const SPLASH_REST_LAG: f64 = 0.2;
/// Keeps a [`SplashScreen`] the same layer whatever opens before it.
const SPLASH_OVERLAY_KEY: u64 = 0x7370_6c61_7368;

/// The opening screen that covers the window while the app loads: a logo or
/// icon, the app's name, a status message and its progress.
///
/// It takes no input and has nothing to focus, so the page behind it stays out
/// of reach until the app sets `visible` to false and the screen fades out. It
/// is on screen from the very first frame, with no fade in. Without
/// [`Self::progress`] it shows a [`Spinner`](crate::Spinner).
///
/// Status and progress are plain values, so build it where they are read, such
/// as in a [`Component`](crate::Component) body or a [`view_fn`](crate::view_fn).
///
/// ```
/// use ravenrs_reactive::State;
/// use ravenrs_widgets::{IconName, SplashScreen, View, view_fn};
///
/// let loading = State::new(true);
/// let progress = State::new(0.25);
/// let splash = view_fn(move || {
///     SplashScreen::new(loading.binding(), "Raven Finance")
///         .icon(IconName::Wallet)
///         .status("Opening the database")
///         .progress(progress.get())
/// });
/// ```
#[cfg_attr(feature = "live", ravenrs_live::expose(part = "fields"))]
pub struct SplashScreen {
    visible: Binding<bool>,
    name: String,
    logo: Option<crate::AnyView>,
    icon: Option<IconName>,
    status: Option<String>,
    progress: Option<f32>,
    reveal_after: f64,
}

impl fmt::Debug for SplashScreen {
    fn fmt(&self, f: &mut fmt::Formatter<'_>) -> fmt::Result {
        f.debug_struct("SplashScreen").field("name", &self.name).finish_non_exhaustive()
    }
}

#[cfg_attr(feature = "live", ravenrs_live::expose)]
impl SplashScreen {
    /// A splash screen for the app called `name`, shown while `visible` is true.
    pub fn new(visible: Binding<bool>, name: impl Into<String>) -> Self {
        Self {
            visible,
            name: name.into(),
            logo: None,
            icon: None,
            status: None,
            progress: None,
            reveal_after: 0.0,
        }
    }

    /// Shows the app's own artwork above the name, such as an [`Image`](crate::Image).
    /// It replaces [`Self::icon`].
    pub fn logo(mut self, logo: impl View + 'static) -> Self {
        self.logo = Some(Box::new(logo));
        self
    }

    /// Shows an icon in the accent color above the name.
    pub fn icon(mut self, icon: IconName) -> Self {
        self.icon = Some(icon);
        self
    }

    /// Sets the one-line message under the name. Screen readers announce each new one.
    pub fn status(mut self, status: impl Into<String>) -> Self {
        self.status = Some(status.into());
        self
    }

    /// Replaces the spinner with a progress bar at `value`, clamped to 0.0–1.0.
    pub fn progress(mut self, value: f32) -> Self {
        self.progress = Some(value);
        self
    }

    /// Holds the name back this many seconds, and what is under it a little longer,
    /// for an animated [`Self::logo`] to play alone. Their places are kept, so nothing
    /// moves when they appear, and screen readers have them from the start. Where
    /// motion is reduced they show at once.
    pub fn reveal_after(mut self, seconds: f64) -> Self {
        self.reveal_after = seconds;
        self
    }
}

/// Fades in `node` once `held` turns false, keeping its place until then.
fn held_back(cx: &mut BuildCx<'_>, node: NodeId, held: bool, hidden: Effect, transition: Transition) {
    let effect = if held { hidden } else { Effect::IDENTITY };
    cx.motion(node, Motion::new().effect(effect, transition));
}

/// The status message, as a live region.
struct SplashStatus<'a>(&'a str, f32);

impl View for SplashStatus<'_> {
    fn build(&self, cx: &mut BuildCx<'_>) -> NodeId {
        let theme = *cx.theme();
        let attrs = util::attrs(&theme, TextStyle::Callout, None);
        let style = LayoutStyle { max_width: Some(self.1), ..LayoutStyle::leaf() };
        let text = cx.text_truncated(self.0, &attrs, theme.color(Semantic::InkMuted), style);
        let style = LayoutStyle { max_width: Some(self.1), ..LayoutStyle::stack(Axis::Horizontal) };
        let node = cx.container(style, &[text], Paint::None);
        cx.semantics(node, Semantics::new(Role::Status));
        cx.motion(node, Motion::new().enter(Effect::hidden(), theme.motion.fast));
        node
    }
}

/// A progress bar named for screen readers.
struct SplashBar(f32);

impl View for SplashBar {
    fn build(&self, cx: &mut BuildCx<'_>) -> NodeId {
        let bar = cx.child(&crate::ProgressBar::new(self.0));
        let name = cx.labels().loading.clone();
        cx.label_control(bar, &name, None);
        bar
    }
}

struct SplashLayer<'a>(&'a SplashScreen);

impl View for SplashLayer<'_> {
    fn build(&self, cx: &mut BuildCx<'_>) -> NodeId {
        let theme = *cx.theme();
        let s = self.0;
        let viewport = cx.viewport();
        let width = (viewport.width - theme.spacing.s6 * 2.0).clamp(0.0, SPLASH_CONTENT_WIDTH);

        let now = cx.now();
        let began = cx.use_state(|| now).get();
        let reveal = if cx.reduced_motion() { 0.0 } else { s.reveal_after };
        let name_at = began + reveal;
        let rest_at = if reveal > 0.0 { name_at + SPLASH_REST_LAG } else { name_at };
        for at in [name_at, rest_at] {
            if now < at {
                cx.wake_at(at);
            }
        }

        let mut content = Vec::new();
        if let Some(logo) = &s.logo {
            content.push(cx.child(logo.as_ref()));
        } else if let Some(icon) = s.icon {
            content.push(util::icon(cx, icon, SPLASH_ICON_SIZE, theme.color(Semantic::Accent)));
        }
        let attrs = util::attrs(&theme, TextStyle::Title, None);
        let style = LayoutStyle { max_width: Some(width), ..LayoutStyle::leaf() };
        let name = cx.text_truncated(&s.name, &attrs, theme.color(Semantic::Ink), style);
        held_back(cx, name, now < name_at, Effect::hidden().with_scale(1.04), theme.motion.slow);
        content.push(name);

        // Changing the node's identity is what makes every platform read a new message.
        if let Some(status) = &s.status {
            let mut hasher = DefaultHasher::new();
            status.hash(&mut hasher);
            let status = cx.keyed_child(hasher.finish(), &SplashStatus(status, width));
            let holder = cx.container(LayoutStyle::stack(Axis::Vertical), &[status], Paint::None);
            held_back(cx, holder, now < rest_at, Effect::hidden(), theme.motion.base);
            content.push(holder);
        }

        let spinner =
            crate::VStack::new((crate::Spinner::new().size(theme.spacing.s6),)).align(Align::Center);
        let spinner = motion::collapse(cx, s.progress.is_none(), &spinner);
        let bar = motion::collapse(cx, s.progress.is_some(), &SplashBar(s.progress.unwrap_or(1.0)));
        let indicator = cx.container(
            LayoutStyle { width: Some(width), align: Align::Stretch, ..LayoutStyle::stack(Axis::Vertical) },
            &[spinner, bar],
            Paint::None,
        );
        held_back(cx, indicator, now < rest_at, Effect::hidden(), theme.motion.base);
        content.push(indicator);

        let node = cx.container(
            LayoutStyle {
                width: Some(viewport.width),
                height: Some(viewport.height),
                padding: Insets::uniform(theme.spacing.s6),
                spacing: theme.spacing.s4,
                align: Align::Center,
                justify: Justify::Center,
                ..LayoutStyle::stack(Axis::Vertical)
            },
            &content,
            Paint::Quad(QuadPaint::new(theme.color(Semantic::Canvas))),
        );
        cx.semantics(node, Semantics::new(Role::Dialog).name(s.name.clone()).modal());
        // Takes the clicks that would otherwise reach the page behind it.
        cx.cursor(node, CursorIcon::Default);
        cx.motion(
            node,
            Motion::new()
                .enter(Effect::hidden(), theme.motion.base)
                .exit(Effect::hidden().with_scale(1.02), theme.motion.slow),
        );
        node
    }
}

impl View for SplashScreen {
    fn build(&self, cx: &mut BuildCx<'_>) -> NodeId {
        let anchor = cx.empty();
        if self.visible.get() {
            // The app usually appears under it, with layers of its own built first.
            cx.keyed_overlay(SPLASH_OVERLAY_KEY, anchor, Placement::Fill, &SplashLayer(self), None);
        }
        anchor
    }
}

/// One notification in a [`Toaster`].
#[derive(Clone, Debug, PartialEq)]
#[cfg_attr(feature = "live", ravenrs_live::expose(part = "fields"))]
pub struct Toast {
    id: u64,
    title: String,
    message: String,
    tone: Tone,
    duration: f64,
    /// When it was first shown, on the UI clock.
    shown_at: Rc<Cell<Option<f64>>>,
    extras: ToastExtras,
}

/// Where in the window a [`Toaster`] stacks its toasts.
#[derive(Clone, Copy, Debug, Default, PartialEq, Eq, PartialOrd, Ord)]
#[non_exhaustive]
#[cfg_attr(feature = "live", ravenrs_live::expose(part = "variants"))]
pub enum ToastPosition {
    /// The top-left corner.
    TopLeft,
    /// The middle of the top edge.
    TopCenter,
    /// The top-right corner.
    TopRight,
    /// The bottom-left corner.
    BottomLeft,
    /// The middle of the bottom edge.
    BottomCenter,
    /// The bottom-right corner.
    #[default]
    BottomRight,
}

#[cfg_attr(feature = "live", ravenrs_live::expose)]
impl ToastPosition {
    fn placement(self) -> Placement {
        match self {
            Self::TopLeft => Placement::TopLeft,
            Self::TopCenter => Placement::TopCenter,
            Self::TopRight => Placement::TopRight,
            Self::BottomLeft => Placement::BottomLeft,
            Self::BottomCenter => Placement::BottomCenter,
            Self::BottomRight => Placement::BottomRight,
        }
    }

    /// Where a toast comes from and goes to: the edge it is nearest to.
    fn travel(self) -> Effect {
        match self {
            Self::TopLeft | Self::BottomLeft => Effect::moved(-32.0, 0.0),
            Self::TopRight | Self::BottomRight => Effect::moved(32.0, 0.0),
            Self::TopCenter => Effect::moved(0.0, -32.0),
            Self::BottomCenter => Effect::moved(0.0, 32.0),
        }
    }

    fn at_bottom(self) -> bool {
        matches!(self, Self::BottomLeft | Self::BottomCenter | Self::BottomRight)
    }
}

/// What a toast can do besides showing: a button, something to run once it is gone, and
/// a place of its own.
#[derive(Clone, Default)]
#[cfg_attr(feature = "live", ravenrs_live::expose(part = "fields"))]
pub struct ToastExtras {
    action: Option<(String, Rc<dyn Fn()>)>,
    on_close: Option<Rc<dyn Fn()>>,
    position: Option<ToastPosition>,
}

impl fmt::Debug for ToastExtras {
    fn fmt(&self, f: &mut fmt::Formatter<'_>) -> fmt::Result {
        f.debug_struct("ToastExtras")
            .field("action", &self.action.as_ref().map(|(label, _)| label))
            .finish_non_exhaustive()
    }
}

impl PartialEq for ToastExtras {
    fn eq(&self, other: &Self) -> bool {
        let same = |a: &Option<Rc<dyn Fn()>>, b: &Option<Rc<dyn Fn()>>| match (a, b) {
            (Some(a), Some(b)) => Rc::ptr_eq(a, b),
            (None, None) => true,
            _ => false,
        };
        let action = |extras: &Self| extras.action.as_ref().map(|(_, run)| run.clone());
        same(&action(self), &action(other))
            && same(&self.on_close, &other.on_close)
            && self.position == other.position
    }
}

#[cfg_attr(feature = "live", ravenrs_live::expose)]
impl ToastExtras {
    /// Nothing besides showing.
    pub fn new() -> Self {
        Self::default()
    }

    /// A button on the toast. Pressing it runs this and closes the toast.
    pub fn action(mut self, label: impl Into<String>, run: impl Fn() + 'static) -> Self {
        self.action = Some((label.into(), Rc::new(run)));
        self
    }

    /// Runs this once the toast is gone, by itself or closed by a person.
    pub fn on_close(mut self, run: impl Fn() + 'static) -> Self {
        self.on_close = Some(Rc::new(run));
        self
    }

    /// Shows this toast here instead of where its [`Toaster`] puts the others.
    pub fn position(mut self, position: ToastPosition) -> Self {
        self.position = Some(position);
        self
    }
}

/// A handle to show toasts from anywhere (event handlers, async tasks).
/// Place one [`Toaster`] in the UI to display them.
///
/// ```
/// use ravenrs_widgets::{Toaster, Toasts, Tone, Ui};
///
/// let toasts = Toasts::new();
/// let mut ui = Ui::new(Toaster::new(toasts.clone()), ravenrs_style::Theme::raven_dark());
///
/// toasts.show("Saved", "Your changes are stored.", Tone::Success);
/// assert_eq!(toasts.len(), 1);
/// ui.update();
/// ```
#[derive(Clone, Debug, Default)]
#[cfg_attr(feature = "live", ravenrs_live::expose(part = "fields"))]
pub struct Toasts {
    list: State<Vec<Toast>>,
    next: Rc<Cell<u64>>,
}

#[cfg_attr(feature = "live", ravenrs_live::expose)]
impl Toasts {
    /// An empty toast list.
    pub fn new() -> Self {
        Self::default()
    }

    /// Shows a toast for 4 seconds.
    pub fn show(&self, title: impl Into<String>, message: impl Into<String>, tone: Tone) {
        self.show_for(title, message, tone, 4.0);
    }

    /// Shows a toast for `seconds` seconds. At most four are kept; the oldest go first.
    pub fn show_for(&self, title: impl Into<String>, message: impl Into<String>, tone: Tone, seconds: f64) {
        self.show_with(title, message, tone, seconds, ToastExtras::new());
    }

    /// Shows a toast that stays until a person closes it or [`Self::dismiss`] does.
    pub fn show_until_closed(&self, title: impl Into<String>, message: impl Into<String>, tone: Tone) {
        self.show_for(title, message, tone, f64::INFINITY);
    }

    /// Shows a toast for `seconds` seconds, with a button or something to run once it is
    /// gone. With `f64::INFINITY` it stays until closed.
    pub fn show_with(
        &self,
        title: impl Into<String>,
        message: impl Into<String>,
        tone: Tone,
        seconds: f64,
        extras: ToastExtras,
    ) {
        let id = self.next.get();
        self.next.set(id + 1);
        let toast = Toast {
            id,
            title: title.into(),
            message: message.into(),
            tone,
            duration: seconds,
            shown_at: Rc::new(Cell::new(None)),
            extras,
        };
        let mut gone = Vec::new();
        self.list.update(|l| {
            l.push(toast);
            // Keep the stack short; the oldest go first.
            let excess = l.len().saturating_sub(4);
            gone.extend(l.drain(..excess));
        });
        tell_gone(&gone);
    }

    /// Removes the toast with this id, if still shown.
    pub fn dismiss(&self, id: u64) {
        let gone: Vec<Toast> = self.list.peek().iter().filter(|t| t.id == id).cloned().collect();
        self.list.update(|l| l.retain(|t| t.id != id));
        tell_gone(&gone);
    }

    /// Number of toasts currently shown.
    pub fn len(&self) -> usize {
        self.list.peek().len()
    }

    /// No toast is shown.
    pub fn is_empty(&self) -> bool {
        self.len() == 0
    }
}

/// Displays [`Toasts`] stacked in a corner of the window, the bottom-right one unless
/// told otherwise; each disappears after its duration or when closed.
///
/// ```
/// use ravenrs_widgets::{ToastExtras, ToastPosition, Toaster, Toasts, Tone, Ui};
///
/// let toasts = Toasts::new();
/// let toaster = Toaster::new(toasts.clone()).position(ToastPosition::TopCenter);
/// let mut ui = Ui::new(toaster, ravenrs_style::Theme::raven_dark());
///
/// toasts.show_until_closed("Sending", "Three files left.", Tone::Accent);
/// let corner = ToastExtras::new().position(ToastPosition::BottomRight);
/// toasts.show_with("Slow connection", "It may take longer.", Tone::Warning, 8.0, corner);
/// ui.update();
/// ```
#[derive(Debug)]
#[cfg_attr(feature = "live", ravenrs_live::expose(part = "fields"))]
pub struct Toaster {
    toasts: Toasts,
    bottom_inset: f32,
    position: ToastPosition,
}

#[cfg_attr(feature = "live", ravenrs_live::expose)]
impl Toaster {
    /// Displays the toasts of `toasts`.
    pub fn new(toasts: Toasts) -> Self {
        Self { toasts, bottom_inset: 0.0, position: ToastPosition::default() }
    }

    /// Where in the window the toasts stack (the bottom-right corner by default). A toast
    /// can ask for another place with [`ToastExtras::position`].
    pub fn position(mut self, position: ToastPosition) -> Self {
        self.position = position;
        self
    }

    /// Lifts the toasts by this much, in logical pixels, to clear something fixed
    /// along the bottom of the window, such as a [`StatusBar`](crate::StatusBar).
    pub fn bottom_inset(mut self, inset: f32) -> Self {
        self.bottom_inset = inset;
        self
    }
}

/// The layers of a [`Toaster`], one for each corner in use.
const TOAST_OVERLAY_KEY: u64 = 0x746f_6173_7400_0000;

fn tell_gone(gone: &[Toast]) {
    for toast in gone {
        if let Some(run) = &toast.extras.on_close {
            run();
        }
    }
}

fn tone_color(theme: &Theme, tone: Tone) -> (Color, IconName) {
    match tone {
        Tone::Neutral => (theme.color(Semantic::InkMuted), IconName::Bell),
        Tone::Accent => {
            (theme.color(Semantic::Accent).lerp(theme.color(Semantic::Ink), 0.25), IconName::Info)
        }
        Tone::Success => (theme.color(Semantic::Success), IconName::CircleCheck),
        Tone::Warning => (theme.color(Semantic::Warning), IconName::TriangleAlert),
        Tone::Danger => (theme.color(Semantic::Danger), IconName::CircleAlert),
    }
}

struct ToastStack<'a>(&'a [Toast], Toasts, f32, ToastPosition);

impl View for ToastStack<'_> {
    fn build(&self, cx: &mut BuildCx<'_>) -> NodeId {
        let theme = *cx.theme();
        let mut cards = Vec::new();
        for t in self.0 {
            let (color, icon) = tone_color(&theme, t.tone);
            let icon = util::icon(cx, icon, 18.0, color);
            let title = util::label(
                cx,
                &t.title,
                TextStyle::Body,
                Some(Weight::SEMIBOLD),
                theme.color(Semantic::Ink),
            );
            let msg = util::label(cx, &t.message, TextStyle::Callout, None, theme.color(Semantic::InkMuted));
            let mut lines = vec![title, msg];
            if let Some((label, run)) = &t.extras.action {
                let (toasts, id, run) = (self.1.clone(), t.id, run.clone());
                lines.push(cx.keyed_child(
                    t.id << 1 | 1,
                    &Button::new(label.clone()).style(ButtonStyle::Ghost).size(ButtonSize::Small).on_click(
                        move || {
                            run();
                            toasts.dismiss(id);
                        },
                    ),
                ));
            }
            let text = cx.container(
                LayoutStyle { grow: 1.0, spacing: 2.0, ..LayoutStyle::stack(Axis::Vertical) },
                &lines,
                Paint::None,
            );
            let (toasts, id) = (self.1.clone(), t.id);
            let x = cx.keyed_child(
                t.id << 1,
                &IconButton::new(IconName::X)
                    .label(cx.labels().dismiss.clone())
                    .size(ButtonSize::Small)
                    .on_click(move || toasts.dismiss(id)),
            );
            let card = cx.container(
                LayoutStyle {
                    width: Some(360.0),
                    padding: Insets { top: 14.0, bottom: 14.0, left: 16.0, right: 8.0 },
                    spacing: 12.0,
                    ..LayoutStyle::stack(Axis::Horizontal)
                },
                &[icon, text, x],
                Paint::Quad(QuadPaint {
                    corner_radius: theme.radii.lg,
                    border: Some(Border { width: 1.0, color: theme.color(Semantic::Border) }),
                    shadow: Some(theme.elevation.raised),
                    ..QuadPaint::new(theme.color(Semantic::SurfaceElevated))
                }),
            );
            // Announced as it appears; danger toasts interrupt.
            let role = if t.tone == Tone::Danger { Role::Alert } else { Role::Status };
            cx.semantics(card, Semantics::new(role));
            cx.cursor(card, CursorIcon::Default);
            // The rest of the stack makes room as one comes or goes.
            cx.motion(
                card,
                Motion::new()
                    .key(t.id)
                    .layout(theme.motion.snappy)
                    .enter(self.3.travel(), theme.motion.gentle)
                    .exit(self.3.travel(), theme.motion.fast),
            );
            cards.push(card);
        }
        cx.container(
            LayoutStyle {
                spacing: 10.0,
                padding: Insets {
                    bottom: if self.3.at_bottom() { self.2 } else { 0.0 },
                    ..Insets::uniform(0.0)
                },
                ..LayoutStyle::stack(Axis::Vertical)
            },
            &cards,
            Paint::None,
        )
    }
}

impl View for Toaster {
    fn build(&self, cx: &mut BuildCx<'_>) -> NodeId {
        let anchor = cx.empty();
        let now = cx.now();
        let all = self.toasts.list.get();
        let mut visible = Vec::new();
        let mut expired = false;
        for t in &all {
            let shown = t.shown_at.get().unwrap_or_else(|| {
                t.shown_at.set(Some(now));
                now
            });
            let until = shown + t.duration;
            if now >= until {
                expired = true;
            } else {
                // One that stays until closed has no moment to wake for.
                if until.is_finite() {
                    cx.wake_at(until);
                }
                visible.push(t.clone());
            }
        }
        if expired {
            let ids: Vec<u64> = visible.iter().map(|t| t.id).collect();
            let gone: Vec<Toast> = all.iter().filter(|t| !ids.contains(&t.id)).cloned().collect();
            self.toasts.list.update(|l| l.retain(|t| ids.contains(&t.id)));
            tell_gone(&gone);
        }
        let place = |t: &Toast| t.extras.position.unwrap_or(self.position);
        let mut places: Vec<ToastPosition> = visible.iter().map(place).collect();
        places.sort_unstable();
        places.dedup();
        for position in places {
            let here: Vec<Toast> = visible.iter().filter(|t| place(t) == position).cloned().collect();
            // By corner: a stack that comes or goes does not make another start over.
            cx.keyed_overlay(
                TOAST_OVERLAY_KEY + position as u64,
                anchor,
                position.placement(),
                &ToastStack(&here, self.toasts.clone(), self.bottom_inset, position),
                None,
            );
        }
        anchor
    }
}

/// An action in the [`CommandPalette`].
#[cfg_attr(feature = "live", ravenrs_live::expose(part = "fields"))]
pub struct Command {
    label: String,
    group: String,
    icon: Option<IconName>,
    shortcut: Option<String>,
    action: Rc<dyn Fn()>,
}

impl fmt::Debug for Command {
    fn fmt(&self, f: &mut fmt::Formatter<'_>) -> fmt::Result {
        f.debug_struct("Command").field("label", &self.label).finish_non_exhaustive()
    }
}

#[cfg_attr(feature = "live", ravenrs_live::expose)]
impl Command {
    /// A command labeled `label`; `action` runs when it is chosen.
    pub fn new(label: impl Into<String>, action: impl Fn() + 'static) -> Self {
        Self {
            label: label.into(),
            group: String::new(),
            icon: None,
            shortcut: None,
            action: Rc::new(action),
        }
    }

    /// Lists the command under this group heading.
    pub fn group(mut self, group: impl Into<String>) -> Self {
        self.group = group.into();
        self
    }

    /// Shows an icon before the label.
    pub fn icon(mut self, icon: IconName) -> Self {
        self.icon = Some(icon);
        self
    }

    /// Shows a shortcut hint, e.g. `"⌘S"` (display only).
    pub fn shortcut(mut self, shortcut: impl Into<String>) -> Self {
        self.shortcut = Some(shortcut.into());
        self
    }
}

/// Is every character of `query` found in order in `text`? (case-insensitive)
pub(crate) fn fuzzy_match(text: &str, query: &str) -> bool {
    let text = text.to_lowercase();
    let mut chars = text.chars();
    query.to_lowercase().chars().filter(|c| !c.is_whitespace()).all(|q| chars.any(|c| c == q))
}

/// A searchable list of commands in a modal, opened with Cmd/Ctrl+K.
/// Type to filter (fuzzy), use ↑ ↓ to choose, Enter to run, Escape to close.
///
/// ```
/// use ravenrs_reactive::State;
/// use ravenrs_widgets::{Command, CommandPalette, IconName, Ui};
///
/// let open = State::new(true);
/// let palette = CommandPalette::new(open.binding())
///     .command(Command::new("New file", || {}).group("File").icon(IconName::Plus).shortcut("⌘N"))
///     .command(Command::new("Toggle theme", || {}).group("View"));
///
/// let mut ui = Ui::new(palette, ravenrs_style::Theme::raven_dark());
/// ui.update();
/// ```
#[cfg_attr(feature = "live", ravenrs_live::expose(part = "fields"))]
pub struct CommandPalette {
    open: Binding<bool>,
    commands: Vec<Command>,
    placeholder: Option<String>,
}

impl fmt::Debug for CommandPalette {
    fn fmt(&self, f: &mut fmt::Formatter<'_>) -> fmt::Result {
        f.debug_struct("CommandPalette").field("commands", &self.commands.len()).finish_non_exhaustive()
    }
}

#[cfg_attr(feature = "live", ravenrs_live::expose)]
impl CommandPalette {
    /// A palette shown while `open` is true; Cmd/Ctrl+K toggles it.
    pub fn new(open: Binding<bool>) -> Self {
        Self { open, commands: Vec::new(), placeholder: None }
    }

    /// Appends a command.
    pub fn command(mut self, command: Command) -> Self {
        self.commands.push(command);
        self
    }

    /// Sets the search box placeholder.
    pub fn placeholder(mut self, text: impl Into<String>) -> Self {
        self.placeholder = Some(text.into());
        self
    }
}

struct PaletteLayer<'a> {
    palette: &'a CommandPalette,
    query: State<String>,
    highlight: State<usize>,
}

impl View for PaletteLayer<'_> {
    fn build(&self, cx: &mut BuildCx<'_>) -> NodeId {
        let theme = *cx.theme();
        let viewport = cx.viewport();
        let q = self.query.get();
        let matches: Vec<usize> = (0..self.palette.commands.len())
            .filter(|&i| fuzzy_match(&self.palette.commands[i].label, &q))
            .collect();
        let highlight = self.highlight.get().min(matches.len().saturating_sub(1));
        let actions: Rc<Vec<Rc<dyn Fn()>>> =
            Rc::new(matches.iter().map(|&i| self.palette.commands[i].action.clone()).collect());

        let (hl, open, acts, count) =
            (self.highlight.clone(), self.palette.open.clone(), actions.clone(), matches.len());
        let field = cx.child(
            &TextField::new(self.query.binding())
                .placeholder(
                    self.palette.placeholder.clone().unwrap_or_else(|| cx.labels().search_commands.clone()),
                )
                .icon(IconName::Search)
                .autofocus()
                .intercept_keys(Rc::new(move |key, _| {
                    match key {
                        Key::ArrowDown if count > 0 => hl.update(|h| *h = (*h + 1).min(count - 1)),
                        Key::ArrowUp => hl.update(|h| *h = h.saturating_sub(1)),
                        Key::Enter => {
                            if let Some(a) = acts.get(hl.get().min(count.saturating_sub(1))) {
                                open.set(false);
                                a();
                            }
                        }
                        Key::Escape => open.set(false),
                        _ => return false,
                    }
                    true
                })),
        );
        let mut rows = vec![field];
        let mut last_group: Option<&str> = None;
        for (n, &i) in matches.iter().enumerate().take(12) {
            let c = &self.palette.commands[i];
            if last_group != Some(c.group.as_str()) && !c.group.is_empty() {
                rows.push(util::label(
                    cx,
                    &c.group.to_uppercase(),
                    TextStyle::Caption,
                    None,
                    theme.color(Semantic::InkMuted),
                ));
            }
            last_group = Some(c.group.as_str());
            let on = n == highlight;
            let ink = theme.color(Semantic::Ink);
            let mut items = Vec::new();
            if let Some(icon) = c.icon {
                items.push(util::icon(cx, icon, 16.0, theme.color(Semantic::InkMuted)));
            }
            let label = util::label(cx, &c.label, TextStyle::Body, None, ink);
            items.push(cx.container(
                LayoutStyle { grow: 1.0, ..LayoutStyle::stack(Axis::Horizontal) },
                &[label],
                Paint::None,
            ));
            if let Some(s) = &c.shortcut {
                items.push(cx.child(&crate::Kbd::new(s.clone())));
            }
            let fill = if on { theme.color(Semantic::Accent).with_alpha(0.16) } else { Color::TRANSPARENT };
            let row = cx.container(
                LayoutStyle {
                    height: Some(38.0),
                    padding: Insets::symmetric(0.0, 10.0),
                    spacing: 10.0,
                    align: Align::Center,
                    ..LayoutStyle::stack(Axis::Horizontal)
                },
                &items,
                Paint::Quad(QuadPaint { corner_radius: 8.0, ..QuadPaint::new(fill) }),
            );
            let mut semantics = Semantics::new(Role::ListBoxOption).selected(on).active(on);
            if let Some(shortcut) = &c.shortcut {
                semantics = semantics.name(c.label.clone()).description(shortcut.clone());
            }
            cx.semantics(row, semantics);
            let (open, action, hl) = (self.palette.open.clone(), c.action.clone(), self.highlight.clone());
            cx.on_click(
                row,
                Rc::new(move || {
                    open.set(false);
                    action();
                }),
            );
            let _ = hl;
            cx.cursor(row, CursorIcon::Pointer);
            rows.push(row);
        }
        if matches.is_empty() {
            rows.push(util::label(
                cx,
                &cx.labels().no_commands.clone(),
                TextStyle::Callout,
                None,
                theme.color(Semantic::InkMuted),
            ));
        }
        let palette_name = cx.labels().command_palette.clone();
        cx.label_control(field, &palette_name, None);
        let card = panel(cx, &rows, 10.0, (viewport.width - 32.0).clamp(280.0, 560.0));
        cx.semantics(card, Semantics::new(Role::Dialog).name(palette_name).modal());
        let scrim = motion::scrim(cx, viewport);
        let backdrop = cx.container(
            LayoutStyle {
                width: Some(viewport.width),
                height: Some(viewport.height),
                padding: Insets { top: (viewport.height * 0.15).min(140.0), ..Insets::ZERO },
                align: Align::Center,
                ..LayoutStyle::stack(Axis::Vertical)
            },
            &[scrim, card],
            Paint::None,
        );
        let close = self.palette.open.clone();
        cx.on_click(backdrop, Rc::new(move || close.set(false)));
        backdrop
    }
}

impl View for CommandPalette {
    fn build(&self, cx: &mut BuildCx<'_>) -> NodeId {
        let query: State<String> = cx.use_state(String::new);
        let highlight: State<usize> = cx.use_state(|| 0);
        let toggle = self.open.clone();
        let (q, h) = (query.clone(), highlight.clone());
        cx.shortcut(
            Key::Character("k".into()),
            true,
            Rc::new(move || {
                q.set(String::new());
                h.set(0);
                toggle.update(|o| *o = !*o);
            }),
        );
        let anchor = cx.empty();
        if self.open.get() {
            let close = self.open.clone();
            let layer = PaletteLayer { palette: self, query, highlight };
            cx.overlay(anchor, Placement::Fill, &layer, Some(Rc::new(move || close.set(false))));
        }
        anchor
    }
}

/// A select with a search box: type to filter the options.
#[derive(Debug)]
#[cfg_attr(feature = "live", ravenrs_live::expose(part = "fields"))]
pub struct Combobox {
    selected: Binding<Option<usize>>,
    options: Vec<String>,
    placeholder: Option<String>,
    width: f32,
    fill: bool,
    label: Option<String>,
    state: util::EditorState,
}

#[cfg_attr(feature = "live", ravenrs_live::expose)]
impl Combobox {
    /// A combobox over `options`; `selected` holds the zero-based index of the choice, or `None`.
    pub fn new(
        selected: Binding<Option<usize>>,
        options: impl IntoIterator<Item = impl Into<String>>,
    ) -> Self {
        Self {
            selected,
            options: options.into_iter().map(Into::into).collect(),
            placeholder: None,
            width: 240.0,
            fill: false,
            label: None,
            state: util::EditorState::default(),
        }
    }

    /// Sets the text shown when nothing is selected.
    pub fn placeholder(mut self, text: impl Into<String>) -> Self {
        self.placeholder = Some(text.into());
        self
    }

    /// Takes the width of its parent, as other fields of a form do.
    pub fn fill(mut self) -> Self {
        self.fill = true;
        self
    }

    /// Sets the width in logical pixels (240 by default).
    pub fn width(mut self, width: f32) -> Self {
        self.width = width;
        self
    }

    /// The name screen readers announce, such as "Framework". Inside a
    /// [`crate::FormField`], its label is used instead.
    pub fn label(mut self, label: impl Into<String>) -> Self {
        self.label = Some(label.into());
        self
    }

    /// Turns the control off: it fades, leaves the tab order and ignores input.
    pub fn disabled(mut self, disabled: bool) -> Self {
        self.state.disabled = disabled;
        self
    }

    /// Shows the value without letting it change; it can still be focused and read.
    pub fn read_only(mut self, read_only: bool) -> Self {
        self.state.read_only = read_only;
        self
    }
}

/// One option under a search box: what a [`Combobox`] and a lookup list show.
pub(crate) fn search_row(
    cx: &mut BuildCx<'_>,
    text: &str,
    selected: bool,
    highlighted: bool,
    on_pick: Rc<dyn Fn()>,
) -> NodeId {
    let theme = *cx.theme();
    let ink = theme.color(Semantic::Ink);
    let label = util::label(cx, text, TextStyle::Body, selected.then_some(Weight::SEMIBOLD), ink);
    let mut items = vec![cx.container(
        LayoutStyle { grow: 1.0, ..LayoutStyle::stack(Axis::Horizontal) },
        &[label],
        Paint::None,
    )];
    if selected {
        items.push(util::icon(cx, IconName::Check, 16.0, theme.color(Semantic::Accent).lerp(ink, 0.3)));
    }
    let fill = if highlighted { ink.with_alpha(0.07) } else { Color::TRANSPARENT };
    let row = cx.container(
        LayoutStyle {
            height: Some(34.0),
            padding: Insets::symmetric(0.0, 10.0),
            align: Align::Center,
            ..LayoutStyle::stack(Axis::Horizontal)
        },
        &items,
        Paint::Quad(QuadPaint { corner_radius: 7.0, ..QuadPaint::new(fill) }),
    );
    cx.semantics(row, Semantics::new(Role::ListBoxOption).selected(selected).active(highlighted));
    cx.on_click(row, on_pick);
    cx.cursor(row, CursorIcon::Pointer);
    row
}

/// A search box over a list of options, as a [`Combobox`] and a searchable
/// [`Select`](crate::Select) open. `pick` also has to close it.
pub(crate) struct SearchPanel<'a> {
    pub options: &'a [String],
    pub current: Option<usize>,
    pub pick: Rc<dyn Fn(usize)>,
    pub query: State<String>,
    pub highlight: State<usize>,
    pub open: State<bool>,
    pub width: f32,
}

impl View for SearchPanel<'_> {
    fn build(&self, cx: &mut BuildCx<'_>) -> NodeId {
        let theme = *cx.theme();
        let q = self.query.get();
        let matches: Vec<usize> =
            (0..self.options.len()).filter(|&i| fuzzy_match(&self.options[i], &q)).collect();
        let hl = self.highlight.get().min(matches.len().saturating_sub(1));
        let (current, pick) = (self.current, self.pick.clone());
        let (h, m, p, open) =
            (self.highlight.clone(), Rc::new(matches.clone()), pick.clone(), self.open.clone());
        let field = cx.child(
            &TextField::new(self.query.binding())
                .placeholder(cx.labels().search.clone())
                .icon(IconName::Search)
                .compact()
                .autofocus()
                .intercept_keys(Rc::new(move |key, _| {
                    match key {
                        Key::ArrowDown if !m.is_empty() => h.update(|x| *x = (*x + 1).min(m.len() - 1)),
                        Key::ArrowUp => h.update(|x| *x = x.saturating_sub(1)),
                        Key::Enter => {
                            if let Some(&i) = m.get(h.get().min(m.len().saturating_sub(1))) {
                                p(i);
                            }
                        }
                        Key::Escape => open.set(false),
                        _ => return false,
                    }
                    true
                })),
        );
        let mut rows = vec![field];
        for (n, &i) in matches.iter().enumerate().take(50) {
            let p = pick.clone();
            rows.push(search_row(cx, &self.options[i], current == Some(i), n == hl, Rc::new(move || p(i))));
        }
        if matches.is_empty() {
            rows.push(util::label(
                cx,
                &cx.labels().no_results.clone(),
                TextStyle::Callout,
                None,
                theme.color(Semantic::InkMuted),
            ));
        }
        let node = panel(cx, &rows, 6.0, self.width);
        cx.semantics(node, Semantics::new(Role::ListBox));
        node
    }
}

impl View for Combobox {
    fn build(&self, cx: &mut BuildCx<'_>) -> NodeId {
        let theme = *cx.theme();
        let open: State<bool> = cx.use_state(|| false);
        let query: State<String> = cx.use_state(String::new);
        let highlight: State<usize> = cx.use_state(|| 0);
        let state = self.state;
        let is_open = open.get() && state.accepts_input();
        let hovered = cx.is_hovered() && state.accepts_input();
        let (text, color) = match self.selected.get().and_then(|i| self.options.get(i)) {
            Some(t) => (t.clone(), theme.color(Semantic::Ink)),
            None => (
                self.placeholder.clone().unwrap_or_else(|| cx.labels().select.clone()),
                theme.color(Semantic::InkMuted),
            ),
        };
        let label = util::label(cx, &text, TextStyle::Body, None, state.ink(color));
        let label = cx.container(
            LayoutStyle { grow: 1.0, ..LayoutStyle::stack(Axis::Horizontal) },
            &[label],
            Paint::None,
        );
        let chevrons =
            util::icon(cx, IconName::ChevronDown, 16.0, state.ink(theme.color(Semantic::InkMuted)));
        let border = if is_open {
            Border { width: 1.5, color: theme.color(Semantic::Accent) }
        } else {
            let base = theme.color(Semantic::Border);
            Border {
                width: 1.0,
                color: state.ink(if hovered { base.lerp(theme.color(Semantic::Ink), 0.25) } else { base }),
            }
        };
        let node = cx.container(
            LayoutStyle {
                width: (!self.fill).then_some(self.width),
                height: Some(40.0),
                padding: Insets::symmetric(0.0, 12.0),
                spacing: 8.0,
                align: Align::Center,
                align_self: Some(if self.fill { Align::Stretch } else { Align::Fit }),
                ..LayoutStyle::stack(Axis::Horizontal)
            },
            &[label, chevrons],
            Paint::Quad(QuadPaint {
                corner_radius: theme.radii.md,
                border: Some(border),
                ..QuadPaint::new(state.fill(theme.color(Semantic::Control)))
            }),
        );
        cx.semantics(label, Semantics::hidden());
        let value = if self.selected.get().is_some() { text.clone() } else { String::new() };
        let mut semantics = Semantics::new(Role::ComboBox).value(value).expanded(is_open);
        if let Some(label) = &self.label {
            semantics = semantics.name(label.clone());
        }
        cx.semantics(node, state.semantics(semantics));
        if state.disabled {
            return node;
        }
        if !state.accepts_input() {
            cx.focusable(node, theme.radii.md);
            return node;
        }
        let (o, q, h) = (open.clone(), query.clone(), highlight.clone());
        cx.on_click(
            node,
            Rc::new(move || {
                q.set(String::new());
                h.set(0);
                o.update(|x| *x = !*x);
            }),
        );
        cx.focusable(node, theme.radii.md);
        cx.cursor(node, CursorIcon::Pointer);
        if is_open {
            let close = open.clone();
            let pick: Rc<dyn Fn(usize)> = {
                let (selected, open) = (self.selected.clone(), open.clone());
                Rc::new(move |i| {
                    selected.set(Some(i));
                    open.set(false);
                })
            };
            let panel = SearchPanel {
                options: &self.options,
                current: self.selected.get(),
                pick,
                query,
                highlight,
                open: open.clone(),
                width: self.width,
            };
            cx.overlay(node, Placement::Below, &panel, Some(Rc::new(move || close.set(false))));
        }
        node
    }
}

#[cfg(test)]
mod tests {
    use super::fuzzy_match;

    #[test]
    fn fuzzy_matching() {
        assert!(fuzzy_match("Toggle theme", "tgth"));
        assert!(fuzzy_match("Open settings", "open set"));
        assert!(!fuzzy_match("Export CSV", "xcz"));
        assert!(fuzzy_match("anything", ""));
    }
}