mobiler_core/

lib.rs

//! Mobiler runtime — the developer-facing API.
//!
//! Implement [`MobilerApp`] with your **typed** events, model, and view (built
//! from the [builders](#functions)). Mobiler wraps it in [`MobilerShell`], a
//! Crux app speaking the fixed UI ABI ([`mobiler_ui`]); you never touch the wire
//! protocol. Device APIs are capabilities via [`Cx`].

use std::marker::PhantomData;

pub mod format;
pub use format::{Currency, Locale};

use crux_core::{
    App, Command,
    capability::Operation,
    macros::effect,
    render::{RenderOperation, render},
};
use facet::Facet;
use serde::{Deserialize, Serialize, de::DeserializeOwned};

pub use mobiler_ui::{
    Action, BoxAlign, ButtonStyle, CardStyle, ChartBracket, ChartLegendItem, ChartRefLine, ChartRegion,
    ChartSeries, ChartStyle, ChartTick, Corner, Density, Fab, FieldKind, FontFamily, Icon,
    ImageRatio, ImageShape, InputValue, ProjectColor, Rgb, Segment, Sheet, Spacing, SwipeButton, Tab,
    TextStyle, Theme, Tone, Widget,
};

// ============================ capabilities ============================

/// Built-in capabilities the generic shell fulfils.
#[effect(facet_typegen)]
#[derive(Debug)]
pub enum Effect {
    Render(RenderOperation),
    /// Fire-and-forget plugin call (shell does not resolve).
    PluginNotify(PluginNotify),
    /// Request/response plugin call (shell resolves with a [`PluginResponse`]).
    Plugin(PluginCall),
}

#[derive(Facet, Serialize, Deserialize, Clone, Debug, PartialEq, Eq)]
pub struct PluginNotify {
    pub plugin: String,
    pub op: String,
    pub input: String,
}
impl Operation for PluginNotify {
    type Output = ();
}

#[derive(Facet, Serialize, Deserialize, Clone, Debug, PartialEq, Eq)]
pub struct PluginCall {
    pub plugin: String,
    pub op: String,
    pub input: String,
}
impl Operation for PluginCall {
    type Output = PluginResponse;
}

#[derive(Facet, Serialize, Deserialize, Clone, Debug, PartialEq, Eq)]
pub struct PluginResponse {
    pub ok: bool,
    pub output: String,
}

type Continuation<E> = Box<dyn FnOnce(PluginResponse) -> E + Send>;

/// Effects an app requests during `update`, generic over the app event type so
/// continuations stay fully typed.
pub struct Cx<E> {
    notifications: Vec<PluginNotify>,
    requests: Vec<(PluginCall, Continuation<E>)>,
}

impl<E> Default for Cx<E> {
    fn default() -> Self {
        Self { notifications: Vec::new(), requests: Vec::new() }
    }
}

impl<E> Cx<E> {
    /// Fire-and-forget call to a native plugin.
    pub fn notify(&mut self, plugin: impl Into<String>, op: impl Into<String>, input: impl Into<String>) {
        self.notifications.push(PluginNotify { plugin: plugin.into(), op: op.into(), input: input.into() });
    }

    /// Request/response call: when the plugin replies, `then(response)` produces
    /// the typed event delivered back to your `update`.
    pub fn plugin(
        &mut self,
        plugin: impl Into<String>,
        op: impl Into<String>,
        input: impl Into<String>,
        then: impl FnOnce(PluginResponse) -> E + Send + 'static,
    ) {
        self.requests
            .push((PluginCall { plugin: plugin.into(), op: op.into(), input: input.into() }, Box::new(then)));
    }

    /// Persist `data` (handed back to [`MobilerApp::restore`] on next startup).
    pub fn save(&mut self, data: impl Into<String>) {
        self.notify("storage", "save", data);
    }

    /// Copy `text` to the system clipboard (built-in `clipboard` capability).
    pub fn copy(&mut self, text: impl Into<String>) {
        self.notify("clipboard", "copy", text);
    }

    /// Open the system share sheet with `text` (built-in `share` capability).
    pub fn share(&mut self, text: impl Into<String>) {
        self.notify("share", "text", text);
    }

    /// Open `url` in the platform browser / default handler (built-in `browser`
    /// capability). Fire-and-forget: the app leaves the foreground.
    pub fn open_url(&mut self, url: impl Into<String>) {
        self.notify("browser", "open", url);
    }

    /// Show a transient toast / snackbar with `text` (built-in `toast` capability).
    pub fn toast(&mut self, text: impl Into<String>) {
        self.notify("toast", "show", text);
    }

    /// Fire a haptic tap (built-in `haptics` capability). `style` is `"light"`,
    /// `"medium"`, or `"heavy"`; unknown styles fall back to medium.
    pub fn haptic(&mut self, style: impl Into<String>) {
        self.notify("haptics", style, "");
    }

    /// Perform an HTTP request via the shell's built-in `http` capability. When it
    /// completes, `then(response)` produces the typed event delivered back to
    /// `update` — `response.output` is the body, `response.ok` is success (2xx).
    /// Rides the request/response plugin mechanism, so it resolves asynchronously.
    pub fn http(
        &mut self,
        method: impl Into<String>,
        url: impl Into<String>,
        body: Option<String>,
        then: impl FnOnce(PluginResponse) -> E + Send + 'static,
    ) {
        #[derive(Serialize)]
        struct HttpReq {
            url: String,
            body: Option<String>,
        }
        let input = serde_json::to_string(&HttpReq { url: url.into(), body })
            .expect("serialize http request");
        self.plugin("http", method, input, then);
    }

    /// `GET url`, delivering the response to `then`.
    pub fn get(&mut self, url: impl Into<String>, then: impl FnOnce(PluginResponse) -> E + Send + 'static) {
        self.http("GET", url, None, then);
    }
    /// `POST url` with a JSON `body`, delivering the response to `then`.
    pub fn post(&mut self, url: impl Into<String>, body: impl Into<String>, then: impl FnOnce(PluginResponse) -> E + Send + 'static) {
        self.http("POST", url, Some(body.into()), then);
    }
    /// `PATCH url` with a JSON `body`, delivering the response to `then`.
    pub fn patch(&mut self, url: impl Into<String>, body: impl Into<String>, then: impl FnOnce(PluginResponse) -> E + Send + 'static) {
        self.http("PATCH", url, Some(body.into()), then);
    }
    /// `DELETE url`, delivering the response to `then`.
    pub fn delete(&mut self, url: impl Into<String>, then: impl FnOnce(PluginResponse) -> E + Send + 'static) {
        self.http("DELETE", url, None, then);
    }

    /// Query the device model/name via the built-in `device` capability; the result
    /// (`response.output`, e.g. "Google Pixel 7" / "Apple iPhone (iOS 18.0)") is
    /// delivered to `then`.
    pub fn device_model(&mut self, then: impl FnOnce(PluginResponse) -> E + Send + 'static) {
        self.plugin("device", "model", "", then);
    }

    /// Query the device's preferred locale as a BCP-47 language tag (e.g. `"de-CH"`, `"en-US"`)
    /// via the built-in `device` capability; `then` receives it in `response.output`. Pair with
    /// [`Locale::from_tag`](crate::format::Locale::from_tag) to choose the app's language /
    /// formatting locale at startup. Works on iOS, Android, and web.
    pub fn device_locale(&mut self, then: impl FnOnce(PluginResponse) -> E + Send + 'static) {
        self.plugin("device", "locale", "", then);
    }

    /// Let the user pick an image (built-in `photo` capability — the system photo
    /// picker, no permission required). `then` receives the result: on success
    /// `response.ok` is `true` and `response.output` is a local image URI you can
    /// hand straight to the `image(...)` widget; on cancel, `ok` is `false`.
    pub fn pick_photo(&mut self, then: impl FnOnce(PluginResponse) -> E + Send + 'static) {
        self.plugin("photo", "pick", "", then);
    }

    /// Capture a photo with the device camera (built-in `camera` capability — launches
    /// the system camera). `then` receives the result: on success `response.ok` is
    /// `true` and `response.output` is a local image URI you can hand straight to the
    /// `image(...)` widget; on cancel, `ok` is `false`. iOS requires an
    /// `NSCameraUsageDescription` (the template ships one, opt-in); Android captures via
    /// the system camera app, so no extra runtime permission is needed.
    pub fn capture_photo(&mut self, then: impl FnOnce(PluginResponse) -> E + Send + 'static) {
        self.plugin("camera", "capture", "", then);
    }

    /// Ask the user to confirm via a native dialog (built-in `dialog` capability).
    /// `then` receives the choice: `response.ok` is `true` if confirmed, `false` if
    /// cancelled/dismissed. Resolves asynchronously (the user replies whenever).
    pub fn confirm(
        &mut self,
        title: impl Into<String>,
        message: impl Into<String>,
        then: impl FnOnce(PluginResponse) -> E + Send + 'static,
    ) {
        #[derive(Serialize)]
        struct Confirm {
            title: String,
            message: String,
        }
        let input = serde_json::to_string(&Confirm { title: title.into(), message: message.into() })
            .expect("serialize confirm");
        self.plugin("dialog", "confirm", input, then);
    }

    /// Let the user pick a date via the native date picker (built-in `datetime`
    /// capability). On success `response.ok` is `true` and `response.output` is the
    /// chosen date as an ISO `YYYY-MM-DD` string; on cancel/dismiss, `ok` is `false`.
    /// Resolves asynchronously (the user replies whenever).
    pub fn pick_date(&mut self, then: impl FnOnce(PluginResponse) -> E + Send + 'static) {
        self.plugin("datetime", "date", "", then);
    }

    /// Let the user pick a time via the native time picker (built-in `datetime`
    /// capability). On success `response.ok` is `true` and `response.output` is the
    /// chosen time as a 24-hour `HH:MM` string; on cancel/dismiss, `ok` is `false`.
    /// Resolves asynchronously (the user replies whenever).
    pub fn pick_time(&mut self, then: impl FnOnce(PluginResponse) -> E + Send + 'static) {
        self.plugin("datetime", "time", "", then);
    }
}

// ============================ the app trait ============================

/// What a Mobiler app implements. Write typed domain events; Mobiler serializes
/// them into opaque tokens behind the scenes.
pub trait MobilerApp: Default {
    type Event: Serialize + DeserializeOwned + Send + 'static;
    type Model: Default;

    fn update(&self, event: Self::Event, model: &mut Self::Model, cx: &mut Cx<Self::Event>);

    fn input(&self, id: &str, value: InputValue, model: &mut Self::Model, cx: &mut Cx<Self::Event>) {
        let _ = (id, value, model, cx);
    }

    /// Restore persisted state on startup. `data` is whatever you last passed to
    /// `cx.save` (or empty if nothing was saved). Default: ignore.
    fn restore(&self, data: &str, model: &mut Self::Model) {
        let _ = (data, model);
    }

    /// Run once on startup, after [`restore`](Self::restore). The place to kick
    /// off initial effects — e.g. fetch data with `cx.get`. Default: nothing.
    fn init(&self, model: &mut Self::Model, cx: &mut Cx<Self::Event>) {
        let _ = (model, cx);
    }

    fn view(&self, model: &Self::Model) -> Widget;
}

/// Crux adapter: turns a [`MobilerApp`] into an app speaking the fixed ABI.
pub struct MobilerShell<A>(PhantomData<fn() -> A>);

impl<A> Default for MobilerShell<A> {
    fn default() -> Self {
        Self(PhantomData)
    }
}

impl<A: MobilerApp> App for MobilerShell<A> {
    type Event = Action;
    type Model = A::Model;
    type ViewModel = Widget;
    type Effect = Effect;

    fn update(&self, action: Action, model: &mut Self::Model) -> Command<Effect, Action> {
        let app = A::default();
        let mut cx = Cx::<A::Event>::default();
        match action {
            Action::Fired { token } => {
                if let Ok(event) = serde_json::from_str::<A::Event>(&token) {
                    app.update(event, model, &mut cx);
                }
            }
            Action::Input { id, value } => app.input(&id, value, model, &mut cx),
            Action::Restore { data } => app.restore(&data, model),
            Action::Start => app.init(model, &mut cx),
        }
        let mut commands: Vec<Command<Effect, Action>> = Vec::new();
        for op in cx.notifications {
            commands.push(Command::notify_shell(op).build());
        }
        for (op, then) in cx.requests {
            commands.push(Command::request_from_shell(op).then_send(move |response: PluginResponse| {
                Action::Fired { token: serde_json::to_string(&then(response)).expect("serialize event") }
            }));
        }
        commands.push(render());
        Command::all(commands)
    }

    fn view(&self, model: &Self::Model) -> Widget {
        A::default().view(model)
    }
}

// ============================ navigation ============================

/// A navigation stack the app holds in its `Model`. The **core owns the stack**
/// (single source of truth); the framework reads its `route`/`depth` to drive
/// the shell's push/pop transitions and back button.
///
/// `R` is your screen-route type (typically a small enum). Hold it in the model,
/// mutate it in `update` (`push`/`pop`/`reset`), match `current()` in `view`, and
/// build the shell with [`nav_scaffold`]. Wire a `Msg::Back` (or similar) event to
/// `pop` so the back affordance works.
///
/// ```ignore
/// #[derive(Clone, Serialize)] enum Route { List, Detail(u32) }
/// // model.nav: Nav<Route> = Nav::new(Route::List);
/// // update: Msg::Open(id) => model.nav.push(Route::Detail(id)),
/// //         Msg::Back      => model.nav.pop(),
/// // view:   nav_scaffold(title, dark, tabs, body, &model.nav, Msg::Back)
/// ```
#[derive(Clone, Debug)]
pub struct Nav<R> {
    stack: Vec<R>,
}

impl<R: Clone + Serialize> Nav<R> {
    /// A stack containing a single root route.
    #[must_use]
    pub fn new(root: R) -> Self {
        Self { stack: vec![root] }
    }
    /// Push a new screen onto the stack.
    pub fn push(&mut self, route: R) {
        self.stack.push(route);
    }
    /// Pop the top screen (no-op at the root).
    pub fn pop(&mut self) {
        if self.stack.len() > 1 {
            self.stack.pop();
        }
    }
    /// Replace the whole stack with a fresh root (e.g. switching bottom-nav tabs).
    pub fn reset(&mut self, root: R) {
        self.stack = vec![root];
    }
    /// The current (top) route — what `view` should render.
    #[must_use]
    pub fn current(&self) -> &R {
        self.stack.last().expect("nav stack is never empty")
    }
    /// Stack depth (root = 1).
    #[must_use]
    pub fn depth(&self) -> u32 {
        self.stack.len() as u32
    }
    /// Whether there is a screen to pop back to.
    #[must_use]
    pub fn can_go_back(&self) -> bool {
        self.stack.len() > 1
    }
    /// Stable identity of the current route (its serialization), used by the shell
    /// to decide when to animate a transition.
    fn route_key(&self) -> String {
        serde_json::to_string(self.current()).expect("serialize route")
    }
}

// ============================ widget builders ============================
// Action-carrying builders take a TYPED event and serialize it into a token.

fn tok<E: Serialize>(event: E) -> String {
    serde_json::to_string(&event).expect("serialize event")
}

#[must_use]
pub fn styled(content: impl Into<String>, style: TextStyle) -> Widget {
    Widget::Text { content: content.into(), style }
}
#[must_use]
pub fn text(content: impl Into<String>) -> Widget { styled(content, TextStyle::Body) }
#[must_use]
pub fn title(content: impl Into<String>) -> Widget { styled(content, TextStyle::Title) }
#[must_use]
pub fn subtitle(content: impl Into<String>) -> Widget { styled(content, TextStyle::Subtitle) }
#[must_use]
pub fn caption(content: impl Into<String>) -> Widget { styled(content, TextStyle::Caption) }
#[must_use]
pub fn emphasis(content: impl Into<String>) -> Widget { styled(content, TextStyle::Emphasis) }

#[must_use]
pub fn image(source: impl Into<String>, shape: ImageShape, ratio: ImageRatio) -> Widget {
    Widget::Image { source: source.into(), shape, ratio }
}
#[must_use]
pub fn badge(label: impl Into<String>, tone: Tone) -> Widget {
    Widget::Badge { label: label.into(), tone }
}
/// A small colored identity dot.
#[must_use]
pub fn color_dot(color: ProjectColor) -> Widget {
    Widget::ColorDot { color }
}
#[must_use]
pub fn divider() -> Widget { Widget::Divider }
/// A progress bar (`Some(0.0..=1.0)`) or an indeterminate spinner (`None`).
#[must_use]
pub fn progress(value: Option<f32>) -> Widget { Widget::Progress { value } }
/// A shimmer placeholder shown while content loads.
#[must_use]
pub fn skeleton() -> Widget { Widget::Skeleton }
/// A single unnamed series wrapping `values` — the back-compat shape for `bar_chart`/`line_chart`.
fn one_series(values: Vec<f32>) -> Vec<ChartSeries> {
    vec![ChartSeries { name: String::new(), values, color: None, goal: None }]
}

/// A bar chart of `values` (normalized to the max), with optional per-value `labels`.
/// Single-series, no axis or legend — for richer charts use [`chart`].
#[must_use]
pub fn bar_chart(values: Vec<f32>, labels: Vec<String>) -> Widget {
    Widget::Chart { series: one_series(values), labels, style: ChartStyle::Bar, axis: false, legend: false }
}
/// A line chart of `values` (normalized to the max), with optional per-value `labels`.
/// Single-series, no axis or legend — for richer charts use [`chart`].
#[must_use]
pub fn line_chart(values: Vec<f32>, labels: Vec<String>) -> Widget {
    Widget::Chart { series: one_series(values), labels, style: ChartStyle::Line, axis: false, legend: false }
}
/// A multi-series chart in the given `style`, with optional x-axis `labels`, y-`axis` gridlines/
/// ticks (cartesian styles), and a series `legend`. The general builder behind the convenience
/// constructors below.
#[must_use]
pub fn chart(series: Vec<ChartSeries>, labels: Vec<String>, style: ChartStyle, axis: bool, legend: bool) -> Widget {
    Widget::Chart { series, labels, style, axis, legend }
}
/// Bars stacked to a total per x-slot. Axis + legend on by default.
#[must_use]
pub fn stacked_bar_chart(series: Vec<ChartSeries>, labels: Vec<String>) -> Widget {
    chart(series, labels, ChartStyle::StackedBar, true, true)
}
/// Bars where each x-slot fills to 100% — series as proportions. Legend on, no value axis.
#[must_use]
pub fn pct_stacked_bar_chart(series: Vec<ChartSeries>, labels: Vec<String>) -> Widget {
    chart(series, labels, ChartStyle::StackedBar100, false, true)
}
/// A pie chart — each series is one wedge sized by its magnitude. Legend on.
#[must_use]
pub fn pie_chart(series: Vec<ChartSeries>) -> Widget {
    chart(series, vec![], ChartStyle::Pie, false, true)
}
/// A donut chart (pie with a center hole). Legend on.
#[must_use]
pub fn donut_chart(series: Vec<ChartSeries>) -> Widget {
    chart(series, vec![], ChartStyle::Donut, false, true)
}
/// Concentric progress rings — one per series, swept by `sum(values) / goal`. Legend on.
/// Give each series a goal via [`ChartSeries::with_goal`].
#[must_use]
pub fn rings_chart(series: Vec<ChartSeries>) -> Widget {
    chart(series, vec![], ChartStyle::Rings, false, true)
}
/// A single radial gauge — the first series' `value / goal` with the number in the center.
#[must_use]
pub fn gauge_chart(series: ChartSeries) -> Widget {
    chart(vec![series], vec![], ChartStyle::Gauge, false, false)
}

/// A variable-width stacked-region ("coverage-gap" / Marimekko) chart. `regions` are rectangles in
/// the `[0, x_max] × [0, y_max]` plane (build with [`ChartRegion::new`]); `ticks` label the
/// irregular x-axis; `ref_lines` are horizontal target/max lines ([`ChartRefLine::target`]/`::max`);
/// `legend` names the colors. Add a right-side bracket annotation with [`with_bracket`].
#[must_use]
pub fn region_chart(
    regions: Vec<ChartRegion>,
    ticks: Vec<ChartTick>,
    x_max: f32,
    y_max: f32,
    ref_lines: Vec<ChartRefLine>,
    legend: Vec<ChartLegendItem>,
) -> Widget {
    Widget::RegionChart { regions, ticks, x_max, y_max, ref_lines, bracket: None, legend }
}

/// Attach a right-side bracket annotation to a [`region_chart`] (no-op on any other widget).
#[must_use]
pub fn with_bracket(widget: Widget, bracket: ChartBracket) -> Widget {
    match widget {
        Widget::RegionChart { regions, ticks, x_max, y_max, ref_lines, legend, .. } => {
            Widget::RegionChart { regions, ticks, x_max, y_max, ref_lines, bracket: Some(bracket), legend }
        }
        other => other,
    }
}

/// Days in `month` (1–12) of `year`, leap-year aware.
fn days_in_month(year: u32, month: u8) -> u8 {
    match month {
        1 | 3 | 5 | 7 | 8 | 10 | 12 => 31,
        4 | 6 | 9 | 11 => 30,
        2 => if (year % 4 == 0 && year % 100 != 0) || year % 400 == 0 { 29 } else { 28 },
        _ => 30,
    }
}

/// Weekday of `year-month-day` as 0=Sunday..6=Saturday (Sakamoto's algorithm).
fn weekday(year: u32, month: u8, day: u8) -> u8 {
    const T: [u32; 12] = [0, 3, 2, 5, 0, 3, 5, 1, 4, 6, 2, 4];
    let y = if month < 3 { year - 1 } else { year };
    let m = month as usize - 1;
    ((y + y / 4 - y / 100 + y / 400 + T[m] + u32::from(day)) % 7) as u8
}

/// An inline month calendar for `year`/`month` (1–12). `on_day(d)` builds the tap event for each
/// day `d` in the month; `selected` highlights a day. Leading blanks + weekday header are handled
/// by the shells from the computed `first_weekday`.
#[must_use]
pub fn calendar<E: Serialize>(year: u32, month: u8, selected: Option<u8>, on_day: impl Fn(u8) -> E) -> Widget {
    let n = days_in_month(year, month);
    let on_day = (1..=n).map(|d| tok(on_day(d))).collect();
    Widget::Calendar { year, month, first_weekday: weekday(year, month, 1), selected, on_day }
}

/// A list row that reveals trailing `actions` (label, tone, event) on horizontal swipe; each is
/// tappable. On web the actions render inline (no gesture).
#[must_use]
pub fn swipe_action<S: Into<String>, E: Serialize>(child: Widget, actions: Vec<(S, Tone, E)>) -> Widget {
    Widget::SwipeAction {
        child: Box::new(child),
        actions: actions
            .into_iter()
            .map(|(label, tone, ev)| SwipeButton { label: label.into(), tone, on_tap: tok(ev) })
            .collect(),
    }
}
#[must_use]
pub fn spacer(size: Spacing) -> Widget { Widget::Spacer { size } }

#[must_use]
pub fn row(children: Vec<Widget>) -> Widget { Widget::Row { children } }
#[must_use]
pub fn column(children: Vec<Widget>) -> Widget { Widget::Column { children } }
#[must_use]
pub fn card(child: Widget, style: CardStyle) -> Widget {
    Widget::Card { child: Box::new(child), style, on_press: None }
}
/// A tappable card carrying a typed press event.
#[must_use]
pub fn card_button<E: Serialize>(child: Widget, style: CardStyle, on_press: E) -> Widget {
    Widget::Card { child: Box::new(child), style, on_press: Some(tok(on_press)) }
}
/// Z-stack/overlay (the `Box` widget). With `scrim`, the first child is a
/// darkened background and the rest render on top.
#[must_use]
pub fn stack(align: BoxAlign, scrim: bool, children: Vec<Widget>) -> Widget {
    Widget::Box { children, align, scrim }
}
#[must_use]
pub fn grid(children: Vec<Widget>) -> Widget { Widget::Grid { children } }
/// Horizontally scrolling row of children (a carousel / chip rail).
#[must_use]
pub fn scroller(children: Vec<Widget>) -> Widget { Widget::Scroller { children } }
/// A circular avatar image.
#[must_use]
pub fn avatar(source: impl Into<String>) -> Widget { Widget::Avatar { source: source.into(), status: None } }
/// A circular avatar image with a colored status dot.
#[must_use]
pub fn avatar_status(source: impl Into<String>, status: Tone) -> Widget {
    Widget::Avatar { source: source.into(), status: Some(status) }
}
/// A read-only star rating. `value` is in tenths (e.g. `48` = 4.8 of `max` stars).
#[must_use]
pub fn rating(value: u32, max: u8) -> Widget { Widget::Rating { value, max, on_rate: None } }
/// A tappable star rating — `on_rate` carries one event per star (star *i* fires `on_rate[i]`).
#[must_use]
pub fn rating_input<E: Serialize>(value: u32, max: u8, on_rate: Vec<E>) -> Widget {
    Widget::Rating { value, max, on_rate: Some(on_rate.into_iter().map(tok).collect()) }
}

#[must_use]
pub fn button<E: Serialize>(label: impl Into<String>, style: ButtonStyle, on_press: E) -> Widget {
    Widget::Button { label: label.into(), style, on_press: tok(on_press) }
}
#[must_use]
pub fn icon_button<E: Serialize>(icon: Icon, on_press: E) -> Widget {
    Widget::IconButton { icon, on_press: tok(on_press) }
}
#[must_use]
pub fn chip<E: Serialize>(label: impl Into<String>, selected: bool, on_press: E) -> Widget {
    Widget::Chip { label: label.into(), selected, on_press: tok(on_press) }
}
#[must_use]
pub fn text_field(id: impl Into<String>, placeholder: impl Into<String>, value: impl Into<String>) -> Widget {
    Widget::TextField { id: id.into(), placeholder: placeholder.into(), value: value.into(), kind: FieldKind::Text, error: None }
}
/// A text field with full control over [`FieldKind`] and an optional inline
/// validation `error`. The kind-specific helpers below ([`secure_field`],
/// [`email_field`], …) wrap this for the common cases.
#[must_use]
pub fn field(id: impl Into<String>, placeholder: impl Into<String>, value: impl Into<String>, kind: FieldKind, error: Option<String>) -> Widget {
    Widget::TextField { id: id.into(), placeholder: placeholder.into(), value: value.into(), kind, error }
}
/// A masked password field ([`FieldKind::Secure`]).
#[must_use]
pub fn secure_field(id: impl Into<String>, placeholder: impl Into<String>, value: impl Into<String>) -> Widget {
    field(id, placeholder, value, FieldKind::Secure, None)
}
/// An email-keyboard field ([`FieldKind::Email`]).
#[must_use]
pub fn email_field(id: impl Into<String>, placeholder: impl Into<String>, value: impl Into<String>) -> Widget {
    field(id, placeholder, value, FieldKind::Email, None)
}
/// A whole-number keypad field ([`FieldKind::Number`]).
#[must_use]
pub fn number_field(id: impl Into<String>, placeholder: impl Into<String>, value: impl Into<String>) -> Widget {
    field(id, placeholder, value, FieldKind::Number, None)
}
/// A decimal keypad field ([`FieldKind::Decimal`]).
#[must_use]
pub fn decimal_field(id: impl Into<String>, placeholder: impl Into<String>, value: impl Into<String>) -> Widget {
    field(id, placeholder, value, FieldKind::Decimal, None)
}
/// A phone-keypad field ([`FieldKind::Phone`]).
#[must_use]
pub fn phone_field(id: impl Into<String>, placeholder: impl Into<String>, value: impl Into<String>) -> Widget {
    field(id, placeholder, value, FieldKind::Phone, None)
}
/// A URL-keyboard field ([`FieldKind::Url`]).
#[must_use]
pub fn url_field(id: impl Into<String>, placeholder: impl Into<String>, value: impl Into<String>) -> Widget {
    field(id, placeholder, value, FieldKind::Url, None)
}
/// A growable multi-line text area ([`FieldKind::Multiline`]).
#[must_use]
pub fn multiline_field(id: impl Into<String>, placeholder: impl Into<String>, value: impl Into<String>) -> Widget {
    field(id, placeholder, value, FieldKind::Multiline, None)
}
/// Attach an inline validation message to a [`Widget::TextField`], marking it
/// invalid. No-op on any other widget.
#[must_use]
pub fn with_error(widget: Widget, message: impl Into<String>) -> Widget {
    match widget {
        Widget::TextField { id, placeholder, value, kind, .. } =>
            Widget::TextField { id, placeholder, value, kind, error: Some(message.into()) },
        other => other,
    }
}
/// A search input (leading magnifier, pill); emits `Input { id, Text }` like [`text_field`].
#[must_use]
pub fn search_field(id: impl Into<String>, placeholder: impl Into<String>, value: impl Into<String>) -> Widget {
    Widget::SearchField { id: id.into(), placeholder: placeholder.into(), value: value.into() }
}
/// One option in a [`segmented`] control, carrying a typed selection event.
#[must_use]
pub fn segment<E: Serialize>(label: impl Into<String>, selected: bool, on_select: E) -> Segment {
    Segment { label: label.into(), selected, on_select: tok(on_select) }
}
/// A single-choice segmented control (exclusive options in a pill).
#[must_use]
pub fn segmented(segments: Vec<Segment>) -> Widget {
    Widget::Segmented { segments }
}
#[must_use]
pub fn toggle(id: impl Into<String>, label: impl Into<String>, value: bool) -> Widget {
    Widget::Toggle { id: id.into(), label: label.into(), value }
}
#[must_use]
pub fn checkbox(id: impl Into<String>, label: impl Into<String>, value: bool) -> Widget {
    Widget::Checkbox { id: id.into(), label: label.into(), value }
}
#[must_use]
pub fn slider(id: impl Into<String>, value: i32, max: i32) -> Widget {
    Widget::Slider { id: id.into(), value, max }
}
#[must_use]
pub fn stepper<E: Serialize>(value: i32, on_decrement: E, on_increment: E) -> Widget {
    Widget::Stepper { value, on_decrement: tok(on_decrement), on_increment: tok(on_increment) }
}

/// A bottom-nav tab carrying a typed selection event (label-only).
#[must_use]
pub fn tab<E: Serialize>(label: impl Into<String>, selected: bool, on_select: E) -> Tab {
    Tab { label: label.into(), selected, on_select: tok(on_select), icon: None }
}

/// A bottom-nav tab with a leading icon (icon tab bar).
#[must_use]
pub fn tab_icon<E: Serialize>(label: impl Into<String>, icon: Icon, selected: bool, on_select: E) -> Tab {
    Tab { label: label.into(), selected, on_select: tok(on_select), icon: Some(icon) }
}

/// App shell: top bar + bottom-nav `tabs` + scrollable `body`. `dark_mode` is
/// theme-as-data (the shell themes the whole app from it).
#[must_use]
pub fn scaffold(title: impl Into<String>, dark_mode: bool, tabs: Vec<Tab>, body: Widget) -> Widget {
    let title = title.into();
    // route defaults to the title; root depth = 1.
    Widget::Scaffold { route: title.clone(), title, body: Box::new(body), tabs, back: None, dark_mode, theme: None, fab: None, sheet: None, on_refresh: None, refreshing: false, depth: 1 }
}

/// Like [`scaffold`], but the top bar (and the system back button) navigate back
/// via `back` — e.g. a detail screen pushed over a tab (treated as depth 2).
/// For multi-level stacks, drive navigation with [`Nav`] + [`nav_scaffold`].
#[must_use]
pub fn scaffold_back<E: Serialize>(title: impl Into<String>, dark_mode: bool, tabs: Vec<Tab>, body: Widget, back: E) -> Widget {
    let title = title.into();
    Widget::Scaffold { route: title.clone(), title, body: Box::new(body), tabs, back: Some(tok(back)), dark_mode, theme: None, fab: None, sheet: None, on_refresh: None, refreshing: false, depth: 2 }
}

/// Scaffold driven by a [`Nav`] stack: fills `route` (from the current route's
/// serialization) and `depth` (stack depth) so the shell animates transitions,
/// and shows a back affordance (top-bar arrow + system back button) firing
/// `on_back` whenever the stack can pop.
#[must_use]
pub fn nav_scaffold<R, E>(
    title: impl Into<String>,
    dark_mode: bool,
    tabs: Vec<Tab>,
    body: Widget,
    nav: &Nav<R>,
    on_back: E,
) -> Widget
where
    R: Clone + Serialize,
    E: Serialize,
{
    Widget::Scaffold {
        title: title.into(),
        body: Box::new(body),
        tabs,
        back: if nav.can_go_back() { Some(tok(on_back)) } else { None },
        dark_mode,
        theme: None,
        fab: None,
        sheet: None,
        on_refresh: None,
        refreshing: false,
        route: nav.route_key(),
        depth: nav.depth(),
    }
}

/// Apply a [`Theme`] to a scaffold (brand color, corner, density, font). No-op on any
/// other widget. Lets an app brand its UI without new scaffold builder overloads:
/// `with_theme(nav_scaffold(...), Theme { seed, ..Default::default() })`.
pub fn with_theme(widget: Widget, theme: Theme) -> Widget {
    match widget {
        Widget::Scaffold { title, body, tabs, back, dark_mode, fab, sheet, on_refresh, refreshing, route, depth, .. } => Widget::Scaffold {
            title,
            body,
            tabs,
            back,
            dark_mode,
            theme: Some(theme),
            fab,
            sheet,
            on_refresh,
            refreshing,
            route,
            depth,
        },
        other => other,
    }
}

/// Anchor a floating action button over a scaffold's body (the raised primary action).
/// No-op on any other widget: `with_fab(scaffold(...), Icon::Add, Msg::New)`.
pub fn with_fab<E: Serialize>(widget: Widget, icon: Icon, on_press: E) -> Widget {
    match widget {
        Widget::Scaffold { title, body, tabs, back, dark_mode, theme, sheet, on_refresh, refreshing, route, depth, .. } => Widget::Scaffold {
            title,
            body,
            tabs,
            back,
            dark_mode,
            theme,
            fab: Some(Fab { icon, on_press: tok(on_press) }),
            sheet,
            on_refresh,
            refreshing,
            route,
            depth,
        },
        other => other,
    }
}

/// Open a modal bottom sheet over a scaffold's body. No-op on any other widget — drive it from
/// the model: `with_sheet(scaffold(...), title, sheet_body, Msg::CloseSheet)`.
pub fn with_sheet<E: Serialize>(widget: Widget, title: impl Into<String>, child: Widget, on_dismiss: E) -> Widget {
    match widget {
        Widget::Scaffold { title: t, body, tabs, back, dark_mode, theme, fab, on_refresh, refreshing, route, depth, .. } => Widget::Scaffold {
            title: t,
            body,
            tabs,
            back,
            dark_mode,
            theme,
            fab,
            sheet: Some(Sheet { title: title.into(), child: Box::new(child), on_dismiss: tok(on_dismiss) }),
            on_refresh,
            refreshing,
            route,
            depth,
        },
        other => other,
    }
}

/// Enable pull-to-refresh on a scaffold's body: the body becomes pull-refreshable and fires
/// `on_refresh` on pull. `refreshing` is app-owned — set it true when the pull fires and clear it
/// when the async reload completes (the shell shows a spinner while true). No-op on other widgets.
pub fn with_refresh<E: Serialize>(widget: Widget, refreshing: bool, on_refresh: E) -> Widget {
    match widget {
        Widget::Scaffold { title, body, tabs, back, dark_mode, theme, fab, sheet, route, depth, .. } => Widget::Scaffold {
            title,
            body,
            tabs,
            back,
            dark_mode,
            theme,
            fab,
            sheet,
            on_refresh: Some(tok(on_refresh)),
            refreshing,
            route,
            depth,
        },
        other => other,
    }
}

#[cfg(test)]
mod tests {
    use super::*;
    use serde::Serialize;

    #[derive(Clone, Copy, Serialize, PartialEq, Debug)]
    enum Route {
        Home,
        Detail(u32),
    }

    #[derive(Serialize)]
    enum Ev {
        Tap,
        Open(u32),
    }

    // ---- Nav ----

    #[test]
    fn nav_push_pop_depth() {
        let mut nav = Nav::new(Route::Home);
        assert_eq!(nav.depth(), 1);
        assert!(!nav.can_go_back());

        nav.push(Route::Detail(7));
        assert_eq!(nav.depth(), 2);
        assert!(nav.can_go_back());
        assert!(matches!(nav.current(), Route::Detail(7)));

        nav.pop();
        assert_eq!(nav.depth(), 1);
        assert!(matches!(nav.current(), Route::Home));

        nav.pop(); // no-op at the root
        assert_eq!(nav.depth(), 1);
    }

    #[test]
    fn nav_reset_replaces_stack() {
        let mut nav = Nav::new(Route::Home);
        nav.push(Route::Detail(1));
        nav.push(Route::Detail(2));
        nav.reset(Route::Detail(9));
        assert_eq!(nav.depth(), 1);
        assert!(matches!(nav.current(), Route::Detail(9)));
    }

    #[test]
    fn nav_route_key_is_serialization() {
        let nav = Nav::new(Route::Detail(3));
        assert_eq!(nav.route_key(), serde_json::to_string(&Route::Detail(3)).unwrap());
    }

    // ---- builders ----

    #[test]
    fn scaffold_sets_route_depth_and_no_back() {
        match scaffold("Home", false, vec![], text("x")) {
            Widget::Scaffold { route, depth, back, dark_mode, .. } => {
                assert_eq!(route, "Home");
                assert_eq!(depth, 1);
                assert!(back.is_none());
                assert!(!dark_mode);
            }
            other => panic!("expected Scaffold, got {other:?}"),
        }
    }

    #[test]
    fn scaffold_back_is_depth_2_with_back() {
        match scaffold_back("Detail", true, vec![], text("x"), Ev::Tap) {
            Widget::Scaffold { depth, back, dark_mode, .. } => {
                assert_eq!(depth, 2);
                assert_eq!(back, Some(serde_json::to_string(&Ev::Tap).unwrap()));
                assert!(dark_mode);
            }
            other => panic!("expected Scaffold, got {other:?}"),
        }
    }

    #[test]
    fn nav_scaffold_shows_back_only_when_poppable() {
        let mut nav = Nav::new(Route::Home);
        // at the root: no back, depth 1, route = serialized current route
        match nav_scaffold("T", false, vec![], text("x"), &nav, Ev::Tap) {
            Widget::Scaffold { back, depth, route, .. } => {
                assert!(back.is_none());
                assert_eq!(depth, 1);
                assert_eq!(route, serde_json::to_string(&Route::Home).unwrap());
            }
            other => panic!("expected Scaffold, got {other:?}"),
        }
        // after a push: back present, depth 2
        nav.push(Route::Detail(2));
        match nav_scaffold("T", false, vec![], text("x"), &nav, Ev::Tap) {
            Widget::Scaffold { back, depth, .. } => {
                assert_eq!(back, Some(serde_json::to_string(&Ev::Tap).unwrap()));
                assert_eq!(depth, 2);
            }
            other => panic!("expected Scaffold, got {other:?}"),
        }
    }

    #[test]
    fn buttons_carry_serialized_event_tokens() {
        match button("Go", ButtonStyle::Filled, Ev::Open(5)) {
            Widget::Button { label, on_press, .. } => {
                assert_eq!(label, "Go");
                assert_eq!(on_press, serde_json::to_string(&Ev::Open(5)).unwrap());
            }
            other => panic!("expected Button, got {other:?}"),
        }
        match card_button(text("c"), CardStyle::Elevated, Ev::Tap) {
            Widget::Card { on_press, .. } => {
                assert_eq!(on_press, Some(serde_json::to_string(&Ev::Tap).unwrap()));
            }
            other => panic!("expected Card, got {other:?}"),
        }
        // a plain card is not tappable
        match card(text("c"), CardStyle::Elevated) {
            Widget::Card { on_press, .. } => assert!(on_press.is_none()),
            other => panic!("expected Card, got {other:?}"),
        }
    }

    // ---- Cx capabilities ----

    #[test]
    fn cx_notify_and_save_enqueue_notifications() {
        let mut cx = Cx::<Ev>::default();
        cx.notify("toast", "show", "hi");
        cx.save("blob");
        assert_eq!(cx.notifications.len(), 2);
        assert_eq!(cx.notifications[0], PluginNotify { plugin: "toast".into(), op: "show".into(), input: "hi".into() });
        assert_eq!(cx.notifications[1], PluginNotify { plugin: "storage".into(), op: "save".into(), input: "blob".into() });
        assert!(cx.requests.is_empty());
    }

    #[test]
    fn cx_http_helpers_build_requests() {
        let mut cx = Cx::<Ev>::default();
        cx.get("http://h/x", |_| Ev::Tap);
        cx.post("http://h/y", "hello", |_| Ev::Tap);
        cx.patch("http://h/z", "patch", |_| Ev::Tap);
        cx.delete("http://h/d", |_| Ev::Tap);

        let methods: Vec<&str> = cx.requests.iter().map(|(c, _)| c.op.as_str()).collect();
        assert_eq!(methods, ["GET", "POST", "PATCH", "DELETE"]);
        assert!(cx.requests.iter().all(|(c, _)| c.plugin == "http"));

        let get_input: serde_json::Value = serde_json::from_str(&cx.requests[0].0.input).unwrap();
        assert_eq!(get_input["url"], "http://h/x");
        assert!(get_input["body"].is_null());

        let post_input: serde_json::Value = serde_json::from_str(&cx.requests[1].0.input).unwrap();
        assert_eq!(post_input["url"], "http://h/y");
        assert_eq!(post_input["body"], "hello");
    }

    #[test]
    fn cx_pick_and_capture_photo_request_the_right_plugin() {
        let mut cx = Cx::<Ev>::default();
        cx.pick_photo(|_| Ev::Tap);
        cx.capture_photo(|_| Ev::Tap);
        assert_eq!(cx.requests.len(), 2);
        // photo picker = `photo`/`pick`; camera capture = `camera`/`capture`. Both
        // carry empty input (the shell needs no parameters to launch picker/camera).
        assert_eq!((cx.requests[0].0.plugin.as_str(), cx.requests[0].0.op.as_str(), cx.requests[0].0.input.as_str()), ("photo", "pick", ""));
        assert_eq!((cx.requests[1].0.plugin.as_str(), cx.requests[1].0.op.as_str(), cx.requests[1].0.input.as_str()), ("camera", "capture", ""));
    }

    #[test]
    fn cx_capture_photo_routes_success_and_cancel() {
        // Happy path: ok=true delivers the URI to the success branch.
        let mut cx = Cx::<Ev>::default();
        cx.capture_photo(|r| if r.ok { Ev::Open(7) } else { Ev::Tap });
        let (_, then) = cx.requests.pop().unwrap();
        assert!(matches!(then(PluginResponse { ok: true, output: "file:///tmp/shot.jpg".into() }), Ev::Open(7)));

        // Sad path: ok=false (user cancelled / permission denied) takes the else branch.
        let mut cx = Cx::<Ev>::default();
        cx.capture_photo(|r| if r.ok { Ev::Open(7) } else { Ev::Tap });
        let (_, then) = cx.requests.pop().unwrap();
        assert!(matches!(then(PluginResponse { ok: false, output: String::new() }), Ev::Tap));
    }

    #[test]
    fn cx_notify_capabilities_map_to_the_right_plugin_and_op() {
        let mut cx = Cx::<Ev>::default();
        cx.copy("c");
        cx.share("s");
        cx.open_url("u");
        cx.toast("t");
        cx.haptic("heavy");
        let got: Vec<(&str, &str, &str)> = cx
            .notifications
            .iter()
            .map(|n| (n.plugin.as_str(), n.op.as_str(), n.input.as_str()))
            .collect();
        assert_eq!(
            got,
            vec![
                ("clipboard", "copy", "c"),
                ("share", "text", "s"),
                ("browser", "open", "u"),
                ("toast", "show", "t"),
                ("haptics", "heavy", ""), // haptic style is the op, input empty
            ]
        );
        assert!(cx.requests.is_empty());
    }

    #[test]
    fn cx_device_model_is_a_request_not_a_notification() {
        let mut cx = Cx::<Ev>::default();
        cx.device_model(|_| Ev::Tap);
        assert!(cx.notifications.is_empty());
        assert_eq!(cx.requests.len(), 1);
        let (call, _) = &cx.requests[0];
        assert_eq!((call.plugin.as_str(), call.op.as_str(), call.input.as_str()), ("device", "model", ""));
    }

    #[test]
    fn cx_device_locale_requests_the_device_locale_op() {
        let mut cx = Cx::<Ev>::default();
        cx.device_locale(|_| Ev::Tap);
        assert!(cx.notifications.is_empty());
        assert_eq!(cx.requests.len(), 1);
        let (call, _) = &cx.requests[0];
        assert_eq!((call.plugin.as_str(), call.op.as_str(), call.input.as_str()), ("device", "locale", ""));
    }

    #[test]
    fn cx_confirm_serializes_title_message_and_routes_ok() {
        let mut cx = Cx::<Ev>::default();
        cx.confirm("Delete?", "This cannot be undone.", |r| if r.ok { Ev::Tap } else { Ev::Open(0) });
        let (call, then) = cx.requests.pop().unwrap();
        assert_eq!((call.plugin.as_str(), call.op.as_str()), ("dialog", "confirm"));
        let v: serde_json::Value = serde_json::from_str(&call.input).unwrap();
        assert_eq!(v["title"], "Delete?");
        assert_eq!(v["message"], "This cannot be undone.");
        // ok=true → confirmed branch; ok=false would take the else branch.
        assert!(matches!(then(PluginResponse { ok: true, output: "ok".into() }), Ev::Tap));
    }

    // ---- widget builders ----

    #[test]
    fn text_builders_carry_their_style() {
        assert!(matches!(text("b"), Widget::Text { style: TextStyle::Body, .. }));
        assert!(matches!(title("t"), Widget::Text { style: TextStyle::Title, .. }));
        assert!(matches!(subtitle("s"), Widget::Text { style: TextStyle::Subtitle, .. }));
        assert!(matches!(caption("c"), Widget::Text { style: TextStyle::Caption, .. }));
        assert!(matches!(emphasis("e"), Widget::Text { style: TextStyle::Emphasis, .. }));
    }

    #[test]
    fn layout_and_content_builders_produce_their_variants() {
        assert!(matches!(row(vec![text("a")]), Widget::Row { children } if children.len() == 1));
        assert!(matches!(column(vec![]), Widget::Column { children } if children.is_empty()));
        assert!(matches!(grid(vec![text("a"), text("b")]), Widget::Grid { children } if children.len() == 2));
        assert!(matches!(divider(), Widget::Divider));
        assert!(matches!(bar_chart(vec![1.0, 2.0], vec![]), Widget::Chart { style: ChartStyle::Bar, series, .. } if series[0].values.len() == 2));
        assert!(matches!(line_chart(vec![1.0], vec![]), Widget::Chart { style: ChartStyle::Line, .. }));
        assert!(matches!(donut_chart(vec![ChartSeries::new("a", vec![1.0])]), Widget::Chart { style: ChartStyle::Donut, legend: true, .. }));
        assert!(matches!(gauge_chart(ChartSeries::new("g", vec![3.0]).with_goal(5.0)), Widget::Chart { style: ChartStyle::Gauge, series, .. } if series[0].goal == Some(5.0)));
        let rc = with_bracket(
            region_chart(
                vec![ChartRegion::new(0.0, 3.0, 0.0, 80.0, "80%").vertical()],
                vec![ChartTick::new(3.0, "3 Mt.")],
                65.0, 80.0,
                vec![ChartRefLine::target(80.0, "CHF 80'000"), ChartRefLine::max(90.0, "CHF 90'000")],
                vec![ChartLegendItem::new("Gap", Rgb::new(0x5A, 0x7D, 0x9A))],
            ),
            ChartBracket::new(60.0, 80.0, "Ceiling").with_info(),
        );
        assert!(matches!(rc, Widget::RegionChart { bracket: Some(b), regions, ref_lines, .. } if regions[0].vertical && ref_lines[1].dashed && b.info));
        // June 2026 has 30 days and starts on a Monday (weekday 1).
        assert!(matches!(
            calendar(2026, 6, Some(3), |d| Ev::Open(u32::from(d))),
            Widget::Calendar { first_weekday: 1, selected: Some(3), on_day, .. } if on_day.len() == 30
        ));
        assert!(matches!(
            swipe_action(text("row"), vec![("Delete", Tone::Danger, Ev::Tap)]),
            Widget::SwipeAction { actions, .. } if actions.len() == 1
        ));
        assert!(matches!(spacer(Spacing::Lg), Widget::Spacer { .. }));
        assert!(matches!(image("u", ImageShape::Circle, ImageRatio::Square), Widget::Image { .. }));
        assert!(matches!(badge("new", Tone::Success), Widget::Badge { .. }));
        assert!(matches!(color_dot(ProjectColor::Teal), Widget::ColorDot { .. }));
        assert!(matches!(card(text("x"), CardStyle::Filled), Widget::Card { on_press: None, .. }));
        // a scrim z-stack keeps its align + scrim flag
        assert!(matches!(stack(BoxAlign::Center, true, vec![]), Widget::Box { scrim: true, .. }));
    }

    #[test]
    fn input_builders_carry_ids_values_and_event_tokens() {
        assert!(matches!(text_field("id", "ph", "v"), Widget::TextField { kind: FieldKind::Text, error: None, .. }));
        assert!(matches!(secure_field("pw", "Password", ""), Widget::TextField { kind: FieldKind::Secure, .. }));
        assert!(matches!(email_field("e", "", ""), Widget::TextField { kind: FieldKind::Email, .. }));
        assert!(matches!(multiline_field("note", "", ""), Widget::TextField { kind: FieldKind::Multiline, .. }));
        assert!(matches!(with_error(email_field("e", "", "x"), "Invalid"), Widget::TextField { error: Some(m), kind: FieldKind::Email, .. } if m == "Invalid"));
        assert!(matches!(with_error(divider(), "ignored"), Widget::Divider));
        assert!(matches!(toggle("t", "l", true), Widget::Toggle { value: true, .. }));
        assert!(matches!(checkbox("c", "l", false), Widget::Checkbox { value: false, .. }));
        assert!(matches!(slider("s", 3, 10), Widget::Slider { value: 3, max: 10, .. }));

        match chip("Latte", true, Ev::Open(2)) {
            Widget::Chip { selected, on_press, .. } => {
                assert!(selected);
                assert_eq!(on_press, serde_json::to_string(&Ev::Open(2)).unwrap());
            }
            other => panic!("expected Chip, got {other:?}"),
        }
        match stepper(5, Ev::Tap, Ev::Open(1)) {
            Widget::Stepper { value, on_decrement, on_increment } => {
                assert_eq!(value, 5);
                assert_eq!(on_decrement, serde_json::to_string(&Ev::Tap).unwrap());
                assert_eq!(on_increment, serde_json::to_string(&Ev::Open(1)).unwrap());
            }
            other => panic!("expected Stepper, got {other:?}"),
        }
        let t = tab("Home", true, Ev::Tap);
        assert_eq!(t.label, "Home");
        assert!(t.selected);
        assert_eq!(t.on_select, serde_json::to_string(&Ev::Tap).unwrap());
    }

    // ---- ABI serialization round-trips (structural stability of the wire types) ----

    #[test]
    fn widget_tree_round_trips_through_serde() {
        let tree = scaffold(
            "Home",
            true,
            vec![tab("A", true, Ev::Tap)],
            column(vec![
                title("Hi"),
                row(vec![button("Go", ButtonStyle::Filled, Ev::Open(3)), chip("x", false, Ev::Tap)]),
                image("u", ImageShape::Rounded, ImageRatio::Wide),
                slider("s", 2, 5),
            ]),
        );
        let s = serde_json::to_string(&tree).unwrap();
        let back: Widget = serde_json::from_str(&s).unwrap();
        assert_eq!(s, serde_json::to_string(&back).unwrap());
    }

    #[test]
    fn actions_and_input_values_round_trip() {
        let actions = vec![
            Action::Fired { token: serde_json::to_string(&Ev::Open(1)).unwrap() },
            Action::Input { id: "n".into(), value: InputValue::Int(7) },
            Action::Input { id: "n".into(), value: InputValue::Text("hi".into()) },
            Action::Input { id: "n".into(), value: InputValue::Bool(true) },
            Action::Restore { data: "blob".into() },
            Action::Start,
        ];
        for a in actions {
            let s = serde_json::to_string(&a).unwrap();
            let back: Action = serde_json::from_str(&s).unwrap();
            assert_eq!(s, serde_json::to_string(&back).unwrap());
        }
    }

    // ---- MobilerShell: the fixed-ABI action dispatch ----

    #[derive(Default)]
    struct CounterModel {
        count: i32,
        restored: String,
        started: bool,
        last_input: String,
    }

    #[derive(serde::Serialize, serde::Deserialize)]
    enum CounterEv {
        Inc,
        Add(i32),
    }

    #[derive(Default)]
    struct CounterApp;

    impl MobilerApp for CounterApp {
        type Event = CounterEv;
        type Model = CounterModel;
        fn update(&self, ev: CounterEv, model: &mut CounterModel, _cx: &mut Cx<CounterEv>) {
            match ev {
                CounterEv::Inc => model.count += 1,
                CounterEv::Add(n) => model.count += n,
            }
        }
        fn input(&self, id: &str, value: InputValue, model: &mut CounterModel, _cx: &mut Cx<CounterEv>) {
            if let InputValue::Text(t) = value {
                model.last_input = format!("{id}={t}");
            }
        }
        fn restore(&self, data: &str, model: &mut CounterModel) {
            model.restored = data.to_string();
        }
        fn init(&self, model: &mut CounterModel, _cx: &mut Cx<CounterEv>) {
            model.started = true;
        }
        fn view(&self, model: &CounterModel) -> Widget {
            text(format!("{}", model.count))
        }
    }

    #[test]
    fn shell_dispatches_fired_input_restore_and_start() {
        use crux_core::App as _;
        let shell = MobilerShell::<CounterApp>::default();
        let mut m = CounterModel::default();

        // Fired with a valid token → the typed event reaches app.update.
        let _ = shell.update(Action::Fired { token: serde_json::to_string(&CounterEv::Add(5)).unwrap() }, &mut m);
        assert_eq!(m.count, 5);
        // Input → app.input.
        let _ = shell.update(Action::Input { id: "name".into(), value: InputValue::Text("bob".into()) }, &mut m);
        assert_eq!(m.last_input, "name=bob");
        // Restore → app.restore.
        let _ = shell.update(Action::Restore { data: "saved".into() }, &mut m);
        assert_eq!(m.restored, "saved");
        // Start → app.init.
        let _ = shell.update(Action::Start, &mut m);
        assert!(m.started);
        // view renders the (mutated) model through the ABI.
        assert!(matches!(shell.view(&m), Widget::Text { .. }));
    }

    #[test]
    fn shell_ignores_a_malformed_fired_token() {
        use crux_core::App as _;
        let shell = MobilerShell::<CounterApp>::default();
        let mut m = CounterModel::default();
        // A token that doesn't deserialize to the app's event type is dropped — no
        // panic, model untouched (the `if let Ok(event)` guard in MobilerShell::update).
        let _ = shell.update(Action::Fired { token: "not a valid token".into() }, &mut m);
        assert_eq!(m.count, 0);
    }
}