The primitives

[dependencies]
zgui = { path = "../zgui/crates/zgui" }
zgui-ui-primitives = { path = "../zgui/crates/zgui-ui-primitives" }

use zgui_ui_primitives::prelude::*;

#[component]
pub fn Popper(
    /// What the surface is placed against.
    anchor: NodeRef,
    #[prop(into, default = Signal::stored_local(Placement::BOTTOM))]
    placement: Signal<Placement, LocalStorage>,
    /// Cross to the other side of the anchor when there is not enough room.
    #[prop(default = true)] flip: bool,
    /// Slide along the anchor's edge to stay inside the window.
    #[prop(default = true)] shift: bool,
    /// How far off the anchor the surface sits, in CSS pixels.
    #[prop(default = 4.0)] offset: f32,
    /// How close to the window's edge the surface may come, in CSS pixels.
    #[prop(default = 8.0)] padding: f32,
    /// Whether the surface is on screen and therefore worth placing.
    #[prop(into, default = Signal::stored_local(true))] active: Signal<bool, LocalStorage>,
    #[prop(optional)] element_ref: Option<NodeRef>,
    #[prop(into, optional)] class: Classes,
    children: Children,
) -> impl IntoView

pub enum Side { Top, Right, Bottom, Left }            // Default: Bottom
pub enum Align { Start, Center, End }                 // Default: Center
pub struct Placement { pub side: Side, pub align: Align }

impl Side {
    pub const ALL: &'static [Self];
    pub const fn opposite(self) -> Self;
    pub const fn is_vertical(self) -> bool;
    pub const fn name(self) -> &'static str;          // the data-side value
}
impl Align { pub const ALL: &'static [Self]; pub const fn name(self) -> &'static str; }
impl Placement {
    pub const BOTTOM: Self;                            // Bottom, Center
    pub const TOP: Self;                               // Top, Center
    pub const fn new(side: Side, align: Align) -> Self;
    pub const fn flipped(self) -> Self;                // opposite side, same alignment
}

pub type WindowRect = Rect<DevicePx, Device>;

pub struct PopperOptions {
    pub placement: Placement,
    pub flip: bool,
    pub shift: bool,
    pub offset: f32,   // device pixels here, not CSS pixels
    pub padding: f32,
}

pub struct Solution {
    pub origin: Point<DevicePx, Device>,
    pub placement: Placement,   // where it actually went
    pub overflow: f32,          // how far it still hangs outside; zero when it fits
}

pub fn solve(
    anchor: WindowRect,
    floating: Size<DevicePx, Device>,
    viewport: WindowRect,
    options: &PopperOptions,
) -> Solution;

#[component]
pub fn FocusScope(
    #[prop(into, default = Signal::stored_local(true))] trapped: Signal<bool, LocalStorage>,
    #[prop(default = FocusTrapOptions::MODAL)] options: FocusTrapOptions,
    #[prop(optional)] element_ref: Option<NodeRef>,
    #[prop(into, optional)] class: Classes,
    children: Children,
) -> impl IntoView

#[component]
pub fn RovingFocus(
    #[prop(default = Orientation::Horizontal)] orientation: Orientation,
    #[prop(default = true)] wrap: bool,
    #[prop(optional)] element_ref: Option<NodeRef>,
    #[prop(into, optional)] class: Classes,
    #[prop(attrs)] attrs: Attrs,
    children: Children,
) -> impl IntoView

pub enum Orientation { Horizontal, Vertical, Both }   // Default: Horizontal
impl Orientation { pub const fn name(self) -> &'static str; }

pub struct RovingContext;   // Copy
impl RovingContext {
    pub fn collection(&self) -> Collection;
    pub fn active(&self) -> Option<ItemId>;
    pub fn set_active(&self, id: ItemId);
    pub fn orientation(&self) -> Orientation;
    pub fn step(&self, steps: isize) -> bool;         // true when something moved
    pub fn go_to_end(&self, last: bool) -> bool;
    pub fn current() -> Option<Self>;
}

pub struct RovingItem;      // Copy
impl RovingItem {
    pub fn tabindex(&self) -> Signal<Focus, LocalStorage>;
    pub fn is_active(&self) -> bool;
    pub fn activate(&self);
    pub fn id(&self) -> ItemId;
    pub fn group(&self) -> RovingContext;
}

pub fn use_roving_item(node: NodeRef) -> Option<RovingItem>;
pub fn use_roving_item_when(
    node: NodeRef,
    reachable: Signal<bool, LocalStorage>,
) -> Option<RovingItem>;

#[component]
fn ToolbarButton(children: Children) -> impl IntoView {
    let node = NodeRef::new();
    let item = use_roving_item(node);
    view! {
        control(
            node_ref = node,
            tabindex = move || item.map_or(Focus::Sequential, |item| item.tabindex().get()),
            on:focus_in = move |_| { if let Some(item) = item { item.activate() } }
        ) {
            {children.into_view_once()}
        }
    }
}

#[component]
pub fn Presence(
    #[prop(into)] present: Signal<bool, LocalStorage>,
    /// The caller's element, whose exit animation decides when the content leaves.
    surface: NodeRef,
    children: ChildrenFn,
) -> impl IntoView

pub enum PresenceState { Open, Closed }
impl PresenceState {
    pub const fn name(self) -> &'static str;      // "open" | "closed"
    pub const fn is_leaving(self) -> bool;
}

pub struct PresenceContext;   // Copy
impl PresenceContext {
    pub fn new(state: Signal<PresenceState, LocalStorage>) -> Self;
    pub fn state(&self) -> PresenceState;
    pub fn state_name(&self) -> &'static str;
    pub fn current() -> Option<Self>;
}

pub fn use_presence() -> Option<PresenceContext>;

#[component]
pub fn DismissableLayer(
    /// Told why the layer should close. It closes nothing itself.
    on_dismiss: UnsyncCallback<DismissReason>,
    #[prop(default = OverlayLayer::default())] layer: OverlayLayer,
    #[prop(into, default = Signal::stored_local(true))]
    dismiss_on_outside_press: Signal<bool, LocalStorage>,
    #[prop(into, default = Signal::stored_local(true))]
    dismiss_on_escape: Signal<bool, LocalStorage>,
    /// One element outside the layer that a press on nonetheless belongs to it.
    #[prop(optional)] exclude: Option<NodeRef>,
    #[prop(optional)] element_ref: Option<NodeRef>,
    #[prop(into, optional)] class: Classes,
    children: Children,
) -> impl IntoView

#[non_exhaustive]
pub enum DismissReason { OutsidePress, EscapeKey }
impl DismissReason { pub const fn name(self) -> &'static str; }

pub struct LayerId(u64);
impl LayerId { pub const fn new(value: u64) -> Self; pub const fn get(self) -> u64; }

pub struct LayerStack;
impl LayerStack {
    pub fn new() -> Self;
    pub fn current() -> Self;
    pub fn push(&self, band: OverlayLayer, surface: NodeRef) -> LayerId;
    pub fn pop(&self, id: LayerId);
    pub fn set_leaving(&self, id: LayerId, leaving: bool);
    pub fn topmost(&self) -> Option<LayerId>;
    pub fn is_topmost(&self, id: LayerId) -> bool;
    pub fn answering_escape(&self) -> Option<LayerId>;
    pub fn answers_escape(&self, id: LayerId) -> bool;
    pub fn len(&self) -> usize;
    pub fn is_empty(&self) -> bool;
}

pub struct Collection;   // Copy
impl Collection {
    pub fn new() -> Self;
    pub fn provide() -> Self;
    pub fn current() -> Option<Self>;
    pub fn register(&self, node: NodeRef) -> ItemId;
    pub fn register_reachable_when(
        &self, node: NodeRef, reachable: Signal<bool, LocalStorage>,
    ) -> ItemId;
    pub fn deregister(&self, id: ItemId);
    pub fn items(&self) -> Vec<CollectionItem>;            // tree order, subscribes
    pub fn items_untracked(&self) -> Vec<CollectionItem>;
    pub fn len(&self) -> usize;
    pub fn is_empty(&self) -> bool;
    pub fn index_of(&self, id: ItemId) -> Option<usize>;
    pub fn at(&self, index: usize) -> Option<CollectionItem>;
    pub fn step(&self, from: Option<ItemId>, steps: isize, wrap: bool) -> Option<CollectionItem>;
    pub fn end(&self, last: bool) -> Option<CollectionItem>;
}

pub struct ItemId(u64);
impl ItemId { pub const fn new(value: u64) -> Self; pub const fn get(self) -> u64; }

pub struct CollectionItem;   // Copy
impl CollectionItem {
    pub fn new(id: ItemId, node: NodeRef) -> Self;
    pub fn reachable_when(
        id: ItemId, node: NodeRef, reachable: Signal<bool, LocalStorage>,
    ) -> Self;
    pub fn id(&self) -> ItemId;
    pub fn node(&self) -> NodeRef;
    pub fn is_reachable(&self) -> bool;
    pub fn focus(&self);
}

pub enum Binding<T: Clone + PartialEq + 'static> {
    Unbound,                                          // Default
    TwoWay(RwSignal<T, LocalStorage>),
    Controlled { read: Signal<T, LocalStorage>, write: UnsyncCallback<T> },
}

impl<T: Clone + PartialEq + 'static> Binding<T> {
    pub fn controlled(
        read: impl Into<Signal<T, LocalStorage>>,
        write: impl Fn(T) + 'static,
    ) -> Self;
    pub fn is_bound(&self) -> bool;
    pub fn is_controlled(&self) -> bool;
    pub fn get(&self) -> Option<T>;
    pub fn get_untracked(&self) -> Option<T>;
    pub fn write(&self, next: T);
}

impl<T> From<RwSignal<T, LocalStorage>> for Binding<T> { /* … */ }

pub struct Controllable<T: Clone + PartialEq + 'static>;   // Copy
impl<T: Clone + PartialEq + 'static> Controllable<T> {
    pub fn new(
        binding: Binding<T>, default_value: T, on_change: Option<UnsyncCallback<T>>,
    ) -> Self;
    pub fn uncontrolled(default_value: T, on_change: Option<UnsyncCallback<T>>) -> Self;
    pub fn binding(&self) -> Binding<T>;
    pub fn get(&self) -> T;
    pub fn get_untracked(&self) -> T;
    pub fn signal(&self) -> Signal<T, LocalStorage>;
    pub fn is_bound(&self) -> bool;
    pub fn is_controlled(&self) -> bool;
    pub fn set(&self, next: T);
    pub fn update(&self, change: impl FnOnce(&mut T));
}
impl Controllable<bool> { pub fn toggle(&self); }

// crates/zgui-ui/src/radio_group/mod.rs, abridged
#[component]
pub fn RadioGroup(
    #[prop(into, optional)] value: Binding<String>,
    #[prop(into, optional)] default_value: Option<String>,
    #[prop(optional)] on_change: Option<UnsyncCallback<String>>,
    #[prop(into, default = Signal::stored_local(false))] disabled: Signal<bool, LocalStorage>,
    #[prop(default = Orientation::Vertical)] orientation: Orientation,
    #[prop(into, optional)] label: Option<String>,
    #[prop(into, optional)] class: Classes,
    #[prop(attrs)] attrs: Attrs,
    children: Children,
) -> impl IntoView {
    install_stylesheet(SHEET, RadioGroupStyle::CSS);
    let group = NodeRef::new();
    provide_local_context(RadioContext {
        value: Controllable::new(value, default_value.unwrap_or_default(), on_change),
        disabled,
        group,
    });

    // `own` is built here: Role::RadioGroup, the orientation and the label for a reader,
    // plus the two class names. Elided.

    view! {
        RovingFocus(
            orientation = orientation, element_ref = group,
            class = class, {..own}, {..attrs}
        ) {
            {children.into_view_once()}
        }
    }
}

// crates/zgui-ui/src/radio_group/item.rs, abridged
let node = NodeRef::new();
let item = use_roving_item(node);
let group = RadioContext::current();

view! {
    control(
        node_ref = node,
        tabindex = move || item.map_or(Focus::Sequential, |item| item.tabindex().get()),
        on:click = move |_| on_click(),
        // Arrowing through a radio group chooses as it goes; that is the pattern's own rule.
        on:focus_in = move |_| choose(),
        {..own}, {..attrs}, class = class
    ) {
        Icon(icon = DISC)
    }
}

use zgui::prelude::*;
use zgui::reactive::{RwSignal, UnsyncCallback};
use zgui::{component, css, view};
use zgui_ui_primitives::prelude::*;

#[component]
fn Popover() -> impl IntoView {
    let open = RwSignal::new_local(false);
    let trigger = NodeRef::new();
    let surface = NodeRef::new();

    view! {
        box {
            control(
                class = "pop-trigger",
                node_ref = trigger,
                tabindex = Focus::Sequential,
                on:click = move |_| open.set(!open.get_untracked())
            ) {
                "Details"
            }
            Portal(layer = OverlayLayer::Popover) {
                Presence(present = Signal::from(open), surface = surface) {
                    DismissableLayer(
                        layer = OverlayLayer::Popover,
                        exclude = trigger,
                        on_dismiss = UnsyncCallback::new(move |_: DismissReason| open.set(false))
                    ) {
                        Popper(
                            anchor = trigger,
                            placement = Placement::BOTTOM,
                            offset = 6.0,
                            class = "pop-at"
                        ) {
                            PopoverPanel(element_ref = surface)
                        }
                    }
                }
            }
        }
    }
}

/// Its own component, because `use_presence` reads a context published above it.
#[component]
fn PopoverPanel(element_ref: NodeRef) -> impl IntoView {
    let presence = use_presence();
    view! {
        box(
            class = "pop-panel",
            node_ref = element_ref,
            attr:data-state = move || presence.map(|presence| presence.state_name().to_owned())
        ) {
            text {"Nine files, 2.1 MB."}
        }
    }
}

const SHEET: &str = css!(
    ".pop-trigger {
        padding: 6px 12px;
        border: 1px solid #cdced6;
        border-radius: 6px;
        background-color: #ffffff;
    }
    .pop-panel {
        padding: 12px 14px;
        border: 1px solid #d9d9e0;
        border-radius: 8px;
        background-color: #ffffff;
        box-shadow: 0 8px 24px rgba(0, 0, 0, 0.16);
        opacity: 1;
        transform: translateY(0px);
        transition: opacity 140ms ease-out, transform 140ms ease-out;
    }
    .pop-panel[data-state=\"closed\"] {
        opacity: 0;
        transform: translateY(-4px);
    }
    .pop-at[data-side=\"top\"] > .pop-panel[data-state=\"closed\"] {
        transform: translateY(4px);
    }"
);

fn main() -> Result<(), zgui::Error> {
    app().with_stylesheet(SHEET).run(|| view! { Popover() })
}

// A first attempt. It is wrong in four ways.
#[component]
fn Presence(present: Signal<bool, LocalStorage>, children: ChildrenFn) -> impl IntoView {
    let mounted = RwSignal::new_local(present.get_untracked());
    let watching = RenderEffect::new(move |_| {
        if present.get() {
            mounted.set(true);
        } else {
            set_timeout(Duration::from_millis(180), move || mounted.set(false));
        }
    });
    on_cleanup_local(move || drop(watching));

    view! {
        if move || mounted.get() { {children.view()} } else {}
    }
}