One Rust core. Native everywhere.

use undra::prelude::*;

/// One item of the to-do list.
#[undra::api]
pub struct Todo {
    pub id: Uuid,
    pub title: String,
    pub done: bool,
}

/// Why an item could not be added.
#[undra::error]
pub enum TodoError {
    #[error("the title cannot be empty")]
    EmptyTitle,
}

/// The to-do list: what every UI observes and calls.
#[undra::store]
pub struct Todos {
    #[undra(key = "id")]
    todos: Signal<Vec<Todo>>,
    filter: Signal<Filter>,
    #[undra(key = "id")]
    visible: DerivedList<Todo>,
    remaining: Computed<u32>,
}

#[undra::api(store)]
impl Todos {
    pub async fn add(&self, title: String) -> Result<Todo, TodoError> { /* … */ }
    pub fn set_filter(&self, filter: Filter) { /* … */ }
}

// SwiftUI: Todos is @Observable. Reading a signal is a plain property read.
struct TodosScreen: View {
    let todos: Todos            // try Todos() after UndraPlaygroundCore.load()
    @State private var draft = ""
    @State private var problem: String?

    var body: some View {
        List {
            ForEach(todos.visible, id: \.id) { todo in
                Button { todos.toggle(id: todo.id) } label: {
                    Label(todo.title, systemImage: todo.done ? "checkmark.circle.fill" : "circle")
                }
            }
        }
        .toolbar {
            ToolbarItem(placement: .principal) { Text("\(todos.remaining) left") }
        }
    }

    private func add() {
        Task {
            do { _ = try await todos.add(title: draft); draft = "" }
            catch { problem = error.localizedDescription }   // TodoError, CancellationError or UndraCallError
        }
    }
}

// Compose: signals are StateFlows.
@Composable
fun TodosScreen(vm: TodosViewModel = viewModel()) {
    val store = vm.store
    val visible by store.visible.collectAsState()
    val remaining by store.remaining.collectAsState()

    Column {
        Text("$remaining left")
        LazyColumn {
            // keyed by id in the core, so Compose moves rows instead of redrawing them
            items(visible, key = { it.id }) { todo ->
                TodoRow(todo, onToggle = { store.toggle(todo.id) })
            }
        }
    }
}

// in the ViewModel
viewModelScope.launch {
    try { store.add(draft) }
    catch (e: TodoError) { /* TodoError.EmptyTitle */ }
}

// React and React Native: hooks from @undra/runtime/react (vue, svelte and solid adapters ship too).
import { useUndra, useSignal } from "@undra/runtime/react";
import { Todos, TodoError } from "@playground/core";

export function TodosView() {
  const store = useUndra(Todos);            // undefined until it exists
  const todos = useSignal(store?.visible);
  const remaining = useSignal(store?.remaining);

  async function add(title: string) {
    try {
      await store?.add(title);
    } catch (error) {
      if (error instanceof TodoError) { /* a typed error, not a string to parse */ }
    }
  }
  /* … render todos, `${remaining} left` … */
}

/// The items of a server list, cached per list, fresh for 30 s, persisted.
#[undra::query(key = "remote-todos:{list}", stale = "30s", persist, retry = 1)]
pub async fn remote_todos(ctx: &Ctx, list: String) -> Result<Vec<RemoteTodo>, RemoteError> {
    let url = endpoint(ctx, &format!("/lists/{list}/todos"))?;
    parse(&send(ctx, HttpRequest::get(url)).await?)
}

/// Shows the item at once; takes it back if the server refuses.
#[undra::api]
pub async fn create_remote_todo(ctx: &Ctx, list: String, title: String) -> Result<RemoteTodo, RemoteError> {
    // …build `placeholder`…
    ctx.mutate::<PostRemoteTodoMutation>((list, title))
        .optimistic(move |cache| {
            cache.update::<RemoteTodosQuery>((cached,), |items| items.push(placeholder));
        })
        .await
}