Remove internal package import from todo example

Replace direct internal/element usage with public ui package
components to ensure examples only use the public API:

- Add ui.RawCheckbox for plain checkbox without label wrapper
- Add ui.Span for span elements with text content
- Add View.TextDecoration modifier for strikethrough styling
- Update todo example to use these public components

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

examples/multipage/main.go

@@ -1,265 +0,0 @@
-//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
+}