Extract routes to getRoutes() function

Address review feedback to eliminate duplicated route configuration
and prevent potential inconsistencies.

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>

examples/auth/main.go

@@ -0,0 +1,418 @@
+//go:build js && wasm
+
+// Package main demonstrates OIDC authentication with Iris.
+//
+// This example shows:
+//   - OIDC client setup
+//   - Login/logout flow
+//   - Protected routes with auth guard
+//   - Displaying user info
+//   - Token handling
+package main
+
+import (
+	"encoding/base64"
+	"encoding/json"
+	"strings"
+	"syscall/js"
+
+	"git.flowmade.one/flowmade-one/iris/auth"
+	"git.flowmade.one/flowmade-one/iris/navigation"
+	"git.flowmade.one/flowmade-one/iris/reactive"
+	"git.flowmade.one/flowmade-one/iris/ui"
+)
+
+// Configuration - in production, these would come from environment/config
+const (
+	// OIDC provider configuration
+	// Update these values for your OIDC provider (e.g., Dex, Keycloak, Auth0)
+	OIDCIssuer  = "https://dex.example.com"
+	ClientID    = "iris-example-app"
+	RedirectURI = "http://localhost:8080/callback"
+)
+
+var (
+	// Global OIDC client
+	oidcClient *auth.OIDCClient
+
+	// Reactive state for authentication
+	isAuthenticated = reactive.NewSignal(false)
+	currentUser     = reactive.NewSignal[*UserDisplay](nil)
+	authError       = reactive.NewSignal("")
+	isLoading       = reactive.NewSignal(false)
+
+	// Font presets
+	fontTitle   = ui.NewFont().Size("32px").Weight("700")
+	fontHeading = ui.NewFont().Size("20px").Weight("600")
+)
+
+// UserDisplay holds user information for display
+type UserDisplay struct {
+	Email string
+	Name  string
+	Sub   string
+}
+
+func main() {
+	// Initialize OIDC client
+	oidcClient = auth.NewOIDCClient(OIDCIssuer, ClientID, RedirectURI)
+
+	// Check for existing tokens on startup
+	checkExistingSession()
+
+	// Check if this is an OAuth callback
+	if isCallbackPath() {
+		handleOAuthCallback()
+		return
+	}
+	router := navigation.NewRouter(getRoutes())
+	router.SetNotFoundHandler(notFoundView)
+	navigation.SetGlobalRouter(router)
+
+	// Create the main app with router
+	ui.NewAppWithRouter(router)
+
+	// Keep the application running
+	select {}
+}
+
+// getRoutes returns the route configuration for the application
+func getRoutes() []navigation.Route {
+	return []navigation.Route{
+		{
+			Path:    "/",
+			Handler: homeView,
+		},
+		{
+			Path:    "/callback",
+			Handler: callbackView,
+		},
+		{
+			Path:    "/profile",
+			Handler: profileView,
+			Guards:  []navigation.RouteGuard{authGuard()},
+		},
+		{
+			Path:    "/protected",
+			Handler: protectedView,
+			Guards:  []navigation.RouteGuard{authGuard()},
+		},
+	}
+}
+
+// checkExistingSession checks for existing valid tokens
+func checkExistingSession() {
+	if oidcClient.IsAuthenticated() {
+		isAuthenticated.Set(true)
+		loadUserFromToken()
+	}
+}
+
+// isCallbackPath checks if current path is the OAuth callback
+func isCallbackPath() bool {
+	pathname := js.Global().Get("window").Get("location").Get("pathname").String()
+	search := js.Global().Get("window").Get("location").Get("search").String()
+	return pathname == "/callback" && strings.Contains(search, "code=")
+}
+
+// handleOAuthCallback processes the OAuth callback
+func handleOAuthCallback() {
+	isLoading.Set(true)
+
+	// Discover OIDC configuration and handle callback
+	oidcClient.DiscoverConfigAsync(OIDCIssuer, func(err error) {
+		if err != nil {
+			authError.Set("Failed to load OIDC configuration: " + err.Error())
+			isLoading.Set(false)
+			renderApp()
+			return
+		}
+
+		// Exchange code for tokens
+		tokens, err := oidcClient.HandleCallback(OIDCIssuer)
+		if err != nil {
+			authError.Set("Authentication failed: " + err.Error())
+			isLoading.Set(false)
+			renderApp()
+			return
+		}
+
+		// Store tokens
+		oidcClient.StoreTokens(tokens)
+		isAuthenticated.Set(true)
+		loadUserFromToken()
+		isLoading.Set(false)
+
+		// Clear URL parameters and redirect to home
+		js.Global().Get("window").Get("history").Call("replaceState", nil, "", "/")
+		renderApp()
+	})
+}
+
+// renderApp initializes and renders the app after callback processing
+func renderApp() {
+	router := navigation.NewRouter(getRoutes())
+	router.SetNotFoundHandler(notFoundView)
+	navigation.SetGlobalRouter(router)
+
+	ui.NewAppWithRouter(router)
+
+	select {}
+}
+
+// loadUserFromToken extracts user info from the ID token
+func loadUserFromToken() {
+	tokens := oidcClient.GetStoredTokens()
+	if tokens == nil || tokens.IDToken == "" {
+		return
+	}
+
+	// Parse the ID token to get user info (JWT payload is the second part)
+	parts := strings.Split(tokens.IDToken, ".")
+	if len(parts) != 3 {
+		return
+	}
+
+	// Decode the payload
+	payload, err := base64.RawURLEncoding.DecodeString(parts[1])
+	if err != nil {
+		return
+	}
+
+	var claims struct {
+		Sub   string `json:"sub"`
+		Email string `json:"email"`
+		Name  string `json:"name"`
+	}
+	if err := json.Unmarshal(payload, &claims); err != nil {
+		return
+	}
+
+	currentUser.Set(&UserDisplay{
+		Email: claims.Email,
+		Name:  claims.Name,
+		Sub:   claims.Sub,
+	})
+}
+
+// authGuard creates a route guard that checks authentication
+func authGuard() navigation.RouteGuard {
+	return navigation.AuthGuard(func() bool {
+		return isAuthenticated.Get()
+	})
+}
+
+// login initiates the OIDC login flow
+func login() {
+	isLoading.Set(true)
+	authError.Set("")
+
+	oidcClient.DiscoverConfigAsync(OIDCIssuer, func(err error) {
+		if err != nil {
+			authError.Set("Failed to connect to authentication provider: " + err.Error())
+			isLoading.Set(false)
+			return
+		}
+
+		if err := oidcClient.StartAuthFlow(); err != nil {
+			authError.Set("Failed to start login: " + err.Error())
+			isLoading.Set(false)
+		}
+		// Note: If successful, the browser will redirect to the OIDC provider
+	})
+}
+
+// logout clears authentication state
+func logout() {
+	oidcClient.Logout()
+	isAuthenticated.Set(false)
+	currentUser.Set(nil)
+	navigation.Navigate("/")
+}
+
+// View functions
+
+func homeView(params map[string]string) ui.View {
+	return ui.VerticalGroup(
+		header(),
+		ui.VerticalGroup(
+			ui.TextFromString("Iris Auth Example").
+				Font(fontTitle).
+				Margin("20px 0"),
+			ui.TextFromString("This example demonstrates OIDC authentication with protected routes.").
+				Color("#666"),
+			ui.TextFromFunction(func() string {
+				if authError.Get() != "" {
+					return "Error: " + authError.Get()
+				}
+				return ""
+			}).Color("#ff4444"),
+			authSection(),
+		).Padding("20px").MaxWidth("800px"),
+	).Gap("0")
+}
+
+func header() ui.View {
+	return ui.HorizontalGroup(
+		ui.TextFromString("Auth Example").Font(fontHeading),
+		navigation.Link("/", ui.TextFromString("Home")),
+		navigation.Link("/profile", ui.TextFromString("Profile")),
+		navigation.Link("/protected", ui.TextFromString("Protected")),
+		ui.Spacer(),
+		authButton(),
+	).Padding("16px 24px").Background("#f5f5f5").BorderBottom("1px solid #ddd")
+}
+
+func authSection() ui.View {
+	return ui.VerticalGroup(
+		ui.TextFromFunction(func() string {
+			if isLoading.Get() {
+				return "Loading..."
+			}
+			if isAuthenticated.Get() {
+				user := currentUser.Get()
+				if user != nil {
+					return "Welcome, " + user.Name + "!"
+				}
+				return "You are logged in."
+			}
+			return "You are not logged in."
+		}).Margin("20px 0"),
+
+		ui.TextFromFunction(func() string {
+			if isAuthenticated.Get() {
+				return "Navigate to Profile or Protected pages to see authenticated content."
+			}
+			return "Click Login to authenticate with your OIDC provider."
+		}).Color("#666"),
+	).Padding("20px").Background("#fafafa").BorderRadius("8px").Margin("20px 0")
+}
+
+func authButton() ui.View {
+	return ui.Button(func() {
+		if isAuthenticated.Get() {
+			logout()
+		} else {
+			login()
+		}
+	}, ui.TextFromFunction(func() string {
+		if isLoading.Get() {
+			return "Loading..."
+		}
+		if isAuthenticated.Get() {
+			return "Logout"
+		}
+		return "Login"
+	})).Padding("8px 16px").Background("#007bff").Foreground("#fff").
+		Border("none").BorderRadius("4px").Cursor("pointer")
+}
+
+func callbackView(params map[string]string) ui.View {
+	return ui.VerticalGroup(
+		header(),
+		ui.VerticalGroup(
+			ui.TextFromString("Processing login...").Font(fontHeading),
+			ui.TextFromString("Please wait while we complete authentication.").Color("#666"),
+		).Padding("40px"),
+	).Gap("0")
+}
+
+func profileView(params map[string]string) ui.View {
+	return ui.VerticalGroup(
+		header(),
+		ui.VerticalGroup(
+			ui.TextFromString("User Profile").Font(fontTitle).Margin("20px 0"),
+			userInfoCard(),
+			tokenInfoCard(),
+		).Padding("20px").MaxWidth("800px"),
+	).Gap("0")
+}
+
+func userInfoCard() ui.View {
+	return ui.VerticalGroup(
+		ui.TextFromString("User Information").Font(fontHeading),
+		ui.TextFromFunction(func() string {
+			user := currentUser.Get()
+			if user == nil {
+				return "No user information available"
+			}
+			return "Name: " + user.Name
+		}),
+		ui.TextFromFunction(func() string {
+			user := currentUser.Get()
+			if user == nil {
+				return ""
+			}
+			return "Email: " + user.Email
+		}),
+		ui.TextFromFunction(func() string {
+			user := currentUser.Get()
+			if user == nil {
+				return ""
+			}
+			return "Subject: " + user.Sub
+		}).Color("#888"),
+	).Padding("20px").Background("#fafafa").BorderRadius("8px").Margin("10px 0").Gap("8px")
+}
+
+func tokenInfoCard() ui.View {
+	return ui.VerticalGroup(
+		ui.TextFromString("Token Information").Font(fontHeading),
+		ui.TextFromFunction(func() string {
+			tokens := oidcClient.GetStoredTokens()
+			if tokens == nil {
+				return "No tokens available"
+			}
+			return "Access Token: " + truncateToken(tokens.AccessToken)
+		}),
+		ui.TextFromFunction(func() string {
+			tokens := oidcClient.GetStoredTokens()
+			if tokens == nil {
+				return ""
+			}
+			return "ID Token: " + truncateToken(tokens.IDToken)
+		}),
+		ui.TextFromFunction(func() string {
+			authHeader := oidcClient.GetAuthHeader()
+			if authHeader == "" {
+				return ""
+			}
+			return "Auth Header: " + truncateToken(authHeader)
+		}).Color("#888"),
+	).Padding("20px").Background("#fafafa").BorderRadius("8px").Margin("10px 0").Gap("8px")
+}
+
+func protectedView(params map[string]string) ui.View {
+	return ui.VerticalGroup(
+		header(),
+		ui.VerticalGroup(
+			ui.TextFromString("Protected Content").Font(fontTitle).Margin("20px 0"),
+			ui.TextFromString("This page is only visible to authenticated users.").Color("#666"),
+			ui.VerticalGroup(
+				ui.TextFromString("Access Granted").Font(fontHeading).Color("#28a745"),
+				ui.TextFromString("You have successfully accessed a protected route."),
+				ui.TextFromString("The auth guard verified your authentication status before allowing access.").Color("#888"),
+			).Padding("20px").Background("#e8f5e9").BorderRadius("8px").Margin("20px 0"),
+		).Padding("20px").MaxWidth("800px"),
+	).Gap("0")
+}
+
+func notFoundView() ui.View {
+	return ui.VerticalGroup(
+		header(),
+		ui.VerticalGroup(
+			ui.TextFromString("404 - Page Not Found").Font(fontTitle).Color("#ff4444"),
+			ui.TextFromString("The requested page could not be found.").Color("#666"),
+			navigation.Link("/", ui.TextFromString("Go to Home").Color("#007bff")),
+		).Padding("40px"),
+	).Gap("0")
+}
+
+// Helper functions
+
+func truncateToken(token string) string {
+	if len(token) <= 20 {
+		return token
+	}
+	return token[:10] + "..." + token[len(token)-10:]
+}

examples/counter/main.go

@@ -0,0 +1,36 @@
+//go:build js && wasm
+
+package main
+
+import (
+	"fmt"
+
+	"git.flowmade.one/flowmade-one/iris/reactive"
+	"git.flowmade.one/flowmade-one/iris/ui"
+)
+
+func main() {
+	// Create a signal with initial value 0
+	count := reactive.NewSignal(0)
+
+	view := ui.NewView()
+
+	// Reactive text that updates when count changes
+	view.Child(ui.TextFromFunction(func() string {
+		return fmt.Sprintf("Count: %d", count.Get())
+	}))
+
+	// Button that increments the count on click
+	view.Child(ui.Button(func() {
+		count.Set(count.Get() + 1)
+	}, ui.TextFromString("Increment")))
+
+	// Button that decrements the count on click
+	view.Child(ui.Button(func() {
+		count.Set(count.Get() - 1)
+	}, ui.TextFromString("Decrement")))
+
+	ui.NewApp(view)
+
+	select {}
+}

examples/dashboard/main.go

@@ -0,0 +1,669 @@
+//go:build js && wasm
+
+// Dashboard example demonstrating a realistic internal tool admin panel.
+// This example showcases:
+// - Multiple pages with routing
+// - Auth-protected sections
+// - Reactive data display
+// - Form inputs
+// - Component composition
+package main
+
+import (
+	"fmt"
+	"strconv"
+
+	"git.flowmade.one/flowmade-one/iris/navigation"
+	"git.flowmade.one/flowmade-one/iris/reactive"
+	"git.flowmade.one/flowmade-one/iris/ui"
+)
+
+// Application state - simulated auth and data
+var (
+	isAuthenticated = reactive.NewSignal(false)
+	currentUser     = reactive.NewSignal("")
+	userRole        = reactive.NewSignal("guest")
+)
+
+// Simulated dashboard metrics
+var (
+	totalUsers   = reactive.NewSignal(1247)
+	activeOrders = reactive.NewSignal(89)
+	revenue      = reactive.NewSignal(45230.50)
+	pendingTasks = reactive.NewSignal(12)
+)
+
+// Simulated user list
+type User struct {
+	ID     int
+	Name   string
+	Email  string
+	Role   string
+	Active bool
+}
+
+var users = reactive.NewSignal([]User{
+	{1, "Alice Johnson", "alice@example.com", "admin", true},
+	{2, "Bob Smith", "bob@example.com", "user", true},
+	{3, "Carol White", "carol@example.com", "user", false},
+	{4, "Dave Brown", "dave@example.com", "moderator", true},
+})
+
+// Settings state
+var (
+	darkMode           = reactive.NewSignal(false)
+	emailNotifications = reactive.NewSignal(true)
+	apiEndpoint        = reactive.NewSignal("https://api.example.com")
+	refreshInterval    = reactive.NewSignal(30)
+)
+
+func main() {
+	// Define routes with guards
+	routes := []navigation.Route{
+		{Path: "/", Handler: func(params map[string]string) ui.View { return homeView() }},
+		{Path: "/login", Handler: func(params map[string]string) ui.View { return loginView() }},
+		{Path: "/users", Handler: func(params map[string]string) ui.View { return usersView() }, Guards: []navigation.RouteGuard{authGuard}},
+		{Path: "/users/:id", Handler: userDetailView, Guards: []navigation.RouteGuard{authGuard}},
+		{Path: "/settings", Handler: func(params map[string]string) ui.View { return settingsView() }, Guards: []navigation.RouteGuard{authGuard}},
+		{Path: "/admin", Handler: func(params map[string]string) ui.View { return adminView() }, Guards: []navigation.RouteGuard{authGuard, adminGuard}},
+	}
+
+	router := navigation.NewRouter(routes)
+	router.SetNotFoundHandler(notFoundView)
+	navigation.SetGlobalRouter(router)
+
+	// Create the main app layout
+	app := dashboardLayout()
+	ui.NewApp(app)
+
+	select {}
+}
+
+// Auth guard - checks if user is authenticated
+func authGuard(route *navigation.Route, params map[string]string) bool {
+	if !isAuthenticated.Get() {
+		navigation.Navigate("/login")
+		return false
+	}
+	return true
+}
+
+// Admin guard - checks if user has admin role
+func adminGuard(route *navigation.Route, params map[string]string) bool {
+	return userRole.Get() == "admin"
+}
+
+// Main dashboard layout with sidebar and content area
+func dashboardLayout() ui.View {
+	sidebar := createSidebar()
+	content := createContentArea()
+
+	return ui.FlexLayout(
+		[]string{"240px", "1fr"},
+		sidebar,
+		content,
+	).MinHeight("100vh")
+}
+
+// Sidebar with navigation links
+func createSidebar() ui.View {
+	return ui.VerticalGroup(
+		// Logo/Brand
+		ui.TextFromString("Iris Dashboard").
+			Font(ui.NewFont().Size("24px").Weight("bold")).
+			Padding("20px").
+			Color("#fff"),
+
+		ui.Divider().Background("#444"),
+
+		// Navigation links
+		navLink("/", "Home"),
+		navLink("/users", "Users"),
+		navLink("/settings", "Settings"),
+		navLink("/admin", "Admin"),
+
+		ui.Spacer(),
+
+		// User info at bottom
+		ui.VerticalGroup(
+			ui.Divider().Background("#444"),
+			ui.TextFromFunction(func() string {
+				if isAuthenticated.Get() {
+					return "Logged in as: " + currentUser.Get()
+				}
+				return "Not logged in"
+			}).Color("#aaa").Padding("10px"),
+			loginLogoutButton(),
+		),
+	).Background("#1a1a2e").Width("240px").MinHeight("100vh").Padding("0")
+}
+
+func navLink(path, label string) ui.View {
+	return navigation.Link(path,
+		ui.TextFromString(label).Color("#ccc"),
+	).Padding("12px 20px").Cursor("pointer")
+}
+
+func loginLogoutButton() ui.View {
+	return ui.Button(func() {
+		if isAuthenticated.Get() {
+			isAuthenticated.Set(false)
+			currentUser.Set("")
+			userRole.Set("guest")
+			navigation.Navigate("/")
+		} else {
+			navigation.Navigate("/login")
+		}
+	}, ui.TextFromFunction(func() string {
+		if isAuthenticated.Get() {
+			return "Logout"
+		}
+		return "Login"
+	}).Color("#fff")).
+		Background("#e94560").
+		Padding("10px 20px").
+		Border("none").
+		BorderRadius("4px").
+		Cursor("pointer").
+		Margin("10px")
+}
+
+// Content area that shows the current route view
+func createContentArea() ui.View {
+	view := ui.NewView()
+
+	reactive.NewEffect(func() {
+		router := navigation.GetGlobalRouter()
+		if router != nil {
+			currentView := router.GetCurrentView()
+			view.Element().Set("innerHTML", "")
+			view.Child(currentView)
+		}
+	})
+
+	return view.Background("#f0f0f0").Padding("20px").Overflow("auto")
+}
+
+// Home view - dashboard overview
+func homeView() ui.View {
+	return ui.VerticalGroup(
+		ui.TextFromString("Dashboard Overview").
+			Font(ui.NewFont().Size("28px").Weight("bold")).
+			Color("#333"),
+
+		// Metrics cards
+		ui.HorizontalGroup(
+			metricCard("Total Users", func() string { return strconv.Itoa(totalUsers.Get()) }, "#4ecca3"),
+			metricCard("Active Orders", func() string { return strconv.Itoa(activeOrders.Get()) }, "#e94560"),
+			metricCard("Revenue", func() string { return fmt.Sprintf("$%.2f", revenue.Get()) }, "#16c79a"),
+			metricCard("Pending Tasks", func() string { return strconv.Itoa(pendingTasks.Get()) }, "#f39c12"),
+		).Gap("20px").Margin("20px 0"),
+
+		// Quick actions
+		ui.TextFromString("Quick Actions").
+			Font(ui.NewFont().Size("20px").Weight("bold")).
+			Color("#333").
+			Margin("20px 0 10px 0"),
+
+		ui.HorizontalGroup(
+			actionButton("Add User", func() { navigation.Navigate("/users") }),
+			actionButton("View Reports", func() { /* simulated action */ }),
+			actionButton("Export Data", func() { /* simulated action */ }),
+		).Gap("10px"),
+
+		// Recent activity (simulated)
+		ui.TextFromString("Recent Activity").
+			Font(ui.NewFont().Size("20px").Weight("bold")).
+			Color("#333").
+			Margin("30px 0 10px 0"),
+
+		activityItem("User Alice updated profile", "2 minutes ago"),
+		activityItem("New order #1234 received", "15 minutes ago"),
+		activityItem("System backup completed", "1 hour ago"),
+	).AlignLeft().Gap("5px")
+}
+
+func metricCard(title string, valueFn func() string, color string) ui.View {
+	return ui.VerticalGroup(
+		ui.TextFromString(title).Color("#666").Font(ui.NewFont().Size("14px")),
+		ui.TextFromFunction(valueFn).
+			Font(ui.NewFont().Size("32px").Weight("bold")).
+			Color(color),
+	).Background("#fff").
+		Padding("20px").
+		BorderRadius("8px").
+		BoxShadow("0 2px 4px rgba(0,0,0,0.1)").
+		Width("200px").
+		AlignCenter()
+}
+
+func actionButton(label string, action func()) ui.View {
+	return ui.Button(action,
+		ui.TextFromString(label).Color("#fff"),
+	).Background("#0077b6").
+		Padding("12px 24px").
+		Border("none").
+		BorderRadius("4px").
+		Cursor("pointer")
+}
+
+func activityItem(text, time string) ui.View {
+	return ui.HorizontalGroup(
+		ui.TextFromString(text).Color("#333"),
+		ui.Spacer(),
+		ui.TextFromString(time).Color("#999").Font(ui.NewFont().Size("12px")),
+	).Background("#fff").
+		Padding("15px").
+		BorderRadius("4px").
+		Margin("5px 0")
+}
+
+// Login view
+func loginView() ui.View {
+	username := reactive.NewSignal("")
+	password := reactive.NewSignal("")
+	errorMsg := reactive.NewSignal("")
+
+	return ui.VerticalGroup(
+		ui.TextFromString("Login").
+			Font(ui.NewFont().Size("28px").Weight("bold")).
+			Color("#333"),
+
+		ui.VerticalGroup(
+			ui.TextFromString("Username").Color("#666").Margin("0 0 5px 0"),
+			ui.TextInput(&username, "Enter username").
+				Padding("10px").
+				Border("1px solid #ddd").
+				BorderRadius("4px").
+				Width("300px"),
+
+			ui.TextFromString("Password").Color("#666").Margin("15px 0 5px 0"),
+			ui.TextInput(&password, "Enter password").
+				Padding("10px").
+				Border("1px solid #ddd").
+				BorderRadius("4px").
+				Width("300px"),
+
+			ui.TextFromFunction(func() string {
+				return errorMsg.Get()
+			}).Color("#e94560").Margin("10px 0"),
+
+			ui.Button(func() {
+				// Simulated authentication
+				u := username.Get()
+				p := password.Get()
+				if u == "admin" && p == "admin" {
+					isAuthenticated.Set(true)
+					currentUser.Set("admin")
+					userRole.Set("admin")
+					navigation.Navigate("/")
+				} else if u == "user" && p == "user" {
+					isAuthenticated.Set(true)
+					currentUser.Set("user")
+					userRole.Set("user")
+					navigation.Navigate("/")
+				} else {
+					errorMsg.Set("Invalid credentials. Try admin/admin or user/user")
+				}
+			}, ui.TextFromString("Login").Color("#fff")).
+				Background("#0077b6").
+				Padding("12px 40px").
+				Border("none").
+				BorderRadius("4px").
+				Cursor("pointer").
+				Margin("20px 0"),
+		).Background("#fff").
+			Padding("30px").
+			BorderRadius("8px").
+			BoxShadow("0 2px 10px rgba(0,0,0,0.1)").
+			Gap("5px"),
+	).AlignCenter().Padding("50px")
+}
+
+// Users view - list and manage users
+func usersView() ui.View {
+	searchTerm := reactive.NewSignal("")
+
+	return ui.VerticalGroup(
+		ui.TextFromString("User Management").
+			Font(ui.NewFont().Size("28px").Weight("bold")).
+			Color("#333"),
+
+		// Search bar
+		ui.HorizontalGroup(
+			ui.TextInput(&searchTerm, "Search users...").
+				Padding("10px").
+				Border("1px solid #ddd").
+				BorderRadius("4px").
+				Width("300px"),
+			ui.Button(func() {
+				// Add new user simulation
+				currentUsers := users.Get()
+				newID := len(currentUsers) + 1
+				currentUsers = append(currentUsers, User{
+					ID:     newID,
+					Name:   fmt.Sprintf("New User %d", newID),
+					Email:  fmt.Sprintf("user%d@example.com", newID),
+					Role:   "user",
+					Active: true,
+				})
+				users.Set(currentUsers)
+				totalUsers.Set(totalUsers.Get() + 1)
+			}, ui.TextFromString("Add User").Color("#fff")).
+				Background("#4ecca3").
+				Padding("10px 20px").
+				Border("none").
+				BorderRadius("4px").
+				Cursor("pointer"),
+		).Gap("10px").Margin("20px 0"),
+
+		// User list
+		ui.VerticalGroup(
+			userListHeader(),
+			userList(&searchTerm),
+		).Background("#fff").
+			BorderRadius("8px").
+			BoxShadow("0 2px 4px rgba(0,0,0,0.1)"),
+	).AlignLeft().Gap("10px")
+}
+
+func userListHeader() ui.View {
+	return ui.FlexLayout(
+		[]string{"60px", "1fr", "1fr", "100px", "100px"},
+		ui.TextFromString("ID").Font(ui.NewFont().Weight("bold")).Color("#666"),
+		ui.TextFromString("Name").Font(ui.NewFont().Weight("bold")).Color("#666"),
+		ui.TextFromString("Email").Font(ui.NewFont().Weight("bold")).Color("#666"),
+		ui.TextFromString("Role").Font(ui.NewFont().Weight("bold")).Color("#666"),
+		ui.TextFromString("Status").Font(ui.NewFont().Weight("bold")).Color("#666"),
+	).Padding("15px").BorderBottom("2px solid #eee")
+}
+
+func userList(searchTerm *reactive.Signal[string]) ui.View {
+	view := ui.NewView()
+
+	reactive.NewEffect(func() {
+		view.Element().Set("innerHTML", "")
+		search := searchTerm.Get()
+		for _, user := range users.Get() {
+			// Simple search filter
+			if search != "" && !containsIgnoreCase(user.Name, search) && !containsIgnoreCase(user.Email, search) {
+				continue
+			}
+			view.Child(userRow(user))
+		}
+	})
+
+	return view
+}
+
+func userRow(user User) ui.View {
+	statusColor := "#4ecca3"
+	statusText := "Active"
+	if !user.Active {
+		statusColor = "#e94560"
+		statusText = "Inactive"
+	}
+
+	return ui.FlexLayout(
+		[]string{"60px", "1fr", "1fr", "100px", "100px"},
+		ui.TextFromString(strconv.Itoa(user.ID)).Color("#333"),
+		navigation.Link(
+			fmt.Sprintf("/users/%d", user.ID),
+			ui.TextFromString(user.Name).Color("#0077b6"),
+		),
+		ui.TextFromString(user.Email).Color("#666"),
+		ui.TextFromString(user.Role).Color("#333"),
+		ui.TextFromString(statusText).Color(statusColor),
+	).Padding("15px").BorderBottom("1px solid #eee")
+}
+
+// User detail view
+func userDetailView(params map[string]string) ui.View {
+	userID := params["id"]
+	id, _ := strconv.Atoi(userID)
+
+	var user *User
+	for _, u := range users.Get() {
+		if u.ID == id {
+			userCopy := u
+			user = &userCopy
+			break
+		}
+	}
+
+	if user == nil {
+		return ui.TextFromString("User not found").Color("#e94560")
+	}
+
+	return ui.VerticalGroup(
+		ui.Button(func() {
+			navigation.Navigate("/users")
+		}, ui.TextFromString("Back to Users").Color("#0077b6")).
+			Background("transparent").
+			Border("none").
+			Cursor("pointer").
+			Padding("0").
+			Margin("0 0 20px 0"),
+
+		ui.TextFromString(user.Name).
+			Font(ui.NewFont().Size("28px").Weight("bold")).
+			Color("#333"),
+
+		ui.VerticalGroup(
+			detailRow("ID", strconv.Itoa(user.ID)),
+			detailRow("Email", user.Email),
+			detailRow("Role", user.Role),
+			detailRow("Status", map[bool]string{true: "Active", false: "Inactive"}[user.Active]),
+		).Background("#fff").
+			Padding("20px").
+			BorderRadius("8px").
+			BoxShadow("0 2px 4px rgba(0,0,0,0.1)").
+			Gap("10px").
+			Margin("20px 0"),
+	).AlignLeft()
+}
+
+func detailRow(label, value string) ui.View {
+	return ui.HorizontalGroup(
+		ui.TextFromString(label+":").Font(ui.NewFont().Weight("bold")).Color("#666").Width("100px"),
+		ui.TextFromString(value).Color("#333"),
+	).Gap("10px")
+}
+
+// Settings view
+func settingsView() ui.View {
+	return ui.VerticalGroup(
+		ui.TextFromString("Settings").
+			Font(ui.NewFont().Size("28px").Weight("bold")).
+			Color("#333"),
+
+		// Appearance section
+		settingsSection("Appearance",
+			ui.Checkbox(&darkMode, "Enable Dark Mode"),
+		),
+
+		// Notifications section
+		settingsSection("Notifications",
+			ui.Checkbox(&emailNotifications, "Email Notifications"),
+		),
+
+		// API Settings section
+		settingsSection("API Configuration",
+			ui.VerticalGroup(
+				ui.TextFromString("API Endpoint").Color("#666").Margin("0 0 5px 0"),
+				ui.TextInput(&apiEndpoint, "API URL").
+					Padding("10px").
+					Border("1px solid #ddd").
+					BorderRadius("4px").
+					Width("400px"),
+
+				ui.TextFromString("Refresh Interval (seconds)").Color("#666").Margin("15px 0 5px 0"),
+				ui.HorizontalGroup(
+					ui.Slider(&refreshInterval, 5, 120),
+					ui.TextFromFunction(func() string {
+						return fmt.Sprintf("%ds", refreshInterval.Get())
+					}).Color("#333").Width("50px"),
+				).Gap("10px").AlignCenter(),
+			).Gap("5px"),
+		),
+
+		// Current settings display
+		ui.VerticalGroup(
+			ui.TextFromString("Current Configuration").
+				Font(ui.NewFont().Size("18px").Weight("bold")).
+				Color("#333"),
+			ui.TextFromFunction(func() string {
+				return fmt.Sprintf("Dark Mode: %v | Notifications: %v | Refresh: %ds",
+					darkMode.Get(), emailNotifications.Get(), refreshInterval.Get())
+			}).Color("#666").Font(ui.NewFont().Size("14px")),
+		).Background("#f8f8f8").
+			Padding("15px").
+			BorderRadius("4px").
+			Margin("20px 0"),
+
+		// Save button
+		ui.Button(func() {
+			// Simulated save action
+			fmt.Println("Settings saved!")
+		}, ui.TextFromString("Save Settings").Color("#fff")).
+			Background("#0077b6").
+			Padding("12px 30px").
+			Border("none").
+			BorderRadius("4px").
+			Cursor("pointer"),
+	).AlignLeft().Gap("10px").Padding("0 0 20px 0")
+}
+
+func settingsSection(title string, content ui.View) ui.View {
+	return ui.VerticalGroup(
+		ui.TextFromString(title).
+			Font(ui.NewFont().Size("18px").Weight("bold")).
+			Color("#333"),
+		content,
+	).Background("#fff").
+		Padding("20px").
+		BorderRadius("8px").
+		BoxShadow("0 2px 4px rgba(0,0,0,0.1)").
+		Gap("15px").
+		Margin("20px 0")
+}
+
+// Admin view - protected section
+func adminView() ui.View {
+	return ui.VerticalGroup(
+		ui.TextFromString("Admin Panel").
+			Font(ui.NewFont().Size("28px").Weight("bold")).
+			Color("#333"),
+
+		ui.TextFromString("This section is only accessible to administrators.").
+			Color("#666").
+			Margin("10px 0"),
+
+		// Admin actions
+		ui.VerticalGroup(
+			ui.TextFromString("System Actions").
+				Font(ui.NewFont().Size("18px").Weight("bold")).
+				Color("#333"),
+
+			ui.HorizontalGroup(
+				adminActionButton("Clear Cache", func() {
+					fmt.Println("Cache cleared!")
+				}),
+				adminActionButton("Restart Services", func() {
+					fmt.Println("Services restarted!")
+				}),
+				adminActionButton("Run Backup", func() {
+					fmt.Println("Backup started!")
+				}),
+			).Gap("10px"),
+		).Background("#fff").
+			Padding("20px").
+			BorderRadius("8px").
+			BoxShadow("0 2px 4px rgba(0,0,0,0.1)").
+			Gap("15px").
+			Margin("20px 0"),
+
+		// Danger zone
+		ui.VerticalGroup(
+			ui.TextFromString("Danger Zone").
+				Font(ui.NewFont().Size("18px").Weight("bold")).
+				Color("#e94560"),
+
+			ui.TextFromString("These actions are irreversible. Use with caution.").
+				Color("#999").
+				Font(ui.NewFont().Size("14px")),
+
+			ui.Button(func() {
+				fmt.Println("Reset initiated!")
+			}, ui.TextFromString("Reset All Data").Color("#fff")).
+				Background("#e94560").
+				Padding("10px 20px").
+				Border("none").
+				BorderRadius("4px").
+				Cursor("pointer"),
+		).Background("#fff").
+			Padding("20px").
+			BorderRadius("8px").
+			Border("2px solid #e94560").
+			Gap("10px").
+			Margin("20px 0"),
+	).AlignLeft().Gap("10px")
+}
+
+func adminActionButton(label string, action func()) ui.View {
+	return ui.Button(action,
+		ui.TextFromString(label).Color("#fff"),
+	).Background("#6c757d").
+		Padding("10px 20px").
+		Border("none").
+		BorderRadius("4px").
+		Cursor("pointer")
+}
+
+// 404 Not Found view
+func notFoundView() ui.View {
+	return ui.VerticalGroup(
+		ui.TextFromString("404").
+			Font(ui.NewFont().Size("72px").Weight("bold")).
+			Color("#e94560"),
+		ui.TextFromString("Page Not Found").
+			Font(ui.NewFont().Size("24px")).
+			Color("#666"),
+		ui.Button(func() {
+			navigation.Navigate("/")
+		}, ui.TextFromString("Go Home").Color("#fff")).
+			Background("#0077b6").
+			Padding("12px 30px").
+			Border("none").
+			BorderRadius("4px").
+			Cursor("pointer").
+			Margin("20px 0"),
+	).AlignCenter().Padding("50px")
+}
+
+// Helper function for case-insensitive search
+func containsIgnoreCase(str, substr string) bool {
+	return len(str) >= len(substr) && contains(toLower(str), toLower(substr))
+}
+
+func toLower(s string) string {
+	result := make([]byte, len(s))
+	for i := 0; i < len(s); i++ {
+		c := s[i]
+		if c >= 'A' && c <= 'Z' {
+			result[i] = c + 32
+		} else {
+			result[i] = c
+		}
+	}
+	return string(result)
+}
+
+func contains(s, substr string) bool {
+	for i := 0; i <= len(s)-len(substr); i++ {
+		if s[i:i+len(substr)] == substr {
+			return true
+		}
+	}
+	return false
+}

examples/multipage/main.go

@@ -0,0 +1,265 @@
+//go:build js && wasm
+
+// Package main demonstrates Iris client-side routing capabilities.
+//
+// This example shows:
+//   - Router setup with multiple routes
+//   - Route parameters (/users/:id)
+//   - Navigation between pages using Link and Navigate
+//   - Route guards for protected routes
+//   - History management (back/forward)
+package main
+
+import (
+	"fmt"
+
+	"git.flowmade.one/flowmade-one/iris/navigation"
+	"git.flowmade.one/flowmade-one/iris/reactive"
+	"git.flowmade.one/flowmade-one/iris/ui"
+)
+
+// Global auth state to demonstrate route guards
+var isAuthenticated = reactive.NewSignal(false)
+
+func main() {
+	// Define routes with their handlers and guards
+	routes := []navigation.Route{
+		{Path: "/", Handler: homePage},
+		{Path: "/about", Handler: aboutPage},
+		{Path: "/users", Handler: usersPage},
+		{Path: "/users/:id", Handler: userDetailPage, Guards: []navigation.RouteGuard{
+			navigation.NumericIdGuard(),
+		}},
+		{Path: "/admin", Handler: adminPage, Guards: []navigation.RouteGuard{
+			navigation.AuthGuard(func() bool { return isAuthenticated.Get() }),
+		}},
+	}
+
+	// Create router and set up navigation
+	router := navigation.NewRouter(routes)
+	router.SetNotFoundHandler(notFoundPage)
+	navigation.SetGlobalRouter(router)
+
+	// Mount the app with router support
+	ui.NewAppWithRouter(router)
+
+	// Keep the application running
+	select {}
+}
+
+// homePage renders the landing page with navigation links
+func homePage(params map[string]string) ui.View {
+	return pageLayout("Home",
+		ui.VerticalGroup(
+			ui.TextFromString("Welcome to the Iris Multi-Page Demo").
+				Color("#333").
+				Padding("16px"),
+			ui.TextFromString("This example demonstrates client-side routing with:").
+				Color("#666").
+				Padding("8px"),
+			ui.VerticalGroup(
+				ui.TextFromString("- Multiple routes and page navigation").Color("#888"),
+				ui.TextFromString("- Route parameters (see /users/:id)").Color("#888"),
+				ui.TextFromString("- Route guards for protected pages").Color("#888"),
+				ui.TextFromString("- Browser history integration").Color("#888"),
+			).Padding("8px 24px"),
+			ui.TextFromString("Use the navigation bar above to explore.").
+				Color("#666").
+				Padding("16px"),
+		),
+	)
+}
+
+// aboutPage renders information about the demo
+func aboutPage(params map[string]string) ui.View {
+	return pageLayout("About",
+		ui.VerticalGroup(
+			ui.TextFromString("About Iris Navigation").
+				Color("#333").
+				Padding("16px"),
+			ui.TextFromString("The navigation package provides:").
+				Color("#666").
+				Padding("8px"),
+			ui.VerticalGroup(
+				ui.TextFromString("Router - Define routes with path patterns and handlers").Color("#888"),
+				ui.TextFromString("RouteGuard - Protect routes with custom logic").Color("#888"),
+				ui.TextFromString("HistoryManager - Integrate with browser history").Color("#888"),
+				ui.TextFromString("Link - Create navigational elements").Color("#888"),
+				ui.TextFromString("Navigate/Back/Forward - Programmatic navigation").Color("#888"),
+			).Padding("8px 24px"),
+		),
+	)
+}
+
+// usersPage renders a list of users with links to their detail pages
+func usersPage(params map[string]string) ui.View {
+	users := []struct {
+		ID   string
+		Name string
+	}{
+		{"1", "Alice"},
+		{"2", "Bob"},
+		{"3", "Charlie"},
+		{"4", "Diana"},
+	}
+
+	var userLinks []ui.View
+	for _, user := range users {
+		// Capture user in closure
+		u := user
+		userLinks = append(userLinks,
+			navigation.Link(fmt.Sprintf("/users/%s", u.ID),
+				ui.TextFromString(fmt.Sprintf("View %s (ID: %s)", u.Name, u.ID)).
+					Color("#0066cc"),
+			).Padding("8px").Cursor("pointer"),
+		)
+	}
+
+	return pageLayout("Users",
+		ui.VerticalGroup(
+			ui.TextFromString("User Directory").
+				Color("#333").
+				Padding("16px"),
+			ui.TextFromString("Click a user to see their details:").
+				Color("#666").
+				Padding("8px"),
+			ui.VerticalGroup(userLinks...).Padding("8px"),
+		),
+	)
+}
+
+// userDetailPage shows details for a specific user using the :id parameter
+func userDetailPage(params map[string]string) ui.View {
+	userID := params["id"]
+
+	// Simulated user data
+	userData := map[string]struct {
+		Name  string
+		Email string
+		Role  string
+	}{
+		"1": {"Alice", "alice@example.com", "Admin"},
+		"2": {"Bob", "bob@example.com", "User"},
+		"3": {"Charlie", "charlie@example.com", "User"},
+		"4": {"Diana", "diana@example.com", "Moderator"},
+	}
+
+	user, exists := userData[userID]
+	if !exists {
+		return pageLayout("User Not Found",
+			ui.VerticalGroup(
+				ui.TextFromString(fmt.Sprintf("User with ID %s not found", userID)).
+					Color("#ff4444").
+					Padding("16px"),
+				ui.Button(func() {
+					navigation.Navigate("/users")
+				}, ui.TextFromString("Back to Users")).
+					Padding("8px"),
+			),
+		)
+	}
+
+	return pageLayout(fmt.Sprintf("User: %s", user.Name),
+		ui.VerticalGroup(
+			ui.TextFromString(fmt.Sprintf("User Details (ID: %s)", userID)).
+				Color("#333").
+				Padding("16px"),
+			ui.VerticalGroup(
+				ui.TextFromString(fmt.Sprintf("Name: %s", user.Name)).Color("#666"),
+				ui.TextFromString(fmt.Sprintf("Email: %s", user.Email)).Color("#666"),
+				ui.TextFromString(fmt.Sprintf("Role: %s", user.Role)).Color("#666"),
+			).Padding("8px 24px"),
+			ui.HorizontalGroup(
+				ui.Button(func() {
+					navigation.Back()
+				}, ui.TextFromString("Go Back")).Padding("8px"),
+				ui.Button(func() {
+					navigation.Navigate("/users")
+				}, ui.TextFromString("All Users")).Padding("8px"),
+			).Padding("16px"),
+		),
+	)
+}
+
+// adminPage is a protected route that requires authentication
+func adminPage(params map[string]string) ui.View {
+	return pageLayout("Admin",
+		ui.VerticalGroup(
+			ui.TextFromString("Admin Dashboard").
+				Color("#333").
+				Padding("16px"),
+			ui.TextFromString("Welcome to the protected admin area!").
+				Color("#28a745").
+				Padding("8px"),
+			ui.TextFromString("This page is protected by an AuthGuard.").
+				Color("#666").
+				Padding("8px"),
+			ui.Button(func() {
+				isAuthenticated.Set(false)
+				navigation.Navigate("/")
+			}, ui.TextFromString("Logout")).
+				Padding("8px").
+				Background("#dc3545").
+				Foreground("#fff"),
+		),
+	)
+}
+
+// notFoundPage renders when no route matches
+func notFoundPage() ui.View {
+	return pageLayout("404",
+		ui.VerticalGroup(
+			ui.TextFromString("404 - Page Not Found").
+				Color("#ff4444").
+				Padding("16px"),
+			ui.TextFromString("The page you are looking for does not exist.").
+				Color("#666").
+				Padding("8px"),
+			ui.Button(func() {
+				navigation.Navigate("/")
+			}, ui.TextFromString("Go Home")).Padding("8px"),
+		),
+	)
+}
+
+// pageLayout provides consistent page structure with navigation
+func pageLayout(title string, content ui.View) ui.View {
+	return ui.VerticalGroup(
+		navBar(),
+		ui.VerticalGroup(
+			ui.TextFromString(title).
+				Color("#333").
+				Padding("8px").
+				Background("#f0f0f0").
+				Width("100%"),
+			content,
+		).Padding("16px"),
+	).MinHeight("100vh")
+}
+
+// navBar creates the navigation header with links
+func navBar() ui.View {
+	return ui.HorizontalGroup(
+		navigation.Link("/", ui.TextFromString("Home").Color("#fff")),
+		navigation.Link("/about", ui.TextFromString("About").Color("#fff")),
+		navigation.Link("/users", ui.TextFromString("Users").Color("#fff")),
+		authButton(),
+	).Background("#333").Padding("8px 16px").AlignItems("center")
+}
+
+// authButton shows login/admin based on auth state
+func authButton() ui.View {
+	return ui.Button(func() {
+		if isAuthenticated.Get() {
+			navigation.Navigate("/admin")
+		} else {
+			isAuthenticated.Set(true)
+			navigation.Navigate("/admin")
+		}
+	}, ui.TextFromFunction(func() string {
+		if isAuthenticated.Get() {
+			return "Admin"
+		}
+		return "Login"
+	}).Color("#fff")).Background("transparent").Border("1px solid #fff").Padding("4px 12px").Cursor("pointer")
+}

examples/todo/main.go

@@ -0,0 +1,195 @@
+//go:build js && wasm
+
+package main
+
+import (
+	"fmt"
+	"syscall/js"
+
+	"git.flowmade.one/flowmade-one/iris/reactive"
+	"git.flowmade.one/flowmade-one/iris/ui"
+)
+
+// Todo represents a single todo item
+type Todo struct {
+	ID        int
+	Text      string
+	Completed bool
+}
+
+func main() {
+	// Signal holding the list of todos
+	todos := reactive.NewSignal([]Todo{})
+
+	// Signal for the input field
+	inputText := reactive.NewSignal("")
+
+	// Counter for generating unique IDs
+	nextID := reactive.NewSignal(1)
+
+	// Create the main app view
+	view := ui.VerticalGroup(
+		// Title
+		ui.TextFromString("Todo List").Padding("16px 0"),
+
+		// Input row: text input + add button
+		inputRow(&inputText, func() {
+			text := inputText.Get()
+			if text == "" {
+				return
+			}
+
+			// Add new todo
+			id := nextID.Get()
+			nextID.Set(id + 1)
+
+			currentTodos := todos.Get()
+			newTodos := append(currentTodos, Todo{
+				ID:        id,
+				Text:      text,
+				Completed: false,
+			})
+			todos.Set(newTodos)
+
+			// Clear input
+			inputText.Set("")
+		}),
+
+		// Todo list
+		todoList(&todos),
+
+		// Summary text showing completed count
+		ui.TextFromFunction(func() string {
+			allTodos := todos.Get()
+			if len(allTodos) == 0 {
+				return "No todos yet"
+			}
+
+			completed := 0
+			for _, t := range allTodos {
+				if t.Completed {
+					completed++
+				}
+			}
+			return fmt.Sprintf("%d of %d completed", completed, len(allTodos))
+		}).Padding("16px 0"),
+	).MaxWidth("400px").Padding("24px")
+
+	ui.NewApp(view)
+
+	select {}
+}
+
+// inputRow creates the input field and add button
+func inputRow(inputText *reactive.Signal[string], onAdd func()) ui.View {
+	row := ui.NewView()
+	row.Display("flex").Gap("8px").Width("100%")
+
+	// Text input
+	input := ui.TextInput(inputText, "What needs to be done?")
+	input.Width("100%")
+
+	// Handle Enter key to add todo
+	input.Element().OnWithEvent("keypress", func(event js.Value) {
+		if event.Get("key").String() == "Enter" {
+			onAdd()
+		}
+	})
+
+	// Add button
+	addBtn := ui.Button(onAdd, ui.TextFromString("Add"))
+	addBtn.Padding("8px 16px")
+
+	row.Child(input)
+	row.Child(addBtn)
+
+	return row
+}
+
+// todoList renders the list of todos reactively
+func todoList(todos *reactive.Signal[[]Todo]) ui.View {
+	container := ui.NewView()
+	container.Width("100%")
+
+	// Effect that re-renders the list when todos change
+	reactive.NewEffect(func() {
+		allTodos := todos.Get()
+
+		// Clear existing children
+		container.Element().ClearChildren()
+
+		// Render each todo item
+		for _, todo := range allTodos {
+			item := todoItem(todo, todos)
+			container.Child(item)
+		}
+
+		// Show empty state if no todos
+		if len(allTodos) == 0 {
+			emptyText := ui.TextFromString("Add your first todo above")
+			emptyText.Color("#666").Padding("16px 0").TextAlign("center")
+			container.Child(emptyText)
+		}
+	})
+
+	return container
+}
+
+// todoItem renders a single todo item with toggle and delete
+func todoItem(todo Todo, todos *reactive.Signal[[]Todo]) ui.View {
+	row := ui.NewView()
+	row.Display("flex").Gap("12px").Padding("8px 0").Width("100%").AlignItems("center")
+	row.BorderBottom("1px solid #eee")
+
+	// Completed checkbox using public ui.RawCheckbox
+	checkbox := ui.RawCheckbox(todo.Completed, func(isChecked bool) {
+		toggleTodo(todos, todo.ID, isChecked)
+	})
+
+	// Todo text with strikethrough if completed
+	textView := ui.NewView()
+	textView.Display("flex").Width("100%")
+	text := ui.Span(todo.Text)
+	if todo.Completed {
+		text.TextDecoration("line-through").Color("#999")
+	}
+	textView.Child(text)
+
+	// Delete button
+	deleteBtn := ui.Button(func() {
+		deleteTodo(todos, todo.ID)
+	}, ui.TextFromString("X"))
+	deleteBtn.Padding("4px 8px")
+
+	row.Child(checkbox)
+	row.Child(textView)
+	row.Child(deleteBtn)
+
+	return row
+}
+
+// toggleTodo updates the completed status of a todo
+func toggleTodo(todos *reactive.Signal[[]Todo], id int, completed bool) {
+	currentTodos := todos.Get()
+	newTodos := make([]Todo, len(currentTodos))
+	for i, t := range currentTodos {
+		if t.ID == id {
+			newTodos[i] = Todo{ID: t.ID, Text: t.Text, Completed: completed}
+		} else {
+			newTodos[i] = t
+		}
+	}
+	todos.Set(newTodos)
+}
+
+// deleteTodo removes a todo from the list
+func deleteTodo(todos *reactive.Signal[[]Todo], id int) {
+	currentTodos := todos.Get()
+	newTodos := make([]Todo, 0, len(currentTodos))
+	for _, t := range currentTodos {
+		if t.ID != id {
+			newTodos = append(newTodos, t)
+		}
+	}
+	todos.Set(newTodos)
+}

ui/input.go

@@ -205,4 +205,23 @@ func NumberInput(value *reactive.Signal[float64], placeholder string) View {
 	})
 
 	return View{input}
-}
+}
+// RawCheckbox creates a plain checkbox input without a label wrapper.
+// The onChange callback is called with the new checked state when the user clicks.
+func RawCheckbox(checked bool, onChange func(bool)) View {
+	checkbox := element.NewElement("input")
+	checkbox.Attr("type", "checkbox")
+
+	// Set initial state
+	if checked {
+		checkbox.Set("checked", true)
+	}
+
+	// Call onChange when user clicks
+	checkbox.On("change", func() {
+		newValue := checkbox.Get("checked").Bool()
+		onChange(newValue)
+	})
+
+	return View{checkbox}
+}

ui/modifiers.go

@@ -170,3 +170,8 @@ func (v View) PointerEvents(value string) View {
 	v.e.PointerEvents(value)
 	return v
 }
+
+func (v View) TextDecoration(value string) View {
+	v.e.Get("style").Call("setProperty", "text-decoration", value)
+	return v
+}

ui/text.go

@@ -21,3 +21,10 @@ func TextFromFunction(fn func() string) View {
 
 	return View{textNode}
 }
+
+// Span creates a span element with the given text content.
+func Span(text string) View {
+	v := View{element.NewElement("span")}
+	v.e.Set("textContent", text)
+	return v
+}