feat: three-tier context lifecycle (grace → suspended → reaped)

Contexts that lose their SSE connection now pass through a suspended
state before being fully reaped. Suspended contexts keep their shell
(ID, route, CSRF token) but free page resources. On reconnect, the
page init function is re-run for a seamless resume. Contexts past
the TTL trigger a client-side reload instead of a silent dead page.

Configurable via ContextSuspendAfter (default 15m) and ContextTTL
(default 1h).

.gitignore

@@ -48,6 +48,7 @@ internal/examples/plugins/plugins
 internal/examples/realtimechart/realtimechart
 internal/examples/shakespeare/shakespeare
 internal/examples/nats-chatroom/nats-chatroom
+/nats-chatroom
 
 # NATS data directory
 data/

README.md

@@ -69,7 +69,7 @@ func main() {
 - **CSRF protection** — automatic token generation and validation on every action
 - **Rate limiting** — token-bucket algorithm, configurable globally and per-action
 - **Event handling** — `OnClick`, `OnChange`, `OnSubmit`, `OnInput`, `OnFocus`, `OnBlur`, `OnMouseEnter`, `OnMouseLeave`, `OnScroll`, `OnDblClick`, `OnKeyDown`, and `OnKeyDownMap` for multi-key bindings
-- **Timed routines** — `OnInterval` with start/stop/update controls, tied to context lifecycle
+- **Timed routines** — `OnInterval` auto-starts a ticker goroutine, returns a stop function, tied to context lifecycle
 - **Redirects** — `Redirect`, `ReplaceURL`, and format-string variants
 - **Plugin system** — `func(v *V)` hooks for integrating CSS/JS libraries
 - **Structured logging** — zerolog with configurable levels; console output in dev, JSON in production

configuration.go

@@ -57,9 +57,14 @@ type Options struct {
 	// embedded NATS backend, or supply any PubSub implementation.
 	PubSub PubSub
 
+	// ContextSuspendAfter is the time a context may be disconnected before
+	// the reaper suspends it (frees page resources but keeps the context
+	// shell for seamless re-init on reconnect). Default: 15m.
+	ContextSuspendAfter time.Duration
+
 	// ContextTTL is the maximum time a context may exist without an SSE
-	// connection before the background reaper disposes it.
-	// Default: 30s. Negative value disables the reaper.
+	// connection before the background reaper fully disposes it.
+	// Default: 1h. Negative value disables the reaper.
 	ContextTTL time.Duration
 
 	// ActionRateLimit configures the default token-bucket rate limiter for

context.go

@@ -6,6 +6,7 @@ import (
 	"encoding/json"
 	"fmt"
 	"reflect"
+	"strings"
 	"sync"
 	"sync/atomic"
 	"time"
@@ -30,7 +31,9 @@ type Context struct {
 	actionRegistry    map[string]actionEntry
 	signals           *sync.Map
 	mu                sync.RWMutex
+	navMu             sync.Mutex
 	ctxDisposedChan   chan struct{}
+	pageStopChan      chan struct{}
 	reqCtx            context.Context
 	fields            []*Field
 	subscriptions     []Subscription
@@ -38,6 +41,8 @@ type Context struct {
 	disposeOnce       sync.Once
 	createdAt           time.Time
 	sseConnected        atomic.Bool
+	sseDisconnectedAt   atomic.Pointer[time.Time]
+	suspended           atomic.Bool
 }
 
 // View defines the UI rendered by this context.
@@ -48,7 +53,11 @@ func (c *Context) View(f func() h.H) {
 	if f == nil {
 		panic("nil viewfn")
 	}
+	if c.app.layout != nil {
+		c.view = func() h.H { return h.Div(h.ID(c.id), c.app.layout(f)) }
+	} else {
 		c.view = func() h.H { return h.Div(h.ID(c.id), f()) }
+	}
 }
 
 // Component registers a subcontext that has self contained data, actions and signals.
@@ -131,17 +140,19 @@ func (c *Context) getAction(id string) (actionEntry, error) {
 	return actionEntry{}, fmt.Errorf("action '%s' not found", id)
 }
 
-// OnInterval starts a go routine that sets a time.Ticker with the given duration and executes
-// the given handler func() on every tick. Use *Routine.UpdateInterval to update the interval.
-func (c *Context) OnInterval(duration time.Duration, handler func()) *OnIntervalRoutine {
-	var cn chan struct{}
-	if c.isComponent() { // components use the chan on the parent page ctx
-		cn = c.parentPageCtx.ctxDisposedChan
+// OnInterval starts a goroutine that executes handler on every tick of the given duration.
+// The goroutine is tied to the context lifecycle and will stop when the context is disposed.
+// Returns a func() that stops the interval when called.
+func (c *Context) OnInterval(duration time.Duration, handler func()) func() {
+	var disposeCh, pageCh chan struct{}
+	if c.isComponent() {
+		disposeCh = c.parentPageCtx.ctxDisposedChan
+		pageCh = c.parentPageCtx.pageStopChan
 	} else {
-		cn = c.ctxDisposedChan
+		disposeCh = c.ctxDisposedChan
+		pageCh = c.pageStopChan
 	}
-	r := newOnIntervalRoutine(cn, duration, handler)
-	return r
+	return newOnInterval(disposeCh, pageCh, duration, handler)
 }
 
 // Signal creates a reactive signal and initializes it with the given value.
@@ -264,15 +275,22 @@ func (c *Context) sendPatch(p patch) {
 // Sync pushes the current view state and signal changes to the browser immediately
 // over the live SSE event stream.
 func (c *Context) Sync() {
+	c.syncView(false)
+}
+
+func (c *Context) syncView(viewTransition bool) {
 	elemsPatch := new(bytes.Buffer)
 	if err := c.view().Render(elemsPatch); err != nil {
 		c.app.logErr(c, "sync view failed: %v", err)
 		return
 	}
-	c.sendPatch(patch{patchTypeElements, elemsPatch.String()})
+	typ := patchType(patchTypeElements)
+	if viewTransition {
+		typ = patchTypeElementsWithVT
+	}
+	c.sendPatch(patch{typ, elemsPatch.String()})
 
 	updatedSigs := c.prepareSignalsForPatch()
-
 	if len(updatedSigs) != 0 {
 		outgoingSigs, _ := json.Marshal(updatedSigs)
 		c.sendPatch(patch{patchTypeSignals, string(outgoingSigs)})
@@ -369,6 +387,53 @@ func (c *Context) ReplaceURLf(format string, a ...any) {
 	c.ReplaceURL(fmt.Sprintf(format, a...))
 }
 
+// resetPageState tears down page-specific state (intervals, subscriptions,
+// actions, signals, fields) without disposing the context itself. The SSE
+// connection and context lifetime are unaffected.
+func (c *Context) resetPageState() {
+	close(c.pageStopChan)
+	c.unsubscribeAll()
+	c.mu.Lock()
+	c.actionRegistry = make(map[string]actionEntry)
+	c.signals = new(sync.Map)
+	c.fields = nil
+	c.pageStopChan = make(chan struct{})
+	c.mu.Unlock()
+}
+
+// suspend frees page-scoped resources while keeping the context shell alive
+// in the registry for seamless re-init on reconnect.
+func (c *Context) suspend() {
+	c.resetPageState()
+	c.suspended.Store(true)
+}
+
+// Navigate performs an SPA navigation to the given path. It resets page state,
+// runs the target page's init function (with middleware), and pushes the new
+// view over the existing SSE connection with a view transition animation.
+// If popstate is true, replaceState is used instead of pushState.
+func (c *Context) Navigate(path string, popstate bool) {
+	c.navMu.Lock()
+	defer c.navMu.Unlock()
+
+	route, initFn, params := c.app.matchRoute(path)
+	if initFn == nil {
+		c.Redirect(path)
+		return
+	}
+	c.resetPageState()
+	c.route = route
+	c.injectRouteParams(params)
+	initFn(c)
+	c.syncView(true)
+	safe := strings.NewReplacer(`\`, `\\`, `'`, `\'`).Replace(path)
+	if popstate {
+		c.ExecScript(fmt.Sprintf("history.replaceState({},'','%s')", safe))
+	} else {
+		c.ExecScript(fmt.Sprintf("history.pushState({},'','%s')", safe))
+	}
+}
+
 // dispose idempotently tears down this context: unsubscribes all pubsub
 // subscriptions and closes ctxDisposedChan to stop routines and exit the SSE loop.
 func (c *Context) dispose() {
@@ -379,7 +444,7 @@ func (c *Context) dispose() {
 }
 
 // stopAllRoutines closes ctxDisposedChan, broadcasting to all listening
-// goroutines (OnIntervalRoutine, SSE loop) that this context is done.
+// goroutines (OnInterval, SSE loop) that this context is done.
 func (c *Context) stopAllRoutines() {
 	select {
 	case <-c.ctxDisposedChan:
@@ -539,8 +604,9 @@ func newContext(id string, route string, v *V) *Context {
 		actionLimiter: newLimiter(v.actionRateLimit, defaultActionRate, defaultActionBurst),
 		actionRegistry:    make(map[string]actionEntry),
 		signals:           new(sync.Map),
-		patchChan:         make(chan patch, 1),
+		patchChan:         make(chan patch, 8),
 		ctxDisposedChan:   make(chan struct{}, 1),
+		pageStopChan:      make(chan struct{}),
 		createdAt:         time.Now(),
 	}
 }

docs/getting-started.md

@@ -0,0 +1,179 @@
+# Getting Started
+
+Via is a server-side reactive web framework for Go. The browser connects over SSE (Server-Sent Events), and all state lives on the server — signals, actions, and view rendering happen in Go. The browser is a thin display layer that Datastar keeps in sync via DOM morphing.
+
+## Core Loop
+
+Every Via app follows the same pattern:
+
+```go
+package main
+
+import (
+    "github.com/ryanhamamura/via"
+    "github.com/ryanhamamura/via/h"
+)
+
+func main() {
+    v := via.New()
+
+    v.Config(via.Options{
+        DocumentTitle: "My App",
+    })
+
+    v.Page("/", func(c *via.Context) {
+        count := 0
+        step := c.Signal(1)
+
+        increment := c.Action(func() {
+            count += step.Int()
+            c.Sync()
+        })
+
+        c.View(func() h.H {
+            return h.Div(
+                h.P(h.Textf("Count: %d", count)),
+                h.Label(
+                    h.Text("Step: "),
+                    h.Input(h.Type("number"), step.Bind()),
+                ),
+                h.Button(h.Text("+"), increment.OnClick()),
+            )
+        })
+    })
+
+    v.Start()
+}
+```
+
+What happens:
+
+1. `via.New()` creates the app, starts an embedded NATS server, and registers internal routes (`/_sse`, `/_action/{id}`, `/_navigate`, `/_session/close`).
+2. `v.Config()` applies settings.
+3. `v.Page()` registers a route. The init function receives a `*Context` where you define signals, actions, and the view.
+4. `v.Start()` starts the HTTP server and blocks until SIGINT/SIGTERM.
+
+When a browser hits the page, Via creates a new `Context`, runs the init function, renders the full HTML document, and opens an SSE connection. From that point, every `c.Sync()` re-renders the view and pushes a DOM patch to the browser.
+
+## Configuration
+
+```go
+v.Config(via.Options{
+    DevMode:         true,
+    ServerAddress:   ":8080",
+    LogLevel:        via.LogLevelDebug,
+    DocumentTitle:   "My App",
+    Plugins:         []via.Plugin{MyPlugin},
+    SessionManager:  sm,
+    PubSub:          customBackend,
+    ContextTTL:      60 * time.Second,
+    ActionRateLimit: via.RateLimitConfig{Rate: 20, Burst: 40},
+})
+```
+
+| Field | Default | Description |
+|-------|---------|-------------|
+| `DevMode` | `false` | Enables context persistence across restarts, console logger, and Datastar inspector widget |
+| `ServerAddress` | `":3000"` | HTTP listen address |
+| `LogLevel` | `InfoLevel` | Minimum log level. Use `via.LogLevelDebug`, `LogLevelInfo`, `LogLevelWarn`, `LogLevelError` |
+| `Logger` | (auto) | Replace the default logger entirely. When set, `LogLevel` and `DevMode` have no effect on logging |
+| `DocumentTitle` | `"⚡ Via"` | The `<title>` of the HTML document |
+| `Plugins` | `nil` | Slice of plugin functions executed during `Config()` |
+| `SessionManager` | in-memory | Cookie-based session manager. See [PubSub and Sessions](pubsub-and-sessions.md) |
+| `DatastarContent` | (embedded) | Custom Datastar JS bytes |
+| `DatastarPath` | `"/_datastar.js"` | URL path for the Datastar script |
+| `PubSub` | embedded NATS | Custom PubSub backend. Replaces the default NATS. See [PubSub and Sessions](pubsub-and-sessions.md) |
+| `ContextTTL` | `30s` | Max time a context survives without an SSE connection before cleanup. Negative value disables the reaper |
+| `ActionRateLimit` | `10 req/s, burst 20` | Default token-bucket rate limiter for action endpoints. Rate of `-1` disables limiting |
+
+## Static Files
+
+Serve files from a directory:
+
+```go
+v.Static("/assets/", "./static")
+```
+
+Or from an embedded filesystem:
+
+```go
+//go:embed static
+var staticFS embed.FS
+
+v.StaticFS("/assets/", staticFS)
+```
+
+Both disable directory listing and return 404 for directory paths.
+
+## Head and Foot Injection
+
+Add elements to every page's `<head>` or end of `<body>`:
+
+```go
+v.AppendToHead(
+    h.Link(h.Rel("stylesheet"), h.Href("/assets/style.css")),
+    h.Meta(h.Attr("name", "viewport"), h.Attr("content", "width=device-width, initial-scale=1")),
+)
+
+v.AppendToFoot(
+    h.Script(h.Src("/assets/app.js")),
+)
+```
+
+These are additive and affect all pages globally.
+
+## Plugins
+
+A plugin is a `func(v *via.V)` that mutates the app during configuration — registering routes, injecting assets, or applying middleware.
+
+```go
+func PicoCSSPlugin(v *via.V) {
+    v.HTTPServeMux().HandleFunc("GET /css/pico.css", func(w http.ResponseWriter, r *http.Request) {
+        w.Header().Set("Content-Type", "text/css")
+        w.Write(picoCSSBytes)
+    })
+    v.AppendToHead(h.Link(h.Rel("stylesheet"), h.Href("/css/pico.css")))
+}
+
+// Usage:
+v.Config(via.Options{
+    Plugins: []via.Plugin{PicoCSSPlugin},
+})
+```
+
+Plugins have full access to the `*V` public API: `HTTPServeMux()`, `AppendToHead()`, `AppendToFoot()`, `Config()`, etc.
+
+## DevMode
+
+Enable during development for a better feedback loop:
+
+```go
+v.Config(via.Options{DevMode: true})
+```
+
+What it does:
+
+- **Console logger** — Human-readable log output with timestamps.
+- **Context persistence** — Saves context-to-route mappings to `.via/devmode/ctx.json`. On server restart, reconnecting browsers restore their state instead of getting a blank page. Pair with [Air](https://github.com/air-verse/air) for hot-reloading.
+- **Datastar inspector** — Injects a widget showing live signal values and SSE activity.
+
+## Custom HTTP Handlers
+
+Access the underlying `*http.ServeMux` for custom routes:
+
+```go
+mux := v.HTTPServeMux()
+mux.HandleFunc("GET /api/health", func(w http.ResponseWriter, r *http.Request) {
+    w.Write([]byte("ok"))
+})
+```
+
+Register custom handlers before calling `v.Start()`.
+
+## Next Steps
+
+- [State and Interactivity](state-and-interactivity.md) — Signals, actions, components, validation
+- [Routing and Navigation](routing-and-navigation.md) — Multi-page apps, middleware, SPA navigation
+- [PubSub and Sessions](pubsub-and-sessions.md) — Real-time messaging, persistent sessions
+- [HTML DSL](html-dsl.md) — The `h` package reference
+- [Project Structure](project-structure.md) — Organizing files as your app grows

docs/html-dsl.md

@@ -0,0 +1,164 @@
+# HTML DSL
+
+Reference for the `h` package — Via's HTML builder.
+
+## Overview
+
+The `h` package wraps [gomponents](https://github.com/maragudk/gomponents) with a single interface:
+
+```go
+type H interface {
+    Render(w io.Writer) error
+}
+```
+
+Every element, attribute, and text node implements `H`. Build HTML by nesting function calls:
+
+```go
+import "github.com/ryanhamamura/via/h"
+
+h.Div(h.Class("card"),
+    h.H2(h.Text("Title")),
+    h.P(h.Textf("Count: %d", count)),
+    h.Button(h.Text("Click"), action.OnClick()),
+)
+```
+
+For cleaner templates, use a dot import:
+
+```go
+import . "github.com/ryanhamamura/via/h"
+
+Div(Class("card"),
+    H2(Text("Title")),
+    P(Textf("Count: %d", count)),
+    Button(Text("Click"), action.OnClick()),
+)
+```
+
+## Text Nodes
+
+| Function | Description |
+|----------|-------------|
+| `Text(s)` | Escaped text node |
+| `Textf(fmt, args...)` | Escaped text with `fmt.Sprintf` |
+| `Raw(s)` | Unescaped raw HTML — use for trusted content like SVG |
+| `Rawf(fmt, args...)` | Unescaped raw HTML with `fmt.Sprintf` |
+
+## Elements
+
+Every element function takes `...H` children (elements, attributes, and text nodes mixed together) except `Style(v string)` and `Title(v string)` which take a single string.
+
+### Document structure
+
+`HTML`, `Head`, `Body`, `Main`, `Header`, `Footer`, `Section`, `Article`, `Aside`, `Nav`, `Div`, `Span`
+
+### Headings
+
+`H1`, `H2`, `H3`, `H4`, `H5`, `H6`
+
+### Text
+
+`P`, `A`, `Strong`, `Em`, `B`, `I`, `U`, `S`, `Small`, `Mark`, `Del`, `Ins`, `Sub`, `Sup`, `Abbr`, `Cite`, `Code`, `Pre`, `Samp`, `Kbd`, `Var`, `Q`, `BlockQuote`, `Dfn`, `Wbr`, `Br`, `Hr`
+
+### Forms
+
+`Form`, `Input`, `Textarea`, `Select`, `Option`, `OptGroup`, `Button`, `Label`, `FieldSet`, `Legend`, `DataList`, `Meter`, `Progress`
+
+### Tables
+
+`Table`, `THead`, `TBody`, `TFoot`, `Tr`, `Th`, `Td`, `Caption`, `Col`, `ColGroup`
+
+### Lists
+
+`Ul`, `Ol`, `Li`, `Dl`, `Dt`, `Dd`
+
+### Media
+
+`Img`, `Audio`, `Video`, `Source`, `Picture`, `Canvas`, `IFrame`, `Embed`, `Object`
+
+### Other
+
+`Details`, `Summary`, `Dialog`, `Template`, `NoScript`, `Figure`, `FigCaption`, `Address`, `Time`, `Base`, `Link`, `Meta`, `Script`, `Area`
+
+### Special signatures
+
+| Function | Signature | Notes |
+|----------|-----------|-------|
+| `Style(v)` | `func Style(v string) H` | Inline `style` attribute, not a container element |
+| `StyleEl(children...)` | `func StyleEl(children ...H) H` | The `<style>` element as a container |
+| `Title(v)` | `func Title(v string) H` | Sets `<title>` text |
+
+## Attributes
+
+### Generic
+
+```go
+Attr("name", "value")     // name="value"
+Attr("disabled")           // boolean attribute (no value)
+```
+
+`Attr` with no value produces a boolean attribute. With one value, it produces a name-value pair. More than one value panics.
+
+### Named helpers
+
+| Function | HTML output |
+|----------|-------------|
+| `ID(v)` | `id="v"` |
+| `Class(v)` | `class="v"` |
+| `Href(v)` | `href="v"` |
+| `Src(v)` | `src="v"` |
+| `Type(v)` | `type="v"` |
+| `Value(v)` | `value="v"` |
+| `Placeholder(v)` | `placeholder="v"` |
+| `Rel(v)` | `rel="v"` |
+| `Role(v)` | `role="v"` |
+| `Data(name, v)` | `data-name="v"` (auto-prefixes `data-`) |
+
+## Conditional Rendering
+
+```go
+h.If(showError, h.P(h.Class("error"), h.Text("Something went wrong")))
+```
+
+Returns the node when `true`, `nil` (renders nothing) when `false`.
+
+## Datastar Helpers
+
+These produce attributes used by Datastar for client-side reactivity.
+
+| Function | Output | Description |
+|----------|--------|-------------|
+| `DataInit(expr)` | `data-init="expr"` | Initialize client-side state |
+| `DataEffect(expr)` | `data-effect="expr"` | Reactive side effect expression |
+| `DataIgnoreMorph()` | `data-ignore-morph` | Skip this element during DOM morph. See [SPA Navigation](routing-and-navigation.md#dataignoremorph) |
+| `DataViewTransition(name)` | `style="view-transition-name: name"` | Animate element across SPA navigations. See [View Transitions](routing-and-navigation.md#view-transitions) |
+
+> `DataViewTransition` sets the entire `style` attribute. If you also need other inline styles, include `view-transition-name` directly in a `Style()` call.
+
+## Utilities
+
+### HTML5
+
+Full HTML5 document template:
+
+```go
+h.HTML5(h.HTML5Props{
+    Title:       "My Page",
+    Description: "Page description",
+    Language:    "en",
+    Head:        []h.H{h.Link(h.Rel("stylesheet"), h.Href("/style.css"))},
+    Body:        []h.H{h.Div(h.Text("Hello"))},
+})
+```
+
+Via uses this internally to render the initial page document. You typically don't need it directly.
+
+### JoinAttrs
+
+Joins attribute values from child nodes by spaces:
+
+```go
+h.JoinAttrs("class", h.Class("card"), h.Class("active"))
+// → class="card active"
+```

docs/project-structure.md

@@ -0,0 +1,164 @@
+# Project Structure
+
+Via's closure-based page model pulls signals, actions, and views into a single scope — similar to Svelte's single-file components. This works well at every scale, but the way you organize files should evolve as your app grows.
+
+## Stage 1: Everything in main.go
+
+For small apps and prototypes, keep everything in `main.go`. This is the right choice when your app is under ~150 lines or has a single page.
+
+Within the file, follow this ordering convention inside each page:
+
+```go
+v.Page("/", func(c *via.Context) {
+    // State — plain Go variables and signals
+    count := 0
+    step := c.Signal(1)
+
+    // Actions — event handlers that mutate state
+    increment := c.Action(func() {
+        count += step.Int()
+        c.Sync()
+    })
+
+    // View — returns the HTML tree
+    c.View(func() h.H {
+        return h.Div(
+            h.P(h.Textf("Count: %d", count)),
+            h.Button(h.Text("+"), increment.OnClick()),
+        )
+    })
+})
+```
+
+State → signals → actions → view. This reads top-to-bottom and matches the data flow: state is declared, actions mutate it, the view renders it.
+
+The [counter](../internal/examples/counter/main.go) and [greeter](../internal/examples/greeter/main.go) examples use this layout.
+
+## Stage 2: Page per file
+
+When `main.go` has multiple pages or exceeds ~150 lines, extract each page into its own file as a package-level function.
+
+`main.go` becomes the app skeleton — setup, configuration, routes, and start:
+
+```go
+package main
+
+import (
+    "github.com/ryanhamamura/via"
+    "github.com/ryanhamamura/via/h"
+)
+
+func main() {
+    v := via.New()
+    v.Config(via.Options{
+        DocumentTitle: "My App",
+    })
+
+    v.AppendToHead(
+        h.Link(h.Rel("stylesheet"), h.Href("/css/pico.css")),
+    )
+
+    v.Page("/", HomePage)
+    v.Page("/chat", ChatPage)
+
+    v.Start()
+}
+```
+
+Each page lives in its own file with a descriptive name:
+
+```go
+// home.go
+package main
+
+import (
+    "github.com/ryanhamamura/via"
+    "github.com/ryanhamamura/via/h"
+)
+
+func HomePage(c *via.Context) {
+    greeting := c.Signal("Hello")
+
+    c.View(func() h.H {
+        return h.Div(h.P(h.Text(greeting.String())))
+    })
+}
+```
+
+Components follow the same pattern — keep them in the page file if single-use, or extract to their own file if reused across pages. Middleware goes in the same file as the route group it protects, or in `middleware.go` if shared.
+
+```
+myapp/
+├── main.go         # skeleton + routes
+├── home.go         # func HomePage(c *via.Context)
+├── chat.go         # func ChatPage(c *via.Context)
+└── middleware.go    # shared middleware
+```
+
+## Stage 3: Co-located CSS and shared types
+
+As pages accumulate custom styling, CSS strings in Go become hard to maintain — no syntax highlighting, no linting. Extract them to `.css` files alongside the pages they belong to and use `//go:embed` to load them.
+
+```go
+// main.go
+package main
+
+import "embed"
+
+//go:embed chat.css
+var chatCSS string
+
+func main() {
+    v := via.New()
+
+    v.AppendToHead(
+        h.Link(h.Rel("stylesheet"), h.Href("https://cdn.jsdelivr.net/npm/@picocss/pico@2/css/pico.min.css")),
+        h.StyleEl(h.Raw(chatCSS)),
+    )
+
+    // ...
+}
+```
+
+When multiple pages share the same structs, extract them to `types.go`. Framework-agnostic domain logic (helpers, dummy data, business rules) gets its own file too.
+
+```
+myapp/
+├── main.go         # skeleton + routes + global styles
+├── home.go
+├── chat.go
+├── chat.css        # //go:embed in main.go
+├── types.go        # shared types
+└── userdata.go     # helpers, dummy data
+```
+
+The [nats-chatroom](../internal/examples/nats-chatroom/) example demonstrates this layout.
+
+## CSS Approaches
+
+Via doesn't prescribe a CSS strategy. Two approaches work well:
+
+**CSS framework classes in Go code** — Use Pico, Tailwind, or similar. Classes go directly in the view via `h.Class()`. Good for rapid prototyping since there's nothing to extract.
+
+```go
+h.Div(h.Class("container"),
+    h.Button(h.Class("primary"), h.Text("Save")),
+)
+```
+
+**Co-located `.css` files with `//go:embed`** — Write plain CSS in a separate file, embed it, and inject via `AppendToHead`. You get syntax highlighting, linting, and clean separation.
+
+```go
+//go:embed chat.css
+var chatCSS string
+
+// in main():
+v.AppendToHead(h.StyleEl(h.Raw(chatCSS)))
+```
+
+Use a framework for quick prototypes and dashboards. Switch to co-located CSS files when you have significant custom styling or want tooling support.
+
+## Next Steps
+
+- [Getting Started](getting-started.md) — The core loop and configuration
+- [State and Interactivity](state-and-interactivity.md) — Signals, actions, components, validation

docs/pubsub-and-sessions.md

@@ -0,0 +1,251 @@
+# PubSub and Sessions
+
+Infrastructure for multi-user real-time communication and persistent state.
+
+## PubSub
+
+Via includes an embedded NATS server that starts automatically with `via.New()`. No external services required — pub/sub works out of the box.
+
+### Interface
+
+```go
+type PubSub interface {
+    Publish(subject string, data []byte) error
+    Subscribe(subject string, handler func(data []byte)) (Subscription, error)
+    Close() error
+}
+
+type Subscription interface {
+    Unsubscribe() error
+}
+```
+
+You can replace the default NATS with any backend implementing this interface via `Options.PubSub`.
+
+### Basic pub/sub
+
+```go
+// Subscribe to messages
+via.Subscribe(c, "chat.room.general", func(msg ChatMessage) {
+    messages = append(messages, msg)
+    c.Sync()
+})
+
+// Publish a message
+via.Publish(c, "chat.room.general", ChatMessage{
+    User:    username,
+    Message: text,
+    Time:    time.Now().UnixMilli(),
+})
+```
+
+The generic helpers `via.Publish[T]` and `via.Subscribe[T]` handle JSON marshaling/unmarshaling automatically. They are package-level functions (not methods) because Go doesn't support generic methods.
+
+Raw byte-level access is also available on the context:
+
+```go
+c.Publish("subject", []byte("raw data"))
+c.Subscribe("subject", func(data []byte) { /* ... */ })
+```
+
+### Auto-cleanup
+
+Subscriptions created via `c.Subscribe()` or `via.Subscribe()` are tracked on the context and automatically unsubscribed when:
+
+- The context is disposed (browser disconnects, tab closes)
+- SPA navigation moves to a different page
+
+You don't need to manually unsubscribe in normal usage.
+
+### Custom backend
+
+Replace the embedded NATS with your own PubSub implementation:
+
+```go
+v.Config(via.Options{
+    PubSub: myRedisBackend,
+})
+```
+
+This disables the embedded NATS server. The `NATSConn()` and `JetStream()` accessors will return nil.
+
+## JetStream
+
+NATS JetStream provides persistent, replayable message streams. Useful for chat history, event logs, or any scenario where new subscribers need to catch up on past messages.
+
+### Ensure a stream exists
+
+```go
+err := via.EnsureStream(v, via.StreamConfig{
+    Name:     "CHAT",
+    Subjects: []string{"chat.>"},
+    MaxMsgs:  1000,
+    MaxAge:   24 * time.Hour,
+})
+```
+
+| Field | Description |
+|-------|-------------|
+| `Name` | Stream name |
+| `Subjects` | NATS subjects to capture (supports wildcards: `>` matches all sub-levels) |
+| `MaxMsgs` | Maximum number of messages to retain |
+| `MaxAge` | Maximum age before messages are discarded |
+
+Call `EnsureStream` during app initialization, before `v.Start()`.
+
+### Replay history
+
+Retrieve recent messages from a stream:
+
+```go
+messages, err := via.ReplayHistory[ChatMessage](v, "chat.room.general", 50)
+```
+
+Returns up to the last `limit` messages on the subject, deserialized as `T`. Use this when a new user joins and needs to see recent history.
+
+### Direct NATS access
+
+For advanced use cases, access the NATS connection and JetStream context directly:
+
+```go
+nc := v.NATSConn()       // *nats.Conn, nil if custom PubSub
+js := v.JetStream()      // nats.JetStreamContext, nil if custom PubSub
+```
+
+### PubSub accessor
+
+Access the configured PubSub backend from the `V` instance:
+
+```go
+ps := v.PubSub() // via.PubSub interface, nil if none configured
+```
+
+## Sessions
+
+Via uses [SCS](https://github.com/alexedwards/scs) for cookie-based session management.
+
+### Setup with SQLite
+
+```go
+db, _ := sql.Open("sqlite3", "app.db")
+
+sm, _ := via.NewSQLiteSessionManager(db)
+sm.Lifetime = 24 * time.Hour
+sm.Cookie.SameSite = http.SameSiteLaxMode
+
+v.Config(via.Options{SessionManager: sm})
+```
+
+`NewSQLiteSessionManager` creates the `sessions` table and index if they don't exist. The returned `*scs.SessionManager` can be configured further (lifetime, cookie settings) before passing to `Config`.
+
+A default in-memory session manager is always available, even without explicit configuration. Use `NewSQLiteSessionManager` when you need sessions to survive server restarts.
+
+### Session API
+
+Access the session from any context:
+
+```go
+s := c.Session()
+```
+
+**Getters:**
+
+| Method | Return type |
+|--------|-------------|
+| `s.Get(key)` | `any` |
+| `s.GetString(key)` | `string` |
+| `s.GetInt(key)` | `int` |
+| `s.GetBool(key)` | `bool` |
+| `s.GetFloat64(key)` | `float64` |
+| `s.GetTime(key)` | `time.Time` |
+| `s.GetBytes(key)` | `[]byte` |
+
+**Pop** (get and delete — useful for flash messages):
+
+| Method | Return type |
+|--------|-------------|
+| `s.Pop(key)` | `any` |
+| `s.PopString(key)` | `string` |
+| `s.PopInt(key)` | `int` |
+| `s.PopBool(key)` | `bool` |
+| `s.PopFloat64(key)` | `float64` |
+| `s.PopTime(key)` | `time.Time` |
+| `s.PopBytes(key)` | `[]byte` |
+
+**Mutators:**
+
+| Method | Description |
+|--------|-------------|
+| `s.Set(key, val)` | Store a value |
+| `s.Delete(key)` | Remove a single key |
+| `s.Clear()` | Remove all session data |
+| `s.Destroy()` | Destroy the entire session (for logout) |
+| `s.RenewToken()` | Regenerate session ID (prevents session fixation — call after login) |
+
+**Introspection:**
+
+| Method | Description |
+|--------|-------------|
+| `s.Exists(key)` | True if key exists |
+| `s.Keys()` | All keys in the session |
+| `s.ID()` | Session token (cookie value) |
+
+All getters return zero values if the key doesn't exist or the session manager is nil.
+
+### Auth pattern
+
+A common login/logout flow using sessions and middleware:
+
+```go
+// Middleware
+func authRequired(c *via.Context, next func()) {
+    if c.Session().GetString("username") == "" {
+        c.Session().Set("flash", "Please log in first")
+        c.RedirectView("/login")
+        return
+    }
+    next()
+}
+
+// Login page
+v.Page("/login", func(c *via.Context) {
+    user := c.Signal("")
+    pass := c.Signal("")
+    flash := c.Session().PopString("flash")
+
+    login := c.Action(func() {
+        if authenticate(user.String(), pass.String()) {
+            c.Session().RenewToken()
+            c.Session().Set("username", user.String())
+            c.Redirect("/dashboard")
+        } else {
+            flash = "Invalid credentials"
+            c.Sync()
+        }
+    })
+
+    c.View(func() h.H {
+        return h.Form(login.OnSubmit(),
+            h.If(flash != "", h.P(h.Text(flash))),
+            h.Input(h.Type("text"), user.Bind(), h.Placeholder("Username")),
+            h.Input(h.Type("password"), pass.Bind(), h.Placeholder("Password")),
+            h.Button(h.Type("submit"), h.Text("Log In")),
+        )
+    })
+})
+
+// Protected pages
+protected := v.Group("", authRequired)
+protected.Page("/dashboard", dashboardHandler)
+
+// Logout action (inside a protected page)
+logout := c.Action(func() {
+    c.Session().Destroy()
+    c.Redirect("/login")
+})
+```
+
+Key points:
+- Call `RenewToken()` after login to prevent session fixation.
+- Use `PopString` for flash messages — they're read once then removed.
+- Use `RedirectView` in middleware, `Redirect` in actions. See the [gotcha in routing](routing-and-navigation.md#middleware).

docs/routing-and-navigation.md

@@ -0,0 +1,222 @@
+# Routing and Navigation
+
+Multi-page app structure, middleware, and Via's SPA navigation system.
+
+## Pages
+
+Register a page with a route pattern and an init function:
+
+```go
+v.Page("/", func(c *via.Context) {
+    c.View(func() h.H {
+        return h.H1(h.Text("Home"))
+    })
+})
+```
+
+Routes use Go's standard `net/http.ServeMux` patterns. Via registers each page as a `GET` handler.
+
+> **Gotcha:** Via runs every page init function at registration time (in a `defer/recover` block) to catch panics early. If your init function panics — e.g. by forgetting `c.View()` — the app crashes at startup, not at request time.
+
+## Path Parameters
+
+Use `{param}` syntax in route patterns:
+
+```go
+v.Page("/users/{id}/posts/{post_id}", func(c *via.Context) {
+    userID := c.GetPathParam("id")
+    postID := c.GetPathParam("post_id")
+
+    c.View(func() h.H {
+        return h.P(h.Textf("User %s, Post %s", userID, postID))
+    })
+})
+```
+
+`GetPathParam` returns an empty string if the parameter doesn't exist.
+
+## Route Groups
+
+Group pages under a shared prefix with shared middleware:
+
+```go
+admin := v.Group("/admin", authRequired)
+admin.Page("/dashboard", dashboardHandler) // route: /admin/dashboard
+admin.Page("/settings", settingsHandler)   // route: /admin/settings
+```
+
+### Nesting
+
+Groups nest — the child inherits the parent's prefix and middleware:
+
+```go
+admin := v.Group("/admin", authRequired)
+admin.Use(auditLog) // add middleware after creation
+
+superAdmin := admin.Group("/super", superAdminOnly)
+superAdmin.Page("/nuke", nukeHandler) // route: /admin/super/nuke
+// middleware order: global → authRequired → auditLog → superAdminOnly → handler
+```
+
+### Empty prefix
+
+Use an empty prefix when you need shared middleware without a path prefix:
+
+```go
+protected := v.Group("", authRequired)
+protected.Page("/dashboard", dashboardHandler) // route: /dashboard
+protected.Page("/profile", profileHandler)     // route: /profile
+```
+
+## Middleware
+
+```go
+type Middleware func(c *Context, next func())
+```
+
+Call `next()` to continue the chain. Return without calling `next()` to abort — but set a view first.
+
+```go
+func authRequired(c *via.Context, next func()) {
+    if c.Session().GetString("username") == "" {
+        c.Session().Set("flash", "Please log in")
+        c.RedirectView("/login")
+        return // don't call next — chain is aborted
+    }
+    next()
+}
+```
+
+> **Gotcha:** Use `c.RedirectView()` in middleware, not `c.Redirect()`. The SSE connection isn't open yet during the initial page load, so `Redirect()` (which sends a patch over SSE) won't work. `RedirectView()` sets the view to one that triggers a redirect once SSE connects.
+
+### Three levels
+
+| Level | Registration | Scope |
+|-------|-------------|-------|
+| Global | `v.Use(mw...)` | Every page |
+| Group | `v.Group(prefix, mw...)` or `g.Use(mw...)` | Pages in the group |
+| Action | `c.Action(fn, via.WithMiddleware(mw...))` | A single action endpoint |
+
+### Execution order
+
+Middleware runs in registration order: global first, then group, then the handler.
+
+```go
+v.Use(logger)                        // 1st
+admin := v.Group("/admin", auth)     // 2nd
+admin.Use(audit)                     // 3rd
+admin.Page("/x", handler)           // 4th
+// execution: logger → auth → audit → handler
+```
+
+Action-level middleware runs after CSRF validation and rate limiting, when the action endpoint is invoked.
+
+## SPA Navigation
+
+Via intercepts same-origin link clicks and navigates without a full page reload. The SSE connection persists, and the new page's view is morphed into the DOM with a view transition.
+
+### How it works
+
+1. `navigate.js` (embedded in every page) intercepts clicks on `<a>` elements.
+2. For same-origin links, it POSTs to `/_navigate` with the context ID, CSRF token, and target URL.
+3. The server calls `c.Navigate()`, which:
+   - Resets page state (stops intervals, unsubscribes PubSub, clears signals/actions/fields)
+   - Runs the target page's init function (with middleware) on the **same context**
+   - Pushes the new view via SSE with a view transition
+   - Updates the browser URL via `history.pushState()`
+
+### What gets cleaned up on navigate
+
+- Intervals stop (via `pageStopChan`)
+- PubSub subscriptions are unsubscribed
+- Signals, actions, and fields are cleared
+- The new page starts completely fresh
+
+The SSE connection and the context itself survive. This is what makes it an SPA — the existing stream is reused.
+
+### Layouts
+
+Define a layout to provide persistent chrome (nav bars, sidebars) that wraps every page:
+
+```go
+v.Layout(func(content func() h.H) h.H {
+    return h.Div(
+        h.Nav(
+            h.A(h.Href("/"), h.Text("Home")),
+            h.A(h.Href("/counter"), h.Text("Counter")),
+            h.A(h.Href("/clock"), h.Text("Clock")),
+        ),
+        h.Main(content()),
+    )
+})
+```
+
+The `content` parameter is the page's view function. During SPA navigation, the entire layout + content is re-rendered and morphed — Datastar's morph algorithm (idiomorph) efficiently updates only the changed parts, so the nav bar stays visually stable while the main content transitions.
+
+> **Gotcha:** Layout state does not persist across navigations in the way page state doesn't — the layout is re-rendered from scratch each time. If you need state that survives navigation (like a selected nav item), derive it from the current route rather than storing it in a variable.
+
+### View transitions
+
+Animate elements across page navigations using the browser View Transitions API:
+
+```go
+// On the home page:
+h.H1(h.Text("Home"), h.DataViewTransition("page-title"))
+
+// On the counter page:
+h.H1(h.Text("Counter"), h.DataViewTransition("page-title"))
+```
+
+Elements with matching `view-transition-name` values animate smoothly during SPA navigation. `DataViewTransition` sets the CSS `view-transition-name` as an inline `style` attribute. If the element also needs other inline styles, set `view-transition-name` directly in a `Style()` call instead.
+
+Via automatically includes the `<meta name="view-transition" content="same-origin">` tag to enable the API.
+
+### Opting out
+
+Add `data-via-no-boost` to links that should trigger a full page reload:
+
+```go
+h.A(h.Href("/"), h.Text("Full Reload"), h.Attr("data-via-no-boost"))
+```
+
+Links are also auto-ignored when:
+- They have a `target` attribute (e.g. `target="_blank"`)
+- Modifier keys are held (Ctrl, Meta, Shift, Alt)
+- The `href` starts with `#` or is cross-origin
+- The `href` is missing
+
+### Programmatic navigation
+
+Trigger SPA navigation from an action handler:
+
+```go
+goCounter := c.Action(func() {
+    c.Navigate("/counter", false)
+})
+```
+
+The second parameter controls history behavior: `false` for `pushState` (normal navigation), `true` for `replaceState` (back/forward).
+
+If the path doesn't match any registered route, `Navigate` falls back to `c.Redirect()` (full page navigation).
+
+### DataIgnoreMorph
+
+Prevent Datastar from overwriting an element during morph:
+
+```go
+h.Div(h.ID("toast-container"), h.DataIgnoreMorph())
+```
+
+The element and its subtree are skipped during DOM patches. Useful for elements with client-side state: a focused input, an animation, a third-party widget, or a toast notification container.
+
+## Custom HTTP Handlers
+
+Access the underlying mux for non-Via routes (APIs, webhooks, health checks):
+
+```go
+mux := v.HTTPServeMux()
+mux.HandleFunc("GET /api/health", healthHandler)
+mux.HandleFunc("POST /api/webhook", webhookHandler)
+```
+
+Register before `v.Start()`. These routes bypass Via's context/SSE system entirely.

docs/state-and-interactivity.md

@@ -0,0 +1,313 @@
+# State and Interactivity
+
+This is the core reactive model — signals, actions, views, components, and validation.
+
+## Context Lifecycle
+
+A `*Context` is created per browser visit. It holds all page state: signals, actions, fields, subscriptions, and the view function.
+
+```
+Browser hits page → new Context created → init function runs → HTML rendered
+                                                                    ↓
+                                        SSE connection opens ← browser loads page
+                                                ↓
+                        action fires → signals injected from browser → handler runs → Sync() → DOM patched
+```
+
+The context is disposed when the SSE connection closes (tab close, navigation away, network loss). A background reaper also cleans up contexts that never establish an SSE connection within `ContextTTL` (default 30s).
+
+During [SPA navigation](routing-and-navigation.md#spa-navigation), the context itself survives — only page-level state (signals, actions, fields, intervals, subscriptions) is reset. The SSE connection persists.
+
+## Signals
+
+Signals are reactive values synchronized between server and browser. Create one with an initial value:
+
+```go
+name := c.Signal("world")
+count := c.Signal(0)
+items := c.Signal([]string{"a", "b"})
+```
+
+### Reading values
+
+```go
+name.String()  // "world"
+count.Int()    // 0
+count.Bool()   // false (parses "true", "1", "yes", "on")
+```
+
+Signal values come from the browser. Before every action call, the browser sends all current signal values to the server. You always read the latest browser state inside action handlers.
+
+### Writing values
+
+```go
+name.SetValue("Via")
+c.SyncSignals()  // push only changed signals to browser
+// or
+c.Sync()  // re-render view AND push changed signals
+```
+
+`SetValue` marks the signal as changed. The change is not sent to the browser until you call `Sync()` or `SyncSignals()`.
+
+### Rendering in the view
+
+```go
+// Two-way binding on an input — browser edits update the signal
+h.Input(h.Type("text"), name.Bind())
+
+// Reactive text display — updates when the signal changes
+h.Span(name.Text())
+
+// Read value at render time — static until next Sync()
+h.P(h.Textf("Count: %d", count.Int()))
+```
+
+`Bind()` outputs a `data-bind` attribute for two-way binding. `Text()` outputs a `<span data-text="$signalID">` for reactive display.
+
+## Actions
+
+Actions are server-side event handlers. They run on the server when triggered by a browser event.
+
+```go
+submit := c.Action(func() {
+    // signals are already injected — read them here
+    fmt.Println(name.String())
+    count.SetValue(count.Int() + 1)
+    c.Sync()
+})
+```
+
+### Trigger methods
+
+Attach an action to a DOM event by calling a trigger method in the view:
+
+```go
+h.Button(h.Text("Submit"), submit.OnClick())
+h.Input(name.Bind(), submit.OnKeyDown("Enter"))
+h.Select(category.Bind(), filter.OnChange())
+h.Form(submit.OnSubmit())
+```
+
+Available triggers:
+
+| Method | Event | Notes |
+|--------|-------|-------|
+| `OnClick()` | `click` | |
+| `OnDblClick()` | `dblclick` | |
+| `OnChange()` | `change` | 200ms debounce |
+| `OnInput()` | `input` | No debounce |
+| `OnSubmit()` | `submit` | |
+| `OnKeyDown(key)` | `keydown` | Filtered by key name (e.g. `"Enter"`, `"Escape"`) |
+| `OnFocus()` | `focus` | |
+| `OnBlur()` | `blur` | |
+| `OnMouseEnter()` | `mouseenter` | |
+| `OnMouseLeave()` | `mouseleave` | |
+| `OnScroll()` | `scroll` | |
+
+### Trigger options
+
+Every trigger method accepts `ActionTriggerOption` values:
+
+```go
+// Set a signal value before the action fires
+submit.OnClick(via.WithSignal(mode, "delete"))
+submit.OnClick(via.WithSignalInt(page, 3))
+
+// Listen on window instead of the element
+submit.OnKeyDown("Escape", via.WithWindow())
+
+// Prevent browser default behavior
+submit.OnKeyDown("ArrowDown", via.WithPreventDefault())
+```
+
+### Multi-key dispatch
+
+`OnKeyDownMap` binds multiple keys to different actions in a single attribute:
+
+```go
+via.OnKeyDownMap(
+    via.KeyBind("w", move, via.WithSignal(dir, "up")),
+    via.KeyBind("s", move, via.WithSignal(dir, "down")),
+    via.KeyBind("ArrowUp", move, via.WithSignal(dir, "up"), via.WithPreventDefault()),
+    via.KeyBind("ArrowDown", move, via.WithSignal(dir, "down"), via.WithPreventDefault()),
+)
+```
+
+This produces a single `data-on:keydown__window` attribute. Place it on any element in the view.
+
+### Action options
+
+```go
+// Per-action rate limiting (overrides the context-level default)
+c.Action(handler, via.WithRateLimit(5, 10))
+
+// Per-action middleware (runs after CSRF and rate-limit checks)
+c.Action(handler, via.WithMiddleware(requireAdmin))
+```
+
+## Views and Sync
+
+Every page handler must call `c.View()` to define the UI:
+
+```go
+c.View(func() h.H {
+    return h.Div(
+        h.P(h.Textf("Hello, %s!", name.String())),
+    )
+})
+```
+
+> **Gotcha:** If you forget `c.View()`, the app panics at startup during route registration — not at request time.
+
+The view function is re-evaluated on every `c.Sync()`. The resulting HTML is pushed to the browser via SSE, where Datastar morphs the DOM.
+
+### Sync variants
+
+| Method | What it sends |
+|--------|---------------|
+| `c.Sync()` | Re-renders the view HTML **and** pushes changed signals |
+| `c.SyncSignals()` | Pushes only changed signals, no view re-render |
+| `c.SyncElements(elem...)` | Pushes specific HTML elements to merge into the DOM. Each element **must have an ID** matching an existing DOM element |
+| `c.ExecScript(js)` | Sends JavaScript for the browser to execute (auto-removed after execution) |
+
+Use `SyncSignals()` when only signal values changed and the view structure is the same. Use `SyncElements()` for targeted updates without re-rendering the entire view. Use `ExecScript()` to interact with client-side libraries (e.g. pushing data to a chart).
+
+## Components
+
+Extract reusable UI with `c.Component()`:
+
+```go
+func counterFn(c *via.Context) {
+    count := 0
+    step := c.Signal(1)
+
+    increment := c.Action(func() {
+        count += step.Int()
+        c.Sync()
+    })
+
+    c.View(func() h.H {
+        return h.Div(
+            h.P(h.Textf("Count: %d", count)),
+            h.Input(h.Type("number"), step.Bind()),
+            h.Button(h.Text("+"), increment.OnClick()),
+        )
+    })
+}
+
+// In a page:
+v.Page("/", func(c *via.Context) {
+    counter1 := c.Component(counterFn)
+    counter2 := c.Component(counterFn)
+
+    c.View(func() h.H {
+        return h.Div(
+            h.H2(h.Text("Counter 1")), counter1(),
+            h.H2(h.Text("Counter 2")), counter2(),
+        )
+    })
+})
+```
+
+Each component instance gets its own closure state, but signals, actions, and fields are registered on the parent page context. Components share the parent's SSE stream — `c.Sync()` from a component re-renders the entire page view.
+
+## Fields and Validation
+
+Fields are signals with validation rules. Use them for form inputs:
+
+```go
+username := c.Field("", via.Required(), via.MinLen(3), via.MaxLen(20))
+email := c.Field("", via.Required(), via.Email())
+age := c.Field("", via.Required(), via.Min(13), via.Max(120))
+website := c.Field("", via.Pattern(`^https?://`, "Must start with http:// or https://"))
+```
+
+### Built-in rules
+
+| Rule | Description |
+|------|-------------|
+| `Required(msg...)` | Rejects empty/whitespace-only values |
+| `MinLen(n, msg...)` | Minimum character count (Unicode-aware) |
+| `MaxLen(n, msg...)` | Maximum character count (Unicode-aware) |
+| `Min(n, msg...)` | Minimum numeric value (parsed as int) |
+| `Max(n, msg...)` | Maximum numeric value (parsed as int) |
+| `Email(msg...)` | Email format regex |
+| `Pattern(re, msg...)` | Custom regex |
+| `Custom(fn)` | `func(string) error` — return non-nil to fail |
+
+All rules accept an optional custom error message as the last argument.
+
+### Using fields in views and actions
+
+```go
+submit := c.Action(func() {
+    if !c.ValidateAll() {
+        c.Sync()
+        return
+    }
+    // Server-side validation
+    if userExists(username.String()) {
+        username.AddError("Username taken")
+        c.Sync()
+        return
+    }
+    createUser(username.String(), email.String())
+    c.ResetFields()
+    c.Sync()
+})
+
+c.View(func() h.H {
+    return h.Form(submit.OnSubmit(),
+        h.Input(h.Type("text"), username.Bind(), h.Placeholder("Username")),
+        h.If(username.HasError(), h.Small(h.Text(username.FirstError()))),
+
+        h.Input(h.Type("email"), email.Bind(), h.Placeholder("Email")),
+        h.If(email.HasError(), h.Small(h.Text(email.FirstError()))),
+
+        h.Button(h.Type("submit"), h.Text("Sign Up")),
+    )
+})
+```
+
+| Method | Description |
+|--------|-------------|
+| `field.Validate()` | Run rules, return true if all pass |
+| `field.HasError()` | True if any validation errors exist |
+| `field.FirstError()` | First error message, or `""` |
+| `field.Errors()` | All error messages |
+| `field.AddError(msg)` | Add a custom server-side error |
+| `field.ClearErrors()` | Remove all errors |
+| `field.Reset()` | Restore initial value and clear errors |
+| `c.ValidateAll(fields...)` | Validate given fields (or all if none specified). Does not short-circuit — all fields get validated so all errors are populated |
+| `c.ResetFields(fields...)` | Reset given fields (or all if none specified) |
+
+Fields embed `*signal`, so `Bind()`, `Text()`, `String()`, `Int()`, `Bool()`, `SetValue()`, and `ID()` all work.
+
+## OnInterval
+
+Run a function at regular intervals, tied to the page lifecycle:
+
+```go
+stop := c.OnInterval(time.Second, func() {
+    now = time.Now()
+    c.Sync()
+})
+```
+
+- Starts immediately — no separate start call needed.
+- Returns a `func()` that stops the interval (idempotent).
+- Automatically stops on context disposal (tab close) or SPA navigation away.
+- Call `c.Sync()` inside the handler to push updates to the browser.
+
+## Navigation Helpers
+
+| Method | Effect |
+|--------|--------|
+| `c.Redirect(url)` | Full page navigation. Disposes the context, browser loads a new page |
+| `c.Redirectf(fmt, args...)` | `Redirect` with `fmt.Sprintf` |
+| `c.RedirectView(url)` | Sets the view to trigger a redirect on SSE connect. Use in [middleware](routing-and-navigation.md#middleware) to abort the chain and redirect |
+| `c.ReplaceURL(url)` | Updates the browser URL bar without navigation. Useful for reflecting state in query params |
+| `c.ReplaceURLf(fmt, args...)` | `ReplaceURL` with `fmt.Sprintf` |
+| `c.Navigate(path, popstate)` | [SPA navigation](routing-and-navigation.md#spa-navigation). Resets page state, runs the target page handler on the same context, pushes the new view with a view transition |
+
+> **Gotcha:** In middleware, use `c.RedirectView()`, not `c.Redirect()`. `Redirect` sends a patch over SSE, but the SSE connection isn't established yet during the initial page load.

go.mod

@@ -38,6 +38,5 @@ require (
 	github.com/valyala/bytebufferpool v1.0.0 // indirect
 	golang.org/x/crypto v0.45.0 // indirect
 	golang.org/x/sys v0.38.0 // indirect
-	golang.org/x/time v0.14.0
 	gopkg.in/yaml.v3 v3.0.1 // indirect
 )

h/datastar.go

@@ -11,3 +11,11 @@ func DataEffect(expression string) H {
 func DataIgnoreMorph() H {
 	return Attr("data-ignore-morph")
 }
+
+// DataViewTransition sets the view-transition-name CSS property on an element
+// via an inline style. Elements with matching names animate between pages
+// during SPA navigation. If the element also needs other inline styles,
+// include view-transition-name directly in the Style() call instead.
+func DataViewTransition(name string) H {
+	return Attr("style", "view-transition-name: "+name)
+}

internal/examples/nats-chatroom/chat.css

@@ -0,0 +1,153 @@
+body { margin: 0; }
+
+/* Layout navbar */
+.app-nav {
+	display: flex;
+	align-items: center;
+	gap: 1rem;
+	padding: 0.5rem 1rem;
+	background: var(--pico-card-background-color);
+	border-bottom: 1px solid var(--pico-muted-border-color);
+}
+.app-nav .brand {
+	font-weight: 700;
+	text-decoration: none;
+	margin-right: auto;
+}
+.nav-links {
+	display: flex;
+	gap: 1rem;
+}
+.nav-links a {
+	text-decoration: none;
+	font-size: 0.875rem;
+}
+
+/* Chat page */
+.chat-page {
+	display: flex;
+	flex-direction: column;
+	height: calc(100vh - 53px);
+}
+nav[role="tab-control"] ul li a[aria-current="page"] {
+	background-color: var(--pico-primary-background);
+	color: var(--pico-primary-inverse);
+	border-bottom: 2px solid var(--pico-primary);
+}
+.chat-message { display: flex; gap: 0.75rem; margin-bottom: 0.5rem; }
+.avatar {
+	width: 2rem;
+	height: 2rem;
+	border-radius: 50%;
+	background: var(--pico-muted-border-color);
+	display: grid;
+	place-items: center;
+	font-size: 1.5rem;
+	flex-shrink: 0;
+}
+.avatar-lg {
+	width: 3rem;
+	height: 3rem;
+	font-size: 2rem;
+}
+.bubble { flex: 1; }
+.bubble p { margin: 0; }
+.chat-history {
+	flex: 1;
+	overflow-y: auto;
+	padding: 1rem;
+	padding-bottom: calc(88px + env(safe-area-inset-bottom));
+}
+.chat-input {
+	position: fixed;
+	left: 0;
+	right: 0;
+	bottom: 0;
+	background: var(--pico-background-color);
+	display: flex;
+	align-items: center;
+	gap: 0.75rem;
+	padding: 0.75rem 1rem calc(0.75rem + env(safe-area-inset-bottom));
+	border-top: 1px solid var(--pico-muted-border-color);
+}
+.chat-input fieldset {
+	flex: 1;
+	margin: 0;
+}
+
+/* NATS badge with status dot */
+.nats-badge {
+	background: #27AAE1;
+	color: white;
+	padding: 0.25rem 0.5rem;
+	border-radius: 4px;
+	font-size: 0.75rem;
+	margin-left: auto;
+	display: flex;
+	align-items: center;
+	gap: 0.375rem;
+}
+.status-dot {
+	width: 8px;
+	height: 8px;
+	border-radius: 50%;
+	background: #4ade80;
+	animation: pulse 2s ease-in-out infinite;
+}
+@keyframes pulse {
+	0%, 100% { opacity: 1; }
+	50% { opacity: 0.4; }
+}
+
+/* Profile page */
+.profile-page {
+	max-width: 480px;
+	margin: 0 auto;
+	padding: 2rem 1rem;
+}
+.profile-preview {
+	display: flex;
+	align-items: center;
+	gap: 0.75rem;
+	margin-bottom: 1.5rem;
+	padding: 1rem;
+	background: var(--pico-card-background-color);
+	border-radius: 8px;
+}
+.preview-name {
+	font-size: 1.125rem;
+	font-weight: 600;
+}
+.profile-form label {
+	display: block;
+	margin-bottom: 0.5rem;
+}
+.emoji-grid {
+	display: grid;
+	grid-template-columns: repeat(10, 1fr);
+	gap: 0.25rem;
+	margin-bottom: 1.5rem;
+}
+.emoji-option {
+	padding: 0.375rem;
+	font-size: 1.25rem;
+	border: 2px solid transparent;
+	border-radius: 8px;
+	background: none;
+	cursor: pointer;
+	text-align: center;
+}
+.emoji-option:hover {
+	background: var(--pico-muted-border-color);
+}
+.emoji-selected {
+	border-color: var(--pico-primary);
+	background: var(--pico-primary-focus);
+}
+.profile-actions {
+	display: flex;
+	gap: 0.75rem;
+}
+.field-error {
+	color: var(--pico-del-color);
+}

internal/examples/nats-chatroom/chat.go

@@ -0,0 +1,148 @@
+package main
+
+import (
+	"sync"
+	"time"
+
+	"github.com/ryanhamamura/via"
+	"github.com/ryanhamamura/via/h"
+)
+
+var (
+	WithSignal = via.WithSignal
+)
+
+func ChatPage(c *via.Context) {
+	currentUser := UserInfo{
+		Name:  c.Session().GetString(SessionKeyUsername),
+		Emoji: c.Session().GetString(SessionKeyEmoji),
+	}
+
+	roomSignal := c.Signal("Go")
+	statement := c.Signal("")
+
+	var messages []ChatMessage
+	var messagesMu sync.Mutex
+	currentRoom := "Go"
+
+	var currentSub via.Subscription
+
+	subscribeToRoom := func(room string) {
+		if currentSub != nil {
+			currentSub.Unsubscribe()
+		}
+
+		subject := "chat.room." + room
+
+		if hist, err := via.ReplayHistory[ChatMessage](v, subject, 50); err == nil {
+			messages = hist
+		}
+
+		sub, _ := via.Subscribe(c, subject, func(msg ChatMessage) {
+			messagesMu.Lock()
+			messages = append(messages, msg)
+			if len(messages) > 50 {
+				messages = messages[len(messages)-50:]
+			}
+			messagesMu.Unlock()
+			c.Sync()
+		})
+		currentSub = sub
+		currentRoom = room
+	}
+
+	subscribeToRoom("Go")
+
+	// Heartbeat — keeps connected indicator alive
+	connected := true
+	c.OnInterval(30*time.Second, func() {
+		connected = true
+		c.Sync()
+	})
+
+	switchRoom := c.Action(func() {
+		newRoom := roomSignal.String()
+		if newRoom != currentRoom {
+			messagesMu.Lock()
+			messages = nil
+			messagesMu.Unlock()
+			subscribeToRoom(newRoom)
+			c.Sync()
+		}
+	})
+
+	say := c.Action(func() {
+		msg := statement.String()
+		if msg == "" {
+			msg = randomDevQuote()
+		}
+		statement.SetValue("")
+
+		via.Publish(c, "chat.room."+currentRoom, ChatMessage{
+			User:    currentUser,
+			Message: msg,
+			Time:    time.Now().UnixMilli(),
+		})
+	})
+
+	c.View(func() h.H {
+		var tabs []h.H
+		for _, name := range roomNames {
+			isCurrent := name == currentRoom
+			tabs = append(tabs, h.Li(
+				h.A(
+					h.If(isCurrent, h.Attr("aria-current", "page")),
+					h.Text(name),
+					switchRoom.OnClick(WithSignal(roomSignal, name)),
+				),
+			))
+		}
+
+		messagesMu.Lock()
+		chatHistoryChildren := []h.H{
+			h.Class("chat-history"),
+			h.Script(h.Raw(`new MutationObserver(()=>scrollChatToBottom()).observe(document.querySelector('.chat-history'), {childList:true})`)),
+		}
+		for _, msg := range messages {
+			chatHistoryChildren = append(chatHistoryChildren,
+				h.Div(h.Class("chat-message"),
+					h.Div(h.Class("avatar"), h.Attr("title", msg.User.Name), h.Text(msg.User.Emoji)),
+					h.Div(h.Class("bubble"),
+						h.P(h.Text(msg.Message)),
+					),
+				),
+			)
+		}
+		messagesMu.Unlock()
+
+		_ = connected
+
+		return h.Div(h.Class("chat-page"),
+			h.Nav(
+				h.Attr("role", "tab-control"),
+				h.Ul(tabs...),
+				h.Span(h.Class("nats-badge"),
+					h.Span(h.Class("status-dot")),
+					h.Text("NATS"),
+				),
+			),
+			h.Div(chatHistoryChildren...),
+			h.Div(
+				h.Class("chat-input"),
+				h.DataIgnoreMorph(),
+				currentUser.Avatar(),
+				h.FieldSet(
+					h.Attr("role", "group"),
+					h.Input(
+						h.Type("text"),
+						h.Placeholder(currentUser.Name+" says..."),
+						statement.Bind(),
+						h.Attr("autofocus"),
+						say.OnKeyDown("Enter"),
+					),
+					h.Button(h.Text("Send"), say.OnClick()),
+				),
+			),
+		)
+	})
+}

internal/examples/nats-chatroom/main.go

@@ -1,50 +1,29 @@
 package main
 
 import (
-	"context"
+	_ "embed"
 	"log"
-	"math/rand"
-	"sync"
 	"time"
 
 	"github.com/ryanhamamura/via"
 	"github.com/ryanhamamura/via/h"
-	"github.com/ryanhamamura/via/vianats"
 )
 
-var (
-	WithSignal = via.WithSignal
-)
+//go:embed chat.css
+var chatCSS string
 
-// ChatMessage represents a message in a chat room
-type ChatMessage struct {
-	User    UserInfo `json:"user"`
-	Message string   `json:"message"`
-	Time    int64    `json:"time"`
-}
-
-// UserInfo identifies a chat participant
-type UserInfo struct {
-	Name  string `json:"name"`
-	Emoji string `json:"emoji"`
-}
-
-func (u *UserInfo) Avatar() h.H {
-	return h.Div(h.Class("avatar"), h.Attr("title", u.Name), h.Text(u.Emoji))
-}
-
-var roomNames = []string{"Go", "Rust", "Python", "JavaScript", "Clojure"}
+var v *via.V
 
 func main() {
-	ctx := context.Background()
+	v = via.New()
+	v.Config(via.Options{
+		DevMode:       true,
+		DocumentTitle: "NATS Chat",
+		LogLevel:      via.LogLevelInfo,
+		ServerAddress: ":7331",
+	})
 
-	ps, err := vianats.New(ctx, "./data/nats")
-	if err != nil {
-		log.Fatalf("Failed to start embedded NATS: %v", err)
-	}
-	defer ps.Close()
-
-	err = vianats.EnsureStream(ps, vianats.StreamConfig{
+	err := via.EnsureStream(v, via.StreamConfig{
 		Name:     "CHAT",
 		Subjects: []string{"chat.>"},
 		MaxMsgs:  1000,
@@ -54,73 +33,9 @@ func main() {
 		log.Fatalf("Failed to ensure stream: %v", err)
 	}
 
-	v := via.New()
-	v.Config(via.Options{
-		DevMode:       true,
-		DocumentTitle: "NATS Chat",
-		LogLevel:      via.LogLevelInfo,
-		ServerAddress: ":7331",
-		PubSub:        ps,
-	})
-
 	v.AppendToHead(
 		h.Link(h.Rel("stylesheet"), h.Href("https://cdn.jsdelivr.net/npm/@picocss/pico@2/css/pico.min.css")),
-		h.StyleEl(h.Raw(`
-			body { margin: 0; }
-			main {
-				display: flex;
-				flex-direction: column;
-				height: 100vh;
-			}
-			nav[role="tab-control"] ul li a[aria-current="page"] {
-				background-color: var(--pico-primary-background);
-				color: var(--pico-primary-inverse);
-				border-bottom: 2px solid var(--pico-primary);
-			}
-			.chat-message { display: flex; gap: 0.75rem; margin-bottom: 0.5rem; }
-			.avatar {
-				width: 2rem;
-				height: 2rem;
-				border-radius: 50%;
-				background: var(--pico-muted-border-color);
-				display: grid;
-				place-items: center;
-				font-size: 1.5rem;
-				flex-shrink: 0;
-			}
-			.bubble { flex: 1; }
-			.bubble p { margin: 0; }
-			.chat-history {
-				flex: 1;
-				overflow-y: auto;
-				padding: 1rem;
-				padding-bottom: calc(88px + env(safe-area-inset-bottom));
-			}
-			.chat-input {
-				position: fixed;
-				left: 0;
-				right: 0;
-				bottom: 0;
-				background: var(--pico-background-color);
-				display: flex;
-				align-items: center;
-				gap: 0.75rem;
-				padding: 0.75rem 1rem calc(0.75rem + env(safe-area-inset-bottom));
-				border-top: 1px solid var(--pico-muted-border-color);
-			}
-			.chat-input fieldset {
-				flex: 1;
-				margin: 0;
-			}
-			.nats-badge {
-				background: #27AAE1;
-				color: white;
-				padding: 0.25rem 0.5rem;
-				border-radius: 4px;
-				font-size: 0.75rem;
-				margin-left: auto;
-			}
-		`)),
+		h.StyleEl(h.Raw(chatCSS)),
 		h.Script(h.Raw(`
 			function scrollChatToBottom() {
 				const chatHistory = document.querySelector('.chat-history');
@@ -129,156 +44,38 @@ func main() {
 		`)),
 	)
 
-	v.Page("/", func(c *via.Context) {
-		currentUser := randUser()
-		roomSignal := c.Signal("Go")
-		statement := c.Signal("")
-
-		var messages []ChatMessage
-		var messagesMu sync.Mutex
-		currentRoom := "Go"
-
-		var currentSub via.Subscription
-
-		subscribeToRoom := func(room string) {
-			if currentSub != nil {
-				currentSub.Unsubscribe()
-			}
-
-			subject := "chat.room." + room
-
-			// Replay history from JetStream
-			if hist, err := vianats.ReplayHistory[ChatMessage](ps, subject, 50); err == nil {
-				messages = hist
-			}
-
-			sub, _ := via.Subscribe(c, subject, func(msg ChatMessage) {
-				messagesMu.Lock()
-				messages = append(messages, msg)
-				if len(messages) > 50 {
-					messages = messages[len(messages)-50:]
-				}
-				messagesMu.Unlock()
-				c.Sync()
-			})
-			currentSub = sub
-			currentRoom = room
-		}
-
-		subscribeToRoom("Go")
-
-		switchRoom := c.Action(func() {
-			newRoom := roomSignal.String()
-			if newRoom != currentRoom {
-				messagesMu.Lock()
-				messages = nil
-				messagesMu.Unlock()
-				subscribeToRoom(newRoom)
-				c.Sync()
-			}
-		})
-
-		say := c.Action(func() {
-			msg := statement.String()
-			if msg == "" {
-				msg = randomDevQuote()
-			}
-			statement.SetValue("")
-
-			via.Publish(c, "chat.room."+currentRoom, ChatMessage{
-				User:    currentUser,
-				Message: msg,
-				Time:    time.Now().UnixMilli(),
-			})
-		})
-
-		c.View(func() h.H {
-			var tabs []h.H
-			for _, name := range roomNames {
-				isCurrent := name == currentRoom
-				tabs = append(tabs, h.Li(
-					h.A(
-						h.If(isCurrent, h.Attr("aria-current", "page")),
-						h.Text(name),
-						switchRoom.OnClick(WithSignal(roomSignal, name)),
-					),
-				))
-			}
-
-			messagesMu.Lock()
-			chatHistoryChildren := []h.H{
-				h.Class("chat-history"),
-				h.Script(h.Raw(`new MutationObserver(()=>scrollChatToBottom()).observe(document.querySelector('.chat-history'), {childList:true})`)),
-			}
-			for _, msg := range messages {
-				chatHistoryChildren = append(chatHistoryChildren,
-					h.Div(h.Class("chat-message"),
-						h.Div(h.Class("avatar"), h.Attr("title", msg.User.Name), h.Text(msg.User.Emoji)),
-						h.Div(h.Class("bubble"),
-							h.P(h.Text(msg.Message)),
+	v.Layout(func(content func() h.H) h.H {
+		return h.Div(
+			h.Nav(h.Class("app-nav"),
+				h.A(h.Href("/"), h.Class("brand"), h.Text("NATS Chat")),
+				h.Div(h.Class("nav-links"),
+					h.A(h.Href("/"), h.Text("Chat")),
+					h.A(h.Href("/profile"), h.Text("Profile")),
 				),
 			),
-				)
-			}
-			messagesMu.Unlock()
-
-			return h.Main(h.Class("container"),
-				h.Nav(
-					h.Attr("role", "tab-control"),
-					h.Ul(tabs...),
-					h.Span(h.Class("nats-badge"), h.Text("NATS")),
-				),
-				h.Div(chatHistoryChildren...),
-				h.Div(
-					h.Class("chat-input"),
-					currentUser.Avatar(),
-					h.FieldSet(
-						h.Attr("role", "group"),
-						h.Input(
-							h.Type("text"),
-							h.Placeholder(currentUser.Name+" says..."),
-							statement.Bind(),
-							h.Attr("autofocus"),
-							say.OnKeyDown("Enter"),
-						),
-						h.Button(h.Text("Send"), say.OnClick()),
-					),
+			h.Main(h.Class("container"),
+				h.DataViewTransition("page-content"),
+				content(),
 			),
 		)
 	})
-	})
+
+	// Profile page — public, no auth required
+	v.Page("/profile", ProfilePage)
+
+	// Auth middleware — redirects to profile if no identity set
+	requireProfile := func(c *via.Context, next func()) {
+		if c.Session().GetString(SessionKeyUsername) == "" {
+			c.RedirectView("/profile")
+			return
+		}
+		next()
+	}
+
+	// Chat page — protected by profile middleware
+	protected := v.Group("", requireProfile)
+	protected.Page("/", ChatPage)
 
 	log.Println("Starting NATS chatroom on :7331 (embedded NATS server)")
 	v.Start()
 }
-
-func randUser() UserInfo {
-	adjectives := []string{"Happy", "Clever", "Brave", "Swift", "Gentle", "Wise", "Bold", "Calm", "Eager", "Fierce"}
-	animals := []string{"Panda", "Tiger", "Eagle", "Dolphin", "Fox", "Wolf", "Bear", "Hawk", "Otter", "Lion"}
-	emojis := []string{"🐼", "🐯", "🦅", "🐬", "🦊", "🐺", "🐻", "🦅", "🦦", "🦁"}
-
-	idx := rand.Intn(len(animals))
-	return UserInfo{
-		Name:  adjectives[rand.Intn(len(adjectives))] + " " + animals[idx],
-		Emoji: emojis[idx],
-	}
-}
-
-var quoteIdx = rand.Intn(len(devQuotes))
-var devQuotes = []string{
-	"Just use NATS.",
-	"Pub/sub all the things!",
-	"Messages are the new API.",
-	"JetStream for durability.",
-	"No more polling.",
-	"Event-driven architecture FTW.",
-	"Decouple everything.",
-	"NATS is fast.",
-	"Subjects are like topics.",
-	"Request-reply is cool.",
-}
-
-func randomDevQuote() string {
-	quoteIdx = (quoteIdx + 1) % len(devQuotes)
-	return devQuotes[quoteIdx]
-}

internal/examples/nats-chatroom/profile.go

@@ -0,0 +1,110 @@
+package main
+
+import (
+	"github.com/ryanhamamura/via"
+	"github.com/ryanhamamura/via/h"
+)
+
+func ProfilePage(c *via.Context) {
+	existingName := c.Session().GetString(SessionKeyUsername)
+	existingEmoji := c.Session().GetString(SessionKeyEmoji)
+	if existingEmoji == "" {
+		existingEmoji = emojiChoices[0]
+	}
+
+	nameField := c.Field(existingName,
+		via.Required("Display name is required"),
+		via.MinLen(2, "Must be at least 2 characters"),
+		via.MaxLen(20, "Must be at most 20 characters"),
+	)
+	selectedEmoji := c.Signal(existingEmoji)
+
+	saveToSession := func() bool {
+		if !c.ValidateAll() {
+			c.Sync()
+			return false
+		}
+		c.Session().Set(SessionKeyUsername, nameField.String())
+		c.Session().Set(SessionKeyEmoji, selectedEmoji.String())
+		return true
+	}
+
+	save := c.Action(func() {
+		saveToSession()
+	})
+
+	saveAndChat := c.Action(func() {
+		if saveToSession() {
+			c.Navigate("/", false)
+		}
+	})
+
+	c.View(func() h.H {
+		// Emoji grid
+		emojiGrid := []h.H{h.Class("emoji-grid")}
+		for _, emoji := range emojiChoices {
+			cls := "emoji-option"
+			if emoji == selectedEmoji.String() {
+				cls += " emoji-selected"
+			}
+			emojiGrid = append(emojiGrid,
+				h.Button(
+					h.Class(cls),
+					h.Type("button"),
+					h.Text(emoji),
+					save.OnClick(WithSignal(selectedEmoji, emoji)),
+				),
+			)
+		}
+
+		// Action buttons — "Start Chatting" only if editing is meaningful
+		actionButtons := []h.H{h.Class("profile-actions")}
+		if existingName != "" {
+			actionButtons = append(actionButtons,
+				h.Button(h.Text("Save"), save.OnClick(), h.Class("secondary")),
+			)
+		}
+		actionButtons = append(actionButtons,
+			h.Button(h.Text("Start Chatting"), saveAndChat.OnClick()),
+		)
+
+		previewName := nameField.String()
+		if previewName == "" {
+			previewName = "Your Name"
+		}
+
+		return h.Div(h.Class("profile-page"),
+			h.H2(h.Text("Your Profile"), h.DataViewTransition("page-title")),
+
+			// Live preview
+			h.Div(h.Class("profile-preview"),
+				h.Div(h.Class("avatar avatar-lg"), h.Text(selectedEmoji.String())),
+				h.Span(h.Class("preview-name"), h.Text(previewName)),
+			),
+
+			h.Div(h.Class("profile-form"),
+				// Name field
+				h.Label(h.Text("Display Name"),
+					h.Input(
+						h.Type("text"),
+						h.Placeholder("Enter a display name"),
+						nameField.Bind(),
+						h.Attr("autofocus"),
+						saveAndChat.OnKeyDown("Enter"),
+						h.If(nameField.HasError(), h.Attr("aria-invalid", "true")),
+					),
+					h.If(nameField.HasError(),
+						h.Small(h.Class("field-error"), h.Text(nameField.FirstError())),
+					),
+				),
+
+				// Emoji picker
+				h.Label(h.Text("Choose an Avatar")),
+				h.Div(emojiGrid...),
+
+				// Actions
+				h.Div(actionButtons...),
+			),
+		)
+	})
+}

internal/examples/nats-chatroom/types.go

@@ -0,0 +1,30 @@
+package main
+
+import "github.com/ryanhamamura/via/h"
+
+const (
+	SessionKeyUsername = "username"
+	SessionKeyEmoji    = "emoji"
+)
+
+type ChatMessage struct {
+	User    UserInfo `json:"user"`
+	Message string   `json:"message"`
+	Time    int64    `json:"time"`
+}
+
+type UserInfo struct {
+	Name  string `json:"name"`
+	Emoji string `json:"emoji"`
+}
+
+func (u *UserInfo) Avatar() h.H {
+	return h.Div(h.Class("avatar"), h.Attr("title", u.Name), h.Text(u.Emoji))
+}
+
+var roomNames = []string{"Go", "Rust", "Python", "JavaScript", "Clojure"}
+
+var emojiChoices = []string{
+	"🐼", "🐯", "🦅", "🐬", "🦊", "🐺", "🐻", "🦦", "🦁", "🐸",
+	"🦄", "🐙", "🦀", "🐝", "🦋", "🐢", "🦉", "🐳", "🦈", "🐧",
+}

internal/examples/nats-chatroom/userdata.go

@@ -0,0 +1,22 @@
+package main
+
+import "math/rand"
+
+var quoteIdx = rand.Intn(len(devQuotes))
+var devQuotes = []string{
+	"Just use NATS.",
+	"Pub/sub all the things!",
+	"Messages are the new API.",
+	"JetStream for durability.",
+	"No more polling.",
+	"Event-driven architecture FTW.",
+	"Decouple everything.",
+	"NATS is fast.",
+	"Subjects are like topics.",
+	"Request-reply is cool.",
+}
+
+func randomDevQuote() string {
+	quoteIdx = (quoteIdx + 1) % len(devQuotes)
+	return devQuotes[quoteIdx]
+}

internal/examples/pubsub-crud/main.go

@@ -1,7 +1,6 @@
 package main
 
 import (
-	"context"
 	"crypto/rand"
 	"fmt"
 	"html"
@@ -11,7 +10,6 @@ import (
 
 	"github.com/ryanhamamura/via"
 	"github.com/ryanhamamura/via/h"
-	"github.com/ryanhamamura/via/vianats"
 )
 
 var WithSignal = via.WithSignal
@@ -49,15 +47,15 @@ func findBookmark(id string) (Bookmark, int) {
 }
 
 func main() {
-	ctx := context.Background()
+	v := via.New()
+	v.Config(via.Options{
+		DevMode:       true,
+		DocumentTitle: "Bookmarks",
+		LogLevel:      via.LogLevelInfo,
+		ServerAddress: ":7331",
+	})
 
-	ps, err := vianats.New(ctx, "./data/nats")
-	if err != nil {
-		log.Fatalf("Failed to start embedded NATS: %v", err)
-	}
-	defer ps.Close()
-
-	err = vianats.EnsureStream(ps, vianats.StreamConfig{
+	err := via.EnsureStream(v, via.StreamConfig{
 		Name:     "BOOKMARKS",
 		Subjects: []string{"bookmarks.>"},
 		MaxMsgs:  1000,
@@ -67,15 +65,6 @@ func main() {
 		log.Fatalf("Failed to ensure stream: %v", err)
 	}
 
-	v := via.New()
-	v.Config(via.Options{
-		DevMode:       true,
-		DocumentTitle: "Bookmarks",
-		LogLevel:      via.LogLevelInfo,
-		ServerAddress: ":7331",
-		PubSub:        ps,
-	})
-
 	v.AppendToHead(
 		h.Link(h.Rel("stylesheet"), h.Href("https://cdn.jsdelivr.net/npm/daisyui@4/dist/full.min.css")),
 		h.Script(h.Src("https://cdn.tailwindcss.com")),

internal/examples/realtimechart/main.go

@@ -37,7 +37,9 @@ func main() {
 			return 1000 / time.Duration(refreshRate.Int()) * time.Millisecond
 		}
 
-		updateData := c.OnInterval(computedTickDuration(), func() {
+		var stopUpdate func()
+		startInterval := func() {
+			stopUpdate = c.OnInterval(computedTickDuration(), func() {
 				ts := time.Now().UnixMilli()
 				val := rand.ExpFloat64() * 10
 
@@ -48,18 +50,20 @@ func main() {
 				};
 			`, ts, val))
 			})
-		updateData.Start()
+		}
+		startInterval()
 
 		updateRefreshRate := c.Action(func() {
-			updateData.UpdateInterval(computedTickDuration())
+			stopUpdate()
+			startInterval()
 		})
 
 		toggleIsLive := c.Action(func() {
 			isLive = isLiveSig.Bool()
 			if isLive {
-				updateData.Start()
+				startInterval()
 			} else {
-				updateData.Stop()
+				stopUpdate()
 			}
 		})
 		c.View(func() h.H {

internal/examples/spa/main.go

@@ -0,0 +1,91 @@
+package main
+
+import (
+	"fmt"
+	"time"
+
+	"github.com/ryanhamamura/via"
+	. "github.com/ryanhamamura/via/h"
+)
+
+func main() {
+	v := via.New()
+	v.Config(via.Options{
+		DocumentTitle: "SPA Navigation",
+		ServerAddress: ":7331",
+	})
+
+	v.AppendToHead(
+		Raw(`<link rel="preconnect" href="https://fonts.googleapis.com">`),
+		Raw(`<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>`),
+		Raw(`<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;600;700&display=swap" rel="stylesheet">`),
+		Raw(`<style>body{font-family:'Inter',sans-serif;margin:0;background:#111;color:#eee}</style>`),
+	)
+
+	v.Layout(func(content func() H) H {
+		return Div(
+			Nav(
+				Style("display:flex;gap:1rem;padding:1rem;background:#222;"),
+				A(Href("/"), Text("Home"), Style("color:#fff")),
+				A(Href("/counter"), Text("Counter"), Style("color:#fff")),
+				A(Href("/clock"), Text("Clock"), Style("color:#fff")),
+				A(Href("https://github.com"), Text("GitHub (external)"), Style("color:#888")),
+				A(Href("/"), Text("Full Reload"), Attr("data-via-no-boost"), Style("color:#f88")),
+			),
+			Main(Style("padding:1rem"), content()),
+		)
+	})
+
+	// Home page
+	v.Page("/", func(c *via.Context) {
+		goCounter := c.Action(func() { c.Navigate("/counter", false) })
+
+		c.View(func() H {
+			return Div(
+				H1(Text("Home"), DataViewTransition("page-title")),
+				P(Text("Click the nav links above — no page reload, no white flash.")),
+				P(Text("Or navigate programmatically:")),
+				Button(Text("Go to Counter"), goCounter.OnClick()),
+			)
+		})
+	})
+
+	// Counter page — demonstrates signals and actions survive within a page,
+	// but reset on navigate away and back.
+	v.Page("/counter", func(c *via.Context) {
+		count := 0
+		increment := c.Action(func() { count++; c.Sync() })
+		goHome := c.Action(func() { c.Navigate("/", false) })
+
+		c.View(func() H {
+			return Div(
+				H1(Text("Counter"), DataViewTransition("page-title")),
+				P(Textf("Count: %d", count)),
+				Button(Text("+1"), increment.OnClick()),
+				Button(Text("Go Home"), goHome.OnClick(), Style("margin-left:0.5rem")),
+			)
+		})
+	})
+
+	// Clock page — demonstrates OnInterval cleanup on navigate.
+	v.Page("/clock", func(c *via.Context) {
+		now := time.Now().Format("15:04:05")
+		c.OnInterval(time.Second, func() {
+			now = time.Now().Format("15:04:05")
+			c.Sync()
+		})
+
+		c.View(func() H {
+			return Div(
+				H1(Text("Clock"), DataViewTransition("page-title")),
+				P(Text("This page has an OnInterval that ticks every second.")),
+				P(Textf("Current time: %s", now)),
+				P(Text("Navigate away and back — the old interval stops, a new one starts.")),
+				P(Textf("Proof this is a fresh page init: random = %d", time.Now().UnixNano()%1000)),
+			)
+		})
+	})
+
+	fmt.Println("SPA example running at http://localhost:7331")
+	v.Start()
+}

nats.go

@@ -0,0 +1,190 @@
+package via
+
+import (
+	"context"
+	"encoding/json"
+	"fmt"
+	"os"
+	"sync"
+	"time"
+
+	"github.com/delaneyj/toolbelt/embeddednats"
+	"github.com/nats-io/nats.go"
+)
+
+// defaultNATS is the process-scoped embedded NATS server.
+type defaultNATS struct {
+	server  *embeddednats.Server
+	nc      *nats.Conn
+	js      nats.JetStreamContext
+	cancel  context.CancelFunc
+	dataDir string
+}
+
+var (
+	sharedNATS     *defaultNATS
+	sharedNATSOnce sync.Once
+	sharedNATSErr  error
+)
+
+// getSharedNATS returns a process-level singleton embedded NATS server.
+// The server starts once and is reused across all V instances.
+func getSharedNATS() (*defaultNATS, error) {
+	sharedNATSOnce.Do(func() {
+		sharedNATS, sharedNATSErr = startDefaultNATS()
+	})
+	return sharedNATS, sharedNATSErr
+}
+
+func startDefaultNATS() (dn *defaultNATS, err error) {
+	defer func() {
+		if r := recover(); r != nil {
+			err = fmt.Errorf("nats server panic: %v", r)
+		}
+	}()
+
+	dataDir, err := os.MkdirTemp("", "via-nats-*")
+	if err != nil {
+		return nil, fmt.Errorf("create temp dir: %w", err)
+	}
+
+	ctx, cancel := context.WithCancel(context.Background())
+
+	ns, err := embeddednats.New(ctx, embeddednats.WithDirectory(dataDir))
+	if err != nil {
+		cancel()
+		os.RemoveAll(dataDir)
+		return nil, fmt.Errorf("start embedded nats: %w", err)
+	}
+	ns.WaitForServer()
+
+	nc, err := ns.Client()
+	if err != nil {
+		ns.Close()
+		cancel()
+		os.RemoveAll(dataDir)
+		return nil, fmt.Errorf("connect nats client: %w", err)
+	}
+
+	js, err := nc.JetStream()
+	if err != nil {
+		nc.Close()
+		ns.Close()
+		cancel()
+		os.RemoveAll(dataDir)
+		return nil, fmt.Errorf("init jetstream: %w", err)
+	}
+
+	return &defaultNATS{
+		server:  ns,
+		nc:      nc,
+		js:      js,
+		cancel:  cancel,
+		dataDir: dataDir,
+	}, nil
+}
+
+func (n *defaultNATS) Publish(subject string, data []byte) error {
+	return n.nc.Publish(subject, data)
+}
+
+func (n *defaultNATS) Subscribe(subject string, handler func(data []byte)) (Subscription, error) {
+	sub, err := n.nc.Subscribe(subject, func(msg *nats.Msg) {
+		handler(msg.Data)
+	})
+	if err != nil {
+		return nil, err
+	}
+	return sub, nil
+}
+
+// natsRef wraps a shared defaultNATS as a PubSub. Close is a no-op because
+// the underlying server is process-scoped and outlives individual V instances.
+type natsRef struct {
+	dn *defaultNATS
+}
+
+func (r *natsRef) Publish(subject string, data []byte) error {
+	return r.dn.Publish(subject, data)
+}
+
+func (r *natsRef) Subscribe(subject string, handler func(data []byte)) (Subscription, error) {
+	return r.dn.Subscribe(subject, handler)
+}
+
+func (r *natsRef) Close() error {
+	return nil
+}
+
+// NATSConn returns the underlying NATS connection from the built-in embedded
+// server, or nil if a custom PubSub backend is in use.
+func (v *V) NATSConn() *nats.Conn {
+	if v.defaultNATS != nil {
+		return v.defaultNATS.nc
+	}
+	return nil
+}
+
+// JetStream returns the JetStream context from the built-in embedded server,
+// or nil if a custom PubSub backend is in use.
+func (v *V) JetStream() nats.JetStreamContext {
+	if v.defaultNATS != nil {
+		return v.defaultNATS.js
+	}
+	return nil
+}
+
+// StreamConfig holds the parameters for creating or updating a JetStream stream.
+type StreamConfig struct {
+	Name     string
+	Subjects []string
+	MaxMsgs  int64
+	MaxAge   time.Duration
+}
+
+// EnsureStream creates or updates a JetStream stream matching cfg.
+func EnsureStream(v *V, cfg StreamConfig) error {
+	js := v.JetStream()
+	if js == nil {
+		return fmt.Errorf("jetstream not available")
+	}
+	_, err := js.AddStream(&nats.StreamConfig{
+		Name:      cfg.Name,
+		Subjects:  cfg.Subjects,
+		Retention: nats.LimitsPolicy,
+		MaxMsgs:   cfg.MaxMsgs,
+		MaxAge:    cfg.MaxAge,
+	})
+	return err
+}
+
+// ReplayHistory fetches the last limit messages from subject,
+// deserializing each as T. Returns an empty slice if nothing is available.
+func ReplayHistory[T any](v *V, subject string, limit int) ([]T, error) {
+	js := v.JetStream()
+	if js == nil {
+		return nil, fmt.Errorf("jetstream not available")
+	}
+	sub, err := js.SubscribeSync(subject, nats.DeliverAll(), nats.OrderedConsumer())
+	if err != nil {
+		return nil, err
+	}
+	defer sub.Unsubscribe()
+
+	var msgs []T
+	for {
+		raw, err := sub.NextMsg(200 * time.Millisecond)
+		if err != nil {
+			break
+		}
+		var msg T
+		if json.Unmarshal(raw.Data, &msg) == nil {
+			msgs = append(msgs, msg)
+		}
+	}
+
+	if limit > 0 && len(msgs) > limit {
+		msgs = msgs[len(msgs)-limit:]
+	}
+	return msgs, nil
+}

nats_test.go

@@ -2,7 +2,6 @@ package via
 
 import (
 	"sync"
-	"sync/atomic"
 	"testing"
 	"time"
 
@@ -11,88 +10,36 @@ import (
 	"github.com/stretchr/testify/require"
 )
 
-type mockHandler struct {
-	id     int64
-	fn     func([]byte)
-	active atomic.Bool
-}
-
-// mockPubSub implements PubSub for testing without NATS.
-type mockPubSub struct {
-	mu    sync.Mutex
-	subs  map[string][]*mockHandler
-	nextID atomic.Int64
-}
-
-func newMockPubSub() *mockPubSub {
-	return &mockPubSub{subs: make(map[string][]*mockHandler)}
-}
-
-func (m *mockPubSub) Publish(subject string, data []byte) error {
-	m.mu.Lock()
-	handlers := make([]*mockHandler, len(m.subs[subject]))
-	copy(handlers, m.subs[subject])
-	m.mu.Unlock()
-	for _, h := range handlers {
-		if h.active.Load() {
-			h.fn(data)
-		}
-	}
-	return nil
-}
-
-func (m *mockPubSub) Subscribe(subject string, handler func(data []byte)) (Subscription, error) {
-	m.mu.Lock()
-	defer m.mu.Unlock()
-	mh := &mockHandler{
-		id: m.nextID.Add(1),
-		fn: handler,
-	}
-	mh.active.Store(true)
-	m.subs[subject] = append(m.subs[subject], mh)
-	return &mockSub{handler: mh}, nil
-}
-
-func (m *mockPubSub) Close() error { return nil }
-
-type mockSub struct {
-	handler *mockHandler
-}
-
-func (s *mockSub) Unsubscribe() error {
-	s.handler.active.Store(false)
-	return nil
-}
-
 func TestPubSub_RoundTrip(t *testing.T) {
-	ps := newMockPubSub()
 	v := New()
-	v.Config(Options{PubSub: ps})
+	defer v.Shutdown()
 
 	var received []byte
-	var wg sync.WaitGroup
-	wg.Add(1)
+	done := make(chan struct{})
 
 	c := newContext("test-ctx", "/", v)
 	c.View(func() h.H { return h.Div() })
 
 	_, err := c.Subscribe("test.topic", func(data []byte) {
 		received = data
-		wg.Done()
+		close(done)
 	})
 	require.NoError(t, err)
 
 	err = c.Publish("test.topic", []byte("hello"))
 	require.NoError(t, err)
 
-	wg.Wait()
+	select {
+	case <-done:
+	case <-time.After(2 * time.Second):
+		t.Fatal("timed out waiting for message")
+	}
 	assert.Equal(t, []byte("hello"), received)
 }
 
 func TestPubSub_MultipleSubscribers(t *testing.T) {
-	ps := newMockPubSub()
 	v := New()
-	v.Config(Options{PubSub: ps})
+	defer v.Shutdown()
 
 	var mu sync.Mutex
 	var results []string
@@ -119,7 +66,17 @@ func TestPubSub_MultipleSubscribers(t *testing.T) {
 	})
 
 	c1.Publish("broadcast", []byte("msg"))
+
+	done := make(chan struct{})
+	go func() {
 		wg.Wait()
+		close(done)
+	}()
+	select {
+	case <-done:
+	case <-time.After(2 * time.Second):
+		t.Fatal("timed out waiting for messages")
+	}
 
 	assert.Len(t, results, 2)
 	assert.Contains(t, results, "c1:msg")
@@ -127,9 +84,8 @@ func TestPubSub_MultipleSubscribers(t *testing.T) {
 }
 
 func TestPubSub_SubscriptionCleanupOnDispose(t *testing.T) {
-	ps := newMockPubSub()
 	v := New()
-	v.Config(Options{PubSub: ps})
+	defer v.Shutdown()
 
 	c := newContext("cleanup-ctx", "/", v)
 	c.View(func() h.H { return h.Div() })
@@ -144,9 +100,8 @@ func TestPubSub_SubscriptionCleanupOnDispose(t *testing.T) {
 }
 
 func TestPubSub_ManualUnsubscribe(t *testing.T) {
-	ps := newMockPubSub()
 	v := New()
-	v.Config(Options{PubSub: ps})
+	defer v.Shutdown()
 
 	c := newContext("unsub-ctx", "/", v)
 	c.View(func() h.H { return h.Div() })
@@ -160,28 +115,13 @@ func TestPubSub_ManualUnsubscribe(t *testing.T) {
 	sub.Unsubscribe()
 
 	c.Publish("topic", []byte("ignored"))
-	time.Sleep(10 * time.Millisecond)
+	time.Sleep(50 * time.Millisecond)
 	assert.False(t, called)
 }
 
-func TestPubSub_NoOpWhenNotConfigured(t *testing.T) {
-	v := New()
-
-	c := newContext("noop-ctx", "/", v)
-	c.View(func() h.H { return h.Div() })
-
-	err := c.Publish("topic", []byte("data"))
-	assert.Error(t, err)
-
-	sub, err := c.Subscribe("topic", func(data []byte) {})
-	assert.Error(t, err)
-	assert.Nil(t, sub)
-}
-
 func TestPubSub_NoOpDuringPanicCheck(t *testing.T) {
-	ps := newMockPubSub()
 	v := New()
-	v.Config(Options{PubSub: ps})
+	defer v.Shutdown()
 
 	// Panic-check context has id=""
 	c := newContext("", "/", v)

navigate.js

@@ -0,0 +1,51 @@
+(function() {
+  const meta = document.querySelector('meta[data-signals]');
+  if (!meta) return;
+  const raw = meta.getAttribute('data-signals');
+  const parsed = JSON.parse(raw.replace(/'/g, '"'));
+  const ctxID = parsed['via-ctx'];
+  const csrf = parsed['via-csrf'];
+  if (!ctxID || !csrf) return;
+
+  function navigate(url, popstate) {
+    const params = new URLSearchParams({
+      'via-ctx': ctxID,
+      'via-csrf': csrf,
+      'url': url,
+    });
+    if (popstate) params.set('popstate', '1');
+    fetch('/_navigate', {
+      method: 'POST',
+      headers: {'Content-Type': 'application/x-www-form-urlencoded'},
+      body: params.toString()
+    }).then(function(res) {
+      if (!res.ok) window.location.href = url;
+    }).catch(function() {
+      window.location.href = url;
+    });
+  }
+
+  document.addEventListener('click', function(e) {
+    var el = e.target;
+    while (el && el.tagName !== 'A') el = el.parentElement;
+    if (!el) return;
+    if (e.ctrlKey || e.metaKey || e.shiftKey || e.altKey) return;
+    if (el.hasAttribute('target')) return;
+    if (el.hasAttribute('data-via-no-boost')) return;
+    var href = el.getAttribute('href');
+    if (!href || href.startsWith('#')) return;
+    try {
+      var url = new URL(href, window.location.origin);
+      if (url.origin !== window.location.origin) return;
+      e.preventDefault();
+      navigate(url.pathname + url.search + url.hash);
+    } catch(_) {}
+  });
+
+  var ready = false;
+  window.addEventListener('popstate', function() {
+    if (!ready) return;
+    navigate(window.location.pathname + window.location.search + window.location.hash, true);
+  });
+  setTimeout(function() { ready = true; }, 0);
+})();

pubsub.go

@@ -1,7 +1,8 @@
 package via
 
 // PubSub is an interface for publish/subscribe messaging backends.
-// The vianats sub-package provides an embedded NATS implementation.
+// By default, New() starts an embedded NATS server. Supply a custom
+// implementation via Config(Options{PubSub: yourBackend}) to override.
 type PubSub interface {
 	Publish(subject string, data []byte) error
 	Subscribe(subject string, handler func(data []byte)) (Subscription, error)

pubsub_helpers_test.go

@@ -1,8 +1,8 @@
 package via
 
 import (
-	"sync"
 	"testing"
+	"time"
 
 	"github.com/ryanhamamura/via/h"
 	"github.com/stretchr/testify/assert"
@@ -10,9 +10,8 @@ import (
 )
 
 func TestPublishSubscribe_RoundTrip(t *testing.T) {
-	ps := newMockPubSub()
 	v := New()
-	v.Config(Options{PubSub: ps})
+	defer v.Shutdown()
 
 	type event struct {
 		Name  string `json:"name"`
@@ -20,30 +19,32 @@ func TestPublishSubscribe_RoundTrip(t *testing.T) {
 	}
 
 	var got event
-	var wg sync.WaitGroup
-	wg.Add(1)
+	done := make(chan struct{})
 
 	c := newContext("typed-ctx", "/", v)
 	c.View(func() h.H { return h.Div() })
 
 	_, err := Subscribe(c, "events", func(e event) {
 		got = e
-		wg.Done()
+		close(done)
 	})
 	require.NoError(t, err)
 
 	err = Publish(c, "events", event{Name: "click", Count: 42})
 	require.NoError(t, err)
 
-	wg.Wait()
+	select {
+	case <-done:
+	case <-time.After(2 * time.Second):
+		t.Fatal("timed out waiting for message")
+	}
 	assert.Equal(t, "click", got.Name)
 	assert.Equal(t, 42, got.Count)
 }
 
 func TestSubscribe_SkipsBadJSON(t *testing.T) {
-	ps := newMockPubSub()
 	v := New()
-	v.Config(Options{PubSub: ps})
+	defer v.Shutdown()
 
 	type msg struct {
 		Text string `json:"text"`
@@ -62,5 +63,6 @@ func TestSubscribe_SkipsBadJSON(t *testing.T) {
 	err = c.Publish("topic", []byte("not json"))
 	require.NoError(t, err)
 
+	time.Sleep(50 * time.Millisecond)
 	assert.False(t, called)
 }

routine.go

@@ -1,76 +1,34 @@
 package via
 
 import (
-	"sync"
 	"sync/atomic"
 	"time"
 )
 
-// OnIntervalRoutine allows for defining concurrent goroutines safely. Goroutines started by *OnIntervalRoutine
-// are tied to the *Context lifecycle.
-type OnIntervalRoutine struct {
-	mu             sync.RWMutex
-	ctxDisposed    chan struct{}
-	localInterrupt chan struct{}
-	isRunning      atomic.Bool
-	routineFn      func()
-	tckDuration    time.Duration
-	updateTkrChan  chan time.Duration
-}
+func newOnInterval(ctxDisposedChan, pageStopChan chan struct{}, duration time.Duration, handler func()) func() {
+	localInterrupt := make(chan struct{})
+	var stopped atomic.Bool
 
-// UpdateInterval sets a new interval duration for the internal *time.Ticker. If the provided
-// duration is equal of less than 0, UpdateInterval does nothing.
-func (r *OnIntervalRoutine) UpdateInterval(d time.Duration) {
-	r.mu.Lock()
-	defer r.mu.Unlock()
-	r.tckDuration = d
-	r.updateTkrChan <- d
-
-}
-
-// Start executes the predifined goroutine. If no predifined goroutine exists, or it already
-// started, Start does nothing.
-func (r *OnIntervalRoutine) Start() {
-	if !r.isRunning.CompareAndSwap(false, true) || r.routineFn == nil {
-		return
-	}
-	go r.routineFn()
-}
-
-// Stop interrupts the predifined goroutine. If no predifined goroutine exists, or it already
-// ustopped, Stop does nothing.
-func (r *OnIntervalRoutine) Stop() {
-	if !r.isRunning.CompareAndSwap(true, false) || r.routineFn == nil {
-		return
-	}
-	r.localInterrupt <- struct{}{}
-}
-
-func newOnIntervalRoutine(ctxDisposedChan chan struct{},
-	duration time.Duration, handler func()) *OnIntervalRoutine {
-	r := &OnIntervalRoutine{
-		ctxDisposed:    ctxDisposedChan,
-		localInterrupt: make(chan struct{}),
-		updateTkrChan:  make(chan time.Duration),
-	}
-	r.tckDuration = duration
-	r.routineFn = func() {
-		r.mu.RLock()
-		tkr := time.NewTicker(r.tckDuration)
-		r.mu.RUnlock()
-		defer tkr.Stop() // clean up the ticker when routine stops
+	go func() {
+		tkr := time.NewTicker(duration)
+		defer tkr.Stop()
 		for {
 			select {
-			case <-r.ctxDisposed: // dispose of the routine when ctx is disposed
+			case <-ctxDisposedChan:
 				return
-			case <-r.localInterrupt: // dispose of the routine on interrupt signal
+			case <-pageStopChan:
+				return
+			case <-localInterrupt:
 				return
-			case d := <-r.updateTkrChan:
-				tkr.Reset(d)
 			case <-tkr.C:
 				handler()
 			}
 		}
+	}()
+
+	return func() {
+		if stopped.CompareAndSwap(false, true) {
+			close(localInterrupt)
+		}
 	}
-	return r
 }

via.go

@@ -35,6 +35,9 @@ import (
 //go:embed datastar.js
 var datastarJS []byte
 
+//go:embed navigate.js
+var navigateJS []byte
+
 // V is the root application.
 // It manages page routing, user sessions, and SSE connections for live updates.
 type V struct {
@@ -47,14 +50,17 @@ type V struct {
 	documentHeadIncludes []h.H
 	documentFootIncludes []h.H
 	devModePageInitFnMap map[string]func(*Context)
+	pageRegistry         map[string]func(*Context)
 	sessionManager       *scs.SessionManager
 	pubsub               PubSub
+	defaultNATS          *defaultNATS
 	actionRateLimit      RateLimitConfig
 	datastarPath         string
 	datastarContent      []byte
 	datastarOnce         sync.Once
 	reaperStop           chan struct{}
 	middleware           []Middleware
+	layout               func(func() h.H) h.H
 }
 
 func (v *V) logEvent(evt *zerolog.Event, c *Context) *zerolog.Event {
@@ -130,8 +136,12 @@ func (v *V) Config(cfg Options) {
 		v.datastarPath = cfg.DatastarPath
 	}
 	if cfg.PubSub != nil {
+		v.defaultNATS = nil
 		v.pubsub = cfg.PubSub
 	}
+	if cfg.ContextSuspendAfter != 0 {
+		v.cfg.ContextSuspendAfter = cfg.ContextSuspendAfter
+	}
 	if cfg.ContextTTL != 0 {
 		v.cfg.ContextTTL = cfg.ContextTTL
 	}
@@ -194,6 +204,7 @@ func (v *V) page(route string, raw, wrapped func(*Context)) {
 		c.stopAllRoutines()
 	}()
 
+	v.pageRegistry[route] = wrapped
 	if v.cfg.DevMode {
 		v.devModePageInitFnMap[route] = wrapped
 	}
@@ -221,6 +232,8 @@ func (v *V) page(route string, raw, wrapped func(*Context)) {
 			h.Meta(h.Data("init", "@get('/_sse')")),
 			h.Meta(h.Data("init", fmt.Sprintf(`window.addEventListener('beforeunload', (evt) => {
 			navigator.sendBeacon('/_session/close', '%s');});`, c.id))),
+			h.Meta(h.Attr("name", "view-transition"), h.Attr("content", "same-origin")),
+			h.Script(h.Raw(string(navigateJS))),
 		)
 
 		bodyElements := []h.H{c.view()}
@@ -282,9 +295,16 @@ func (v *V) startReaper() {
 		return
 	}
 	if ttl == 0 {
-		ttl = 30 * time.Second
+		ttl = time.Hour
 	}
-	interval := ttl / 3
+	suspendAfter := v.cfg.ContextSuspendAfter
+	if suspendAfter == 0 {
+		suspendAfter = 15 * time.Minute
+	}
+	if suspendAfter > ttl {
+		suspendAfter = ttl
+	}
+	interval := suspendAfter / 3
 	if interval < 5*time.Second {
 		interval = 5 * time.Second
 	}
@@ -297,24 +317,39 @@ func (v *V) startReaper() {
 			case <-v.reaperStop:
 				return
 			case <-ticker.C:
-				v.reapOrphanedContexts(ttl)
+				v.reapOrphanedContexts(suspendAfter, ttl)
 			}
 		}
 	}()
 }
 
-func (v *V) reapOrphanedContexts(ttl time.Duration) {
+func (v *V) reapOrphanedContexts(suspendAfter, ttl time.Duration) {
 	now := time.Now()
 	v.contextRegistryMutex.RLock()
-	var orphans []*Context
+	var toSuspend, toReap []*Context
 	for _, c := range v.contextRegistry {
-		if !c.sseConnected.Load() && now.Sub(c.createdAt) > ttl {
-			orphans = append(orphans, c)
+		if c.sseConnected.Load() {
+			continue
+		}
+		var disconnectedFor time.Duration
+		if dc := c.sseDisconnectedAt.Load(); dc != nil {
+			disconnectedFor = now.Sub(*dc)
+		} else {
+			disconnectedFor = now.Sub(c.createdAt)
+		}
+		if disconnectedFor > ttl {
+			toReap = append(toReap, c)
+		} else if disconnectedFor > suspendAfter && !c.suspended.Load() {
+			toSuspend = append(toSuspend, c)
 		}
 	}
 	v.contextRegistryMutex.RUnlock()
 
-	for _, c := range orphans {
+	for _, c := range toSuspend {
+		v.logInfo(c, "suspending context (no SSE connection after %s)", suspendAfter)
+		c.suspend()
+	}
+	for _, c := range toReap {
 		v.logInfo(c, "reaping orphaned context (no SSE connection after %s)", ttl)
 		v.cleanupCtx(c)
 	}
@@ -379,6 +414,7 @@ func (v *V) Shutdown() {
 			v.logErr(nil, "pubsub close error: %v", err)
 		}
 	}
+	v.defaultNATS = nil
 
 	v.logInfo(nil, "shutdown complete")
 }
@@ -408,6 +444,11 @@ func (v *V) HTTPServeMux() *http.ServeMux {
 	return v.mux
 }
 
+// PubSub returns the configured PubSub backend, or nil if none is set.
+func (v *V) PubSub() PubSub {
+	return v.pubsub
+}
+
 // Static serves files from a filesystem directory at the given URL prefix.
 //
 // Example:
@@ -554,6 +595,7 @@ type patchType int
 
 const (
 	patchTypeElements = iota
+	patchTypeElementsWithVT
 	patchTypeSignals
 	patchTypeScript
 	patchTypeRedirect
@@ -574,6 +616,7 @@ func New() *V {
 		logger:               newConsoleLogger(zerolog.InfoLevel),
 		contextRegistry:      make(map[string]*Context),
 		devModePageInitFnMap: make(map[string]func(*Context)),
+		pageRegistry:         make(map[string]func(*Context)),
 		sessionManager:       scs.New(),
 		datastarPath:         "/_datastar.js",
 		datastarContent:      datastarJS,
@@ -596,7 +639,9 @@ func New() *V {
 		}
 		c, err := v.getCtx(cID)
 		if err != nil {
-			v.logErr(nil, "sse stream failed to start: %v", err)
+			v.logInfo(nil, "context expired, reloading client: %s", cID)
+			sse := datastar.NewSSE(w, r)
+			sse.ExecuteScript("window.location.reload()")
 			return
 		}
 		c.reqCtx = r.Context()
@@ -606,16 +651,40 @@ func New() *V {
 		// use last-event-id to tell if request is a sse reconnect
 		sse.Send(datastar.EventTypePatchElements, []string{}, datastar.WithSSEEventId("via"))
 
+		// Drain stale patches on reconnect so the client gets fresh state
+		if c.sseDisconnectedAt.Load() != nil {
+			for {
+				select {
+				case <-c.patchChan:
+				default:
+					goto drained
+				}
+			}
+		drained:
+		}
 		c.sseConnected.Store(true)
+		c.sseDisconnectedAt.Store(nil)
 		v.logDebug(c, "SSE connection established")
 
+		if c.suspended.Load() {
+			c.navMu.Lock()
+			c.suspended.Store(false)
+			if initFn := v.pageRegistry[c.route]; initFn != nil {
+				v.logInfo(c, "resuming suspended context")
+				initFn(c)
+			}
+			c.navMu.Unlock()
+		}
+
 		go c.Sync()
 
 		for {
 			select {
 			case <-sse.Context().Done():
 				v.logDebug(c, "SSE connection ended")
-				v.cleanupCtx(c)
+				c.sseConnected.Store(false)
+				now := time.Now()
+				c.sseDisconnectedAt.Store(&now)
 				return
 			case <-c.ctxDisposedChan:
 				v.logDebug(c, "context disposed, closing SSE")
@@ -624,11 +693,16 @@ func New() *V {
 				switch patch.typ {
 				case patchTypeElements:
 					if err := sse.PatchElements(patch.content); err != nil {
-						// Only log if connection wasn't closed (avoids noise during shutdown/tests)
 						if sse.Context().Err() == nil {
 							v.logErr(c, "PatchElements failed: %v", err)
 						}
 					}
+				case patchTypeElementsWithVT:
+					if err := sse.PatchElements(patch.content, datastar.WithViewTransitions()); err != nil {
+						if sse.Context().Err() == nil {
+							v.logErr(c, "PatchElements (view transition) failed: %v", err)
+						}
+					}
 				case patchTypeSignals:
 					if err := sse.PatchSignals([]byte(patch.content)); err != nil {
 						if sse.Context().Err() == nil {
@@ -708,6 +782,39 @@ func New() *V {
 		}
 	})
 
+	v.mux.HandleFunc("POST /_navigate", func(w http.ResponseWriter, r *http.Request) {
+		_ = r.ParseForm()
+		cID := r.FormValue("via-ctx")
+		csrfToken := r.FormValue("via-csrf")
+		navURL := r.FormValue("url")
+		popstate := r.FormValue("popstate") == "1"
+
+		if cID == "" || navURL == "" || !strings.HasPrefix(navURL, "/") {
+			http.Error(w, "missing or invalid parameters", http.StatusBadRequest)
+			return
+		}
+		c, err := v.getCtx(cID)
+		if err != nil {
+			v.logErr(nil, "navigate failed: %v", err)
+			http.Error(w, "context not found", http.StatusNotFound)
+			return
+		}
+		if subtle.ConstantTimeCompare([]byte(csrfToken), []byte(c.csrfToken)) != 1 {
+			v.logWarn(c, "navigate rejected: invalid CSRF token")
+			http.Error(w, "invalid CSRF token", http.StatusForbidden)
+			return
+		}
+		if c.actionLimiter != nil && !c.actionLimiter.Allow() {
+			v.logWarn(c, "navigate rate limited")
+			http.Error(w, "rate limited", http.StatusTooManyRequests)
+			return
+		}
+		c.reqCtx = r.Context()
+		v.logDebug(c, "SPA navigate to %s", navURL)
+		c.Navigate(navURL, popstate)
+		w.WriteHeader(http.StatusOK)
+	})
+
 	v.mux.HandleFunc("POST /_session/close", func(w http.ResponseWriter, r *http.Request) {
 		body, err := io.ReadAll(r.Body)
 		if err != nil {
@@ -725,6 +832,15 @@ func New() *V {
 		v.logDebug(c, "session close event triggered")
 		v.cleanupCtx(c)
 	})
+
+	dn, err := getSharedNATS()
+	if err != nil {
+		v.logWarn(nil, "embedded NATS unavailable: %v", err)
+	} else {
+		v.defaultNATS = dn
+		v.pubsub = &natsRef{dn: dn}
+	}
+
 	return v
 }
 
@@ -757,3 +873,19 @@ func extractParams(pattern, path string) map[string]string {
 	}
 	return params
 }
+
+// matchRoute finds the registered page init function and extracted params for the given path.
+func (v *V) matchRoute(path string) (route string, initFn func(*Context), params map[string]string) {
+	for pattern, fn := range v.pageRegistry {
+		if p := extractParams(pattern, path); p != nil {
+			return pattern, fn, p
+		}
+	}
+	return "", nil, nil
+}
+
+// Layout sets a layout function that wraps every page's view.
+// The layout receives the page content as a function and returns the full view.
+func (v *V) Layout(f func(func() h.H) h.H) {
+	v.layout = f
+}

via_test.go

@@ -303,12 +303,63 @@ func TestReaperCleansOrphanedContexts(t *testing.T) {
 	_, err := v.getCtx("orphan-1")
 	assert.NoError(t, err)
 
-	v.reapOrphanedContexts(10 * time.Second)
+	v.reapOrphanedContexts(5*time.Second, 10*time.Second)
 
 	_, err = v.getCtx("orphan-1")
 	assert.Error(t, err, "orphaned context should have been reaped")
 }
 
+func TestReaperSuspendsContext(t *testing.T) {
+	v := New()
+	c := newContext("suspend-1", "/", v)
+	dc := time.Now().Add(-20 * time.Minute)
+	c.sseDisconnectedAt.Store(&dc)
+	v.registerCtx(c)
+
+	v.reapOrphanedContexts(15*time.Minute, time.Hour)
+
+	got, err := v.getCtx("suspend-1")
+	assert.NoError(t, err, "suspended context should still be in registry")
+	assert.True(t, got.suspended.Load(), "context should be marked suspended")
+}
+
+func TestReaperReapsAfterTTL(t *testing.T) {
+	v := New()
+	c := newContext("reap-1", "/", v)
+	dc := time.Now().Add(-2 * time.Hour)
+	c.sseDisconnectedAt.Store(&dc)
+	c.suspended.Store(true)
+	v.registerCtx(c)
+
+	v.reapOrphanedContexts(15*time.Minute, time.Hour)
+
+	_, err := v.getCtx("reap-1")
+	assert.Error(t, err, "context past TTL should have been reaped")
+}
+
+func TestReaperIgnoresAlreadySuspended(t *testing.T) {
+	v := New()
+	c := newContext("already-sus-1", "/", v)
+	dc := time.Now().Add(-20 * time.Minute)
+	c.sseDisconnectedAt.Store(&dc)
+	c.suspended.Store(true)
+	// give it a fresh pageStopChan so we can verify it's not re-closed
+	c.pageStopChan = make(chan struct{})
+	v.registerCtx(c)
+
+	v.reapOrphanedContexts(15*time.Minute, time.Hour)
+
+	got, err := v.getCtx("already-sus-1")
+	assert.NoError(t, err, "already-suspended context within TTL should survive")
+	assert.True(t, got.suspended.Load())
+	// pageStopChan should still be open (not re-suspended)
+	select {
+	case <-got.pageStopChan:
+		t.Fatal("pageStopChan was closed — context was re-suspended")
+	default:
+	}
+}
+
 func TestReaperIgnoresConnectedContexts(t *testing.T) {
 	v := New()
 	c := newContext("connected-1", "/", v)
@@ -316,7 +367,7 @@ func TestReaperIgnoresConnectedContexts(t *testing.T) {
 	c.sseConnected.Store(true)
 	v.registerCtx(c)
 
-	v.reapOrphanedContexts(10 * time.Second)
+	v.reapOrphanedContexts(5*time.Second, 10*time.Second)
 
 	_, err := v.getCtx("connected-1")
 	assert.NoError(t, err, "connected context should survive reaping")

vianats/vianats.go

@@ -1,127 +0,0 @@
-// Package vianats provides an embedded NATS server with JetStream as a
-// pub/sub backend for Via applications.
-package vianats
-
-import (
-	"context"
-	"encoding/json"
-	"fmt"
-	"time"
-
-	"github.com/delaneyj/toolbelt/embeddednats"
-	"github.com/nats-io/nats.go"
-	"github.com/ryanhamamura/via"
-)
-
-// NATS implements via.PubSub using an embedded NATS server with JetStream.
-type NATS struct {
-	server *embeddednats.Server
-	nc     *nats.Conn
-	js     nats.JetStreamContext
-}
-
-// New starts an embedded NATS server with JetStream enabled and returns a
-// ready-to-use NATS instance. The server stores data in dataDir and shuts
-// down when ctx is cancelled.
-func New(ctx context.Context, dataDir string) (*NATS, error) {
-	ns, err := embeddednats.New(ctx, embeddednats.WithDirectory(dataDir))
-	if err != nil {
-		return nil, fmt.Errorf("vianats: start server: %w", err)
-	}
-	ns.WaitForServer()
-
-	nc, err := ns.Client()
-	if err != nil {
-		ns.Close()
-		return nil, fmt.Errorf("vianats: connect client: %w", err)
-	}
-
-	js, err := nc.JetStream()
-	if err != nil {
-		nc.Close()
-		ns.Close()
-		return nil, fmt.Errorf("vianats: init jetstream: %w", err)
-	}
-
-	return &NATS{server: ns, nc: nc, js: js}, nil
-}
-
-// Publish sends data to the given subject using core NATS publish.
-// JetStream captures messages automatically if a matching stream exists.
-func (n *NATS) Publish(subject string, data []byte) error {
-	return n.nc.Publish(subject, data)
-}
-
-// Subscribe creates a core NATS subscription for real-time fan-out delivery.
-func (n *NATS) Subscribe(subject string, handler func(data []byte)) (via.Subscription, error) {
-	sub, err := n.nc.Subscribe(subject, func(msg *nats.Msg) {
-		handler(msg.Data)
-	})
-	if err != nil {
-		return nil, err
-	}
-	return sub, nil
-}
-
-// Close shuts down the client connection and embedded server.
-func (n *NATS) Close() error {
-	n.nc.Close()
-	return n.server.Close()
-}
-
-// Conn returns the underlying NATS connection for advanced usage.
-func (n *NATS) Conn() *nats.Conn {
-	return n.nc
-}
-
-// JetStream returns the JetStream context for stream configuration and replay.
-func (n *NATS) JetStream() nats.JetStreamContext {
-	return n.js
-}
-
-// StreamConfig holds the parameters for creating or updating a JetStream stream.
-type StreamConfig struct {
-	Name     string
-	Subjects []string
-	MaxMsgs  int64
-	MaxAge   time.Duration
-}
-
-// EnsureStream creates or updates a JetStream stream matching cfg.
-func EnsureStream(n *NATS, cfg StreamConfig) error {
-	_, err := n.js.AddStream(&nats.StreamConfig{
-		Name:      cfg.Name,
-		Subjects:  cfg.Subjects,
-		Retention: nats.LimitsPolicy,
-		MaxMsgs:   cfg.MaxMsgs,
-		MaxAge:    cfg.MaxAge,
-	})
-	return err
-}
-
-// ReplayHistory fetches the last limit messages from subject,
-// deserializing each as T. Returns an empty slice if nothing is available.
-func ReplayHistory[T any](n *NATS, subject string, limit int) ([]T, error) {
-	sub, err := n.js.SubscribeSync(subject, nats.DeliverAll(), nats.OrderedConsumer())
-	if err != nil {
-		return nil, err
-	}
-	defer sub.Unsubscribe()
-
-	var msgs []T
-	for {
-		raw, err := sub.NextMsg(200 * time.Millisecond)
-		if err != nil {
-			break
-		}
-		var msg T
-		if json.Unmarshal(raw.Data, &msg) == nil {
-			msgs = append(msgs, msg)
-		}
-	}
-
-	if limit > 0 && len(msgs) > limit {
-		msgs = msgs[len(msgs)-limit:]
-	}
-	return msgs, nil
-}