diff --git a/documentation/plans/examples-grid-plan.md b/documentation/plans/examples-grid-plan.md
index dfd15ff97d..1e16ee3546 100644
--- a/documentation/plans/examples-grid-plan.md
+++ b/documentation/plans/examples-grid-plan.md
@@ -2,10 +2,12 @@
 
 _Drafted 2026-09-28, from the fit conversation that produced principles §10
 and §9.6, with Stages 1–8 built and #3704 (attribute slots, second form)
-the last heavy feature. Status: DIRECTION AGREED in conversation; nothing
-here is built. This page is the checklist for the example set as a whole;
-the two flagships get their own plans (linked below) and this page does not
-design them. Design record:
+the last heavy feature. Status: the apps that already exist are as far as
+they go (Handoff, 2026-10-12). The left column landed on #3717 in the
+shapes review accepted. The flagship rebuilds, `board`, retiring `room`,
+and the V5 decision are handed off. This page is the checklist for the
+example set as a whole; the two flagships get their own plans (not written)
+and this page does not design them. Design record:
 `documentation/server-components/server-components-principles.md` §10 (fit)
 and §9.6 (live mutations seed). The grid is the one in
 ["The Grand Unifying Architecture of Frontend"](https://dev.to/playfulprogramming/the-grand-unifying-architecture-of-frontend-bhk)
@@ -96,6 +98,12 @@ SSR compile, so neither depends on the directive's level; a non-exported
 wrapper registers exactly as an exported one. The first example PR
 confirms with its build: passing with the `server-only` markers in place
 (pruning precedes resolution) and failing on a deliberate client import.
+_Confirmed by `hackernews`' build (2026-09-29): both hold, the references
+are named from their bindings (`getStory-<hash>`, the same in both twins),
+and a module with the marker needs
+`/// <reference types="@solidjs/vite-plugin/boundary-modules" />` in
+`vite-env.d.ts`, since TypeScript 6 rejects an undeclared side-effect
+import (TS2882)._
 
 ## The map
 
@@ -125,17 +133,72 @@ on the left (`hackernews`, `notes`), and is its own comparison: the same
 primitives with the client owning the markup (`board`) and with the server
 owning it (`chat`).
 
+## Handoff (2026-10-12)
+
+The examples that exist are finished to what the runtime can do today. No
+new product, and no example waiting on G1, G2, or V1–V5. #3717 is that set.
+
+Landed, in the shape review accepted rather than the shape first written
+here:
+
+- `hackernews` / `hackernews-spa` — authoring layout, server routes,
+  cacheable GETs. Comment collapse is native `<details>`, not a binding
+  slot.
+- `notes` — React's split, single-flight mutations, occlusion specs.
+- `todos` — the SPA control. The README names the coordinate.
+- `todos-server` — forms, binding slots, server-rendered errors. Intent is
+  `aria-busy`, not an optimistic store.
+
+Kept, with no further pass:
+
+- `rendering`, `effect`, `sierpinski` — off-grid on purpose.
+- `chat` — the streaming demo that stands in the bottom-right corner. One
+  generation, a fake model, no threads. Not the flagship.
+- `room` — the live-declaration test bed, data and markup from one
+  declaration. It stays until the flagships exist.
+- `migrating-element` — the canvas. A mini-player waits on V5.
+
+Handed off, in this order:
+
+1. `chat-flagship.md`, then the rebuild. Absorbs `room`'s `/`.
+2. `board-flagship.md`, then `board`. Absorbs `room`'s `/live`. There is
+   no `board` today.
+3. Delete `room` once both exist.
+4. V5, then the `migrating-element` decision.
+5. G1 and G2, if a later example needs text positions or the binding-slot
+   execution model. Nothing landed here does.
+6. V1–V4, if `todos-server` is later brought to the optimistic toggle.
+   The landed example does not use that shape.
+
 ## Per-example disposition
 
-### `hackernews` — bottom-left, reads. KEEP; collapse → binding slot, layout, README. Blocked on G1, G2
+### `hackernews` — bottom-left, reads. LANDED (#3717). Built 2026-09-29, revised
 
 The front door: the simplest server component, navigation over server
-markup, a single stateful client concern. Its layering moment is comment
-collapse — client state on server-rendered elements deep in a tree, surviving
-navigation. Today that is a `Toggle` client component wrapping a template
-slot (`toggle={p => <Toggle>{p.children}</Toggle>}`); under §9.2.3's
-placement principle a thread exists because the server has comments, so it
-is server markup and the collapse is a binding slot.
+markup, and no client code. Revised in review (2026-09-29): the collapse only
+hides replies, which is native `<details>`, so a binding slot there was a
+heavier way to do what the browser already does. Both twins now render the
+same `<details>`, every route in this twin is a server route, and the client
+ships the router and the loading boundary. A later revision dropped the
+navigation dim: the current page stays up until the next is ready. The
+binding-slot demos are
+`todos-server` and `chat`'s copy button (`notes`' search field was one until
+its shell moved to the client; see `notes` below).
+
+Closed (2026-09-30): the proof that no content is sent twice when a client
+component places server content conditionally (occlusion: an unplaced region
+ships as an `sc:region:` record, never as markup too) had no end-to-end test.
+The early demo showed it live (`b3f48999e`, deep replies collapsed by
+default) and `63cd06688` dropped it when the collapse became
+`display: none`; the only spec, `frames-occlusion-client.spec.tsx`, fed the
+client hand-written records. `test/server/frame-occlusion-document.spec.tsx`
+now covers the server side (each excerpt once: markup where placed, a record
+where not; late placement locked to records), and
+`test/hydration/frame-occlusion-document.spec.tsx` the client (adopt, then
+expand, collapse and re-expand with the network stubbed to throw; each text
+on screen once). `notes`' sidebar excerpt is the live demo.
+
+The superseded binding-slot shape, as reviewed and first built:
 
 Target shape (reviewed 2026-09-29): the recursive `Comment` is a server
 component and the client never sees the tree — per comment with replies, one
@@ -155,7 +218,27 @@ gains the `id` the data already carries; the README's "`$key` keeps it
 attached" claim becomes true (today no key is passed); the bundle check
 can grep `comment-children` too.
 
-### `hackernews-spa` — top-left. KEEP; layout only
+_As built:_ the shape above, with `StoryDefinition.id` also typed `number`
+(the capture and the live API both carry numbers). The thread's markup is
+byte-identical to the twin's with hydration and slot markers stripped
+(feed and user pages too); 652 of the 1,406 comments have replies, so 652
+fills. In the browser the collapsed state keeps its element and text node
+through a `revalidate("story")` refetch. The bundle check greps the client
+JavaScript, since `app.css` carries both class names.
+
+Follow-up in review: the feeds and the user page are server routes
+(`serverRouteComponent`, router 2.0.0-next.31), so they have no route
+component and no `preload`. The feeds are one `/:type?` route filtered to
+the five feed names, with `page` from a hand-written search schema; the SPA
+twin mirrors the pattern and filter and parses `?page` itself. (The story
+route kept its component for the fill until the move to `<details>`, when it
+became a server route too.) The nav is outside `Loading`,
+since it does no I/O. Router next.29 broke client navigation to the user
+page: it sent a schema-less route's args as `{ params, search: undefined }`,
+which the JSON argument check rejects, and nothing was logged. next.30
+(#615) fixed that, so every example that uses the router moved to next.31.
+
+### `hackernews-spa` — top-left. LANDED (#3717). Built 2026-09-29
 
 The twin; exists only as the comparison. README names the coordinate. Takes
 the authoring layout: each route file's `query` carries its server function
@@ -164,25 +247,55 @@ module-level `"use server"` file). Diffing the twins then shows the thesis
 at the route file: the same `getStory`, returning JSON in one and markup in
 the other, and client components in one only.
 
-### `notes` — middle-left, the RSC coordinate. KEEP; authoring layout + README
+### `notes` — middle-left, the RSC coordinate. LANDED (#3717). Built 2026-09-30
 
 React's own server-components demo ported: client islands whose state
-survives server updates around them, single-flight mutations by redirect,
-the search field as the idiomatic binding slot. Its layering moment is the
-editor keeping its draft while the sidebar list refreshes around it — the
-"shared client state preserved" line the HTML-partial tools cannot cross.
-Behavior unchanged; the code moves to the authoring layout (queries and
-actions inline in the files that use them, `server/` for `db.ts`) and the
-README is repositioned. The overlap with `chat` (both are
-sidebar + viewer + mutations) is intentional: opposite sides of the grid,
+survives server updates around them, and single-flight mutations by
+redirect. Its layering moment is the editor keeping its draft while the
+sidebar list refreshes around it — the "shared client state preserved" line
+the HTML-partial tools cannot cross. The code is in the authoring layout
+(queries and actions inline in the files that use them, `server/` for
+`db.ts`) and the README names the coordinate. The overlap with `chat` (both
+are sidebar + viewer + mutations) is intentional: opposite sides of the grid,
 different audience.
 
-### `todos` — top-left. KEEP as is
+Revised in review (2026-09-30), toward React's own shape:
+
+- The shell is a client component, as React's `App.js` is. Only the sidebar
+  list and the note preview are server components. The server shell had
+  existed only to host a binding slot: once the shell was on the client,
+  the search field was a client component, as it is in the demo. Finding:
+  a binding slot needs a position inside server markup, and in this app the
+  only such positions are the per-note ones `SidebarNoteContent` already
+  owns.
+- The editor's data is a plain query returning the note (`getNoteEdit`).
+  Before, it was a server component used as a data loader, filling the
+  editor slot with raw text.
+- The excerpt mounts only while expanded, as in the demo, so collapsed
+  excerpts ship once as records (the occlusion specs above).
+- `router.tsx` holds the route table, the root preload and `getNoteList`,
+  and `server-config.ts` passes that Router to the flight collector. This is
+  the fullstack template's layout. The collector takes a router instance
+  because not every app uses Solid Router; each router template does this
+  wiring itself.
+
+### `todos` — top-left. LANDED (#3717). Built 2026-09-30
 
 The SPA control: optimistic store over `refresh`, client-held API mock.
-Twin of `todos-server`; also the pedagogical control for `board`.
+Twin of `todos-server`; also the pedagogical control for `board`. No server
+side, so the authoring layout does not apply. The pass: the README names the
+coordinate and the twin; Vite 8, as in the other grid examples; the error
+map moves into `createTodos`; an unused `TodoActions` type goes; both
+checkboxes use `onChange`. The `todos.ts` header keeps its instruction (read
+it for the layering, not the syntax), which exists because agents reading
+the example missed the layering, but it is no longer phrased as a rebuke.
 
-### `todos-server` — bottom-left, writes. RESHAPE
+### `todos-server` — bottom-left, writes. LANDED (#3717), revised
+
+Shipped as forms with binding slots and server-rendered errors. A
+submitting row shows intent with `aria-busy`, not an optimistic store.
+The optimistic-toggle target below was not built, and V1–V4 do not block
+the example that shipped.
 
 Today: the §9.2.3 acceptance gate — seven client-owned positions per row, an
 intent record, a client error map, multi-flight `refresh`. Principles §10
@@ -206,7 +319,22 @@ README may describe it as the increment). Bulk actions stay plain forms.
 Pending feedback, if the router marks a submitting claimed form
 (`aria-busy` / `data-pending`), is CSS only — see V4.
 
-### `chat` — bottom-right FLAGSHIP. REBUILD (own plan)
+**Revised 2026-09-30, built (pending review of the feel).** Dropping the
+bulk optimism left nothing a form could not do, and binding slots exist to
+add back exactly that optimism, so the example has to keep it to prove the
+point. Built shape: every control a form (`.with()` for rows), single-flight
+responses; two binding slots — `row` (class, hidden, the toggle's value and
+`aria-pressed`, retry title and handler) and `list` (empty, toggle-all
+state and value, clear's visibility, the count as a text position, the bulk
+error) — fed by one intent store each action's `onSubmit` writes.
+Cross-element optimism (toggle-all, clear-completed, the count) is the
+layering moment. Failures are returned `{ error }` values read through
+`useSubmissions`, each action's `onSettled` superseding earlier answers to
+the same question; the no-JS path reads the same list from the router's
+flash cookie. Add is not optimistic (a busy form, the error with a retry).
+The pending-row template slot is gone.
+
+### `chat` — bottom-right FLAGSHIP. STANDING DEMO; rebuild handed off
 
 Plan: `documentation/plans/chat-flagship.md` (to write first). Realistic
 AI chat: threads durable and addressable; generation as a job that outlives
@@ -221,7 +349,7 @@ retry. Absorbs `room`'s `/` page. The `usage` projection goes (token usage
 is a number on the finished message), which removes the container tier's
 only example — flagged, consistent with principles §10.5.
 
-### `board` — top-right FLAGSHIP. NEW (own plan)
+### `board` — top-right FLAGSHIP. HANDED OFF (not built)
 
 Plan: `documentation/plans/board-flagship.md` (to write first). Pure data
 tier, no frames: one board of lists and cards as a `live` source, reconciled
@@ -238,14 +366,14 @@ it). `board` is also the top-right form of `chat`: a live thread read by
 client components into an optimistic store is this architecture with a
 transcript instead of lists, which is why no separate `chat-spa` exists.
 
-### `room` — RETIRE
+### `room` — STAYS; retirement handed off with the flagships
 
 Stage 8's test bed. `/` becomes `chat`'s thread; `/live` becomes `board`.
 The chaos switch and status pills were apparatus; connection state stays
 visible in both flagships through `onstatus`, as an affordance the apps
 would have anyway. Delete once both flagships exist.
 
-### `migrating-element` — CONDITIONAL on V5
+### `migrating-element` — STAYS as the canvas; the decision is handed off with V5
 
 Today a canvas, because the README records that `<video>` pauses on
 migration. The spec and MDN say native media survives a same-task
@@ -261,7 +389,19 @@ neither, it stays as is.
 
 Off-grid on purpose. `rendering` is the one kitchen sink.
 
-## Verification items (gate the reshapes; none built)
+## Verification items (gate the reshapes)
+
+_2026-10-01, from the `todos-server` build: V1–V4 hold on
+`@solidjs/router` 2.0.0-next.34. V3 needed a router fix — a server-rendered
+`.with()` url missed the client's action registry, so the hooks never ran
+(solid-router#646, which also makes a chained `.with()` carry every bound
+argument). The build also surfaced a hang: rendering the document with a
+flash cookie present never finished the stream render, because a server
+`Errored` retry re-created the router and every router restarted the flash
+decode (solid-router#647 decodes once per request). Framework follow-ups —
+`Errored` re-creating ancestors on retry, and no guard for a retry that
+never converges — are open. Examples moved to `@solidjs/vite-plugin` 3.0.0-next.47,
+the first to inject the flash-cookie secret, so the no-JS path is live._
 
 - **V1 — Flight collector carries a result plus regions.** `notes` exercises
   redirects only. `todos-server`'s server-rendered failures and §9.6 (B)
@@ -342,7 +482,8 @@ value to branch on, and a stand-in is always truthy.
   warning. The comments in `todos-server`'s `rowFor` and `notes`'
   `searchField.ts` saying each position updates alone are corrected in
   the README pass: getters re-read with their occurrence and only changed
-  positions are written. Blocks `hackernews`.
+  positions are written. (Blocked `hackernews` until its collapse moved to
+  `<details>`.)
 
 - **G1 — Text positions.** `{t.label}` as a child: a binding-slot value at
   a text position. Today it renders nothing on either face and raises the
@@ -355,32 +496,33 @@ value to branch on, and a stand-in is always truthy.
   would reset them); primitives only, anything else a finding; raw-text
   parents (`<textarea>`, `<title>`, `<style>`, `<script>`) a documented
   rule, since the SSR compile is shared. Runtime only, no compiler change.
-  **Changes documented behavior** (flagged). After G2. Blocks `hackernews`;
-  `todos-server`'s count wants it.
+  **Changes documented behavior** (flagged). After G2. `todos-server`'s
+  count wants it. (Blocked `hackernews` until its collapse moved to
+  `<details>`.)
 - **G3 — Server-only modules — resolved 2026-09-29.** The vite plugin's
   `server-only` boundary marker enforces `src/server/` (authoring layout,
   above). No framework change.
 
 ## Order
 
-_Revised 2026-09-29, #3704 merged: least work to most, one example per
-PR, and each example's exact code is proposed and reviewed before it is
-written — the shape and its details are the deliverable. Server
-components are unreleased, so the flagships carry no deadline; the
-examples that are already right carry the most value per hour._
+_Revised 2026-10-12. The list below is the record of the original sequence.
+What remains is the Handoff section: items 3–5 landed on #3717 in revised
+shapes (`<details>` rather than a binding slot; `aria-busy` rather than
+waiting on V1–V4). Items 1, 2, and 6–9 are handed off. Server components
+are unreleased, so the flagships carry no deadline._
 
-1. G2 (binding-slot execution), design then code.
-2. G1 (text positions), design then code.
+1. G2 (binding-slot execution), design then code. Handed off. Nothing
+   landed here needs it.
+2. G1 (text positions), design then code. Handed off.
 3. `hackernews` in the reviewed shape, with `hackernews-spa`'s layout.
-4. README and authoring-layout pass: `notes`, `todos` (and anything left
-   of `hackernews-spa`).
-5. `todos-server` reshape (V1–V4 first). Target decided 2026-09-29: the
-   Q5 shape above — single-flight, server-rendered rejections, one
-   binding slot with one position — not the Q4 wrap.
-6. `chat-flagship.md`, then `chat`.
-7. `board-flagship.md`, then `board`.
-8. Retire `room`.
-9. V5, then the `migrating-element` decision.
+   Landed, as `<details>` (built 2026-09-29).
+4. README and authoring-layout pass: `notes`, `todos`. Landed.
+5. `todos-server` reshape. Landed as forms, binding slots, and
+   `aria-busy`. The optimistic toggle was not built.
+6. `chat-flagship.md`, then `chat`. Handed off. The streaming demo stays.
+7. `board-flagship.md`, then `board`. Handed off. Nothing exists yet.
+8. Retire `room`. Handed off; it stays until 6 and 7 exist.
+9. V5, then the `migrating-element` decision. Handed off. The canvas stays.
 
 ## Follow-ups this plan creates
 
diff --git a/documentation/server-components/server-components-principles.md b/documentation/server-components/server-components-principles.md
index e8741cfa58..8d8540c422 100644
--- a/documentation/server-components/server-components-principles.md
+++ b/documentation/server-components/server-components-principles.md
@@ -3183,7 +3183,7 @@ the text above, the build is right and the text is amended here:
   names percent-encode onto `[A-Za-z0-9_.-]`, the occurrence
   alphabet, so `:`/`=`/`,` split exactly. A zero-arg call is the
   occurrence named by the prop alone (`codeBlock:onCopy`, no `#n`) —
-  one data context per prop, the notes search field's shape. The
+  one data context per prop, the chat copy button's shape. The
   document face writes the value where the position would have put
   it and the marker after. A class-name or style-property position
   whose names all resolve empty writes no `class=""` — the marker
@@ -4457,7 +4457,13 @@ slots (§9.2.3) with markup slots for the elements that exist only
 because of client state. The ratio is one to ten. Rejections: none
 (behavior only). *Standing: this is what attribute slots are for,
 and the advice writes itself — bind the position, don't lift the
-element.* Examples: `chat`'s `codeBlock`, `notes`' `search` field.
+element.* Examples: `chat`'s `codeBlock`; `notes`' expand toggle,
+the markup-slot half (the excerpt exists only while expanded, so it
+ships once as a record, A1). `notes`' search field was an
+attribute-slot example while its shell was a server component; with
+the shell on the client there is no server markup around it to
+annotate, and it is a client component, as in the React demo. The
+position has to sit in server markup for the slot to be the answer.
 
 **Q4 — Widgets.** Small data, this user's alone, changing faster
 than a round trip, with dense interaction on every element:
@@ -4494,7 +4500,7 @@ example          quadrant        role
 ───────          ────────        ────
 hackernews       Q1              front door for the core
 hackernews-spa   —               client control for hackernews
-notes            Q1 + Q3 + Q5    list + search slot + single-flight mutations
+notes            Q1 + Q3 + Q5    list + expand slot + single-flight mutations
 chat             Q2 + Q3         live generation + attribute slot
 room             Q2              live transport end to end
 todos            Q4              client control for todos-server
diff --git a/examples/chat/README.md b/examples/chat/README.md
index e2c6e5b8dd..b434baf434 100644
--- a/examples/chat/README.md
+++ b/examples/chat/README.md
@@ -11,6 +11,12 @@ Where the HackerNews twin ([../hackernews](../hackernews)) shows markup that
 changing after it arrives** — one generation streaming through live markup
 holes, live slot arguments, and a live store, all crossing the same border.
 
+This stands in the persistent, server-owned corner as the demo the runtime
+can show today: one generation, a fake model, no threads. The product —
+durable threads, a generation that outlives the tab — is handed off in
+[`examples-grid-plan.md`](../../documentation/plans/examples-grid-plan.md).
+It is not built here.
+
 ```sh
 pnpm dev                  # http://localhost:3009
 pnpm build && pnpm start  # http://localhost:3009
@@ -87,7 +93,7 @@ bottom.
   for each message, `welcome()` for the t=0 face, `<Message>` for the live
   hole, and the projection that becomes the client's usage store.
 - [src/app.tsx](./src/app.tsx) — the whole client app: transcript state, the
-  composer, autoscroll, and one `dynamic()` per reply.
+  composer, autoscroll, and one `dynamicComponent()` per reply.
 - [src/components/status.tsx](./src/components/status.tsx) — the client fill
   reading all three tiers: expression args, the pending promise read, and the
   materialized store.
diff --git a/examples/chat/package.json b/examples/chat/package.json
index 8939247915..75fd5702a2 100644
--- a/examples/chat/package.json
+++ b/examples/chat/package.json
@@ -19,7 +19,7 @@
     "solid-js": "workspace:*"
   },
   "devDependencies": {
-    "@solidjs/vite-plugin": "3.0.0-next.35",
+    "@solidjs/vite-plugin": "3.0.0-next.49",
     "vite": "^8.0.0"
   }
 }
diff --git a/examples/chat/src/app.tsx b/examples/chat/src/app.tsx
index 337f298bfc..3a1ba55e68 100644
--- a/examples/chat/src/app.tsx
+++ b/examples/chat/src/app.tsx
@@ -4,7 +4,7 @@
 // answers) are server components; their markup arrives as HTML over frame
 // streams and never exists here as templates or JSON.
 import { createSignal, For, Loading, onSettled } from "solid-js";
-import { dynamic } from "@solidjs/web";
+import { dynamicComponent } from "@solidjs/web";
 import { reply, welcome } from "~/lib/ai";
 import Status from "~/components/status";
 import "./app.css";
@@ -43,7 +43,7 @@ export default function App() {
   // document's own response, and hydration adopts the boundary in place
   // (zero network) and picks the generation up mid-sentence. The `reply`
   // calls below are the same machinery on the call-driven face.
-  const Welcome = dynamic(() => welcome());
+  const Welcome = dynamicComponent(() => welcome());
 
   const send = (e: SubmitEvent) => {
     e.preventDefault();
@@ -104,7 +104,7 @@ export default function App() {
             // with two live expression args (DR-2): progress updates on every
             // yield, stats settles when generation completes. The <Status>
             // reading them is client code.
-            const Reply = dynamic(() => reply(m.prompt));
+            const Reply = dynamicComponent(() => reply(m.prompt));
             return (
               <li class="exchange">
                 <div class="bubble user">{m.prompt}</div>
diff --git a/examples/effect/package.json b/examples/effect/package.json
index a4bbe784bb..c7b136124b 100644
--- a/examples/effect/package.json
+++ b/examples/effect/package.json
@@ -16,11 +16,11 @@
     "effect": "^3.22.0"
   },
   "devDependencies": {
-    "@solidjs/vite-plugin": "3.0.0-next.35",
+    "@solidjs/vite-plugin": "3.0.0-next.49",
     "@solidjs/web": "workspace:*",
     "@types/node": "^25.6.0",
     "solid-js": "workspace:*",
     "typescript": "^6.0.2",
-    "vite": "^7.0.0"
+    "vite": "^8.0.0"
   }
 }
diff --git a/examples/hackernews-spa/README.md b/examples/hackernews-spa/README.md
index eaec23fdc4..b8faf7e8d5 100644
--- a/examples/hackernews-spa/README.md
+++ b/examples/hackernews-spa/README.md
@@ -2,7 +2,8 @@
 
 A real HackerNews client built the conventional way: server functions return
 JSON, client components render everything, and the document ships standard
-hydration data.
+hydration data. It sits in the client-owned, request/response corner of the
+examples, beside `todos`.
 
 It is the comparison twin of [../hackernews](../hackernews) — the *same
 application*, with the same routes, the same markup, and the same data layer,
@@ -18,8 +19,8 @@ pnpm build && pnpm start  # http://localhost:3005
 
 This is a *good* baseline, not a strawman: fine-grained hydration, no requests
 at boot (the serialized data resumes the render), one JSON fetch per
-navigation, preloading on link hover, and client state that survives
-navigation.
+navigation, preloading on link hover, and navigations that keep the current
+page up until the next is ready.
 
 The difference from the server-components twin is structural rather than one
 of quality. View source on a thread and search for any comment's text: it is
@@ -27,20 +28,25 @@ there twice — once as the HTML the server painted, and once inside the
 hydration data that produced it. That is inherent, not an oversight. The
 client renders these templates itself, so it needs the data that drives them,
 which also means every content component ships to the browser. The twin
-carries content once and ships only the components that own state.
+carries content once and ships no content components at all.
 
 ## How it's wired
 
-- [src/lib/hn.ts](./src/lib/hn.ts) — the data source, server-only. Live HN API,
-  except story `30186326` ("Facebook loses users for the first time", 1,406
-  comments, 14 levels deep), which is served from a capture so the big thread
-  is deterministic.
-- [src/lib/api.ts](./src/lib/api.ts) — `query()` wrappers so the router can
-  preload on hover and dedupe the call the route then makes.
-- [src/components/](./src/components) — the templates: nav, story, comment,
-  and the collapse toggle. In the twin, only the toggle exists on the client.
-- [src/routes/](./src/routes) — one route component per view, each reading its
-  query.
+- [src/routes/](./src/routes) — one file per screen: its server function
+  inside `query` (so the router can preload on hover and dedupe the call the
+  route then makes, and the result lands in the hydration data), and the route
+  component that renders it. Only the default component and `preload` are
+  exported. The twin's route files hold the same `getStory`, returning markup
+  instead of data, and none of its routes has a route component, because
+  there the router makes the call.
+- [src/server/hn.ts](./src/server/hn.ts) — the data source, identical to the
+  twin's. Live HN API, except story `30186326` ("Facebook loses users for the
+  first time", 1,406 comments, 14 levels deep), which is served from a capture
+  so the big thread is deterministic. It begins `import "server-only"`, which
+  fails the build if it is ever imported from client code.
+- [src/components/](./src/components) — the templates: nav, story, and
+  comment, whose collapse is a native `<details>`. The twin has no client
+  components: its markup is server components.
 - [vite.config.ts](./vite.config.ts) — the turnkey `ssr` object generates the
   entries and the serving layer, so there is no `entry-server`, `entry-client`,
   or dev-server script here. `serverFunctions` serves the `/_server` endpoint.
diff --git a/examples/hackernews-spa/package.json b/examples/hackernews-spa/package.json
index a4796bf25f..3c9a0069cf 100644
--- a/examples/hackernews-spa/package.json
+++ b/examples/hackernews-spa/package.json
@@ -13,12 +13,12 @@
     "typecheck": "tsc --noEmit"
   },
   "dependencies": {
-    "@solidjs/router": "2.0.0-next.29",
+    "@solidjs/router": "2.0.0-next.38",
     "@solidjs/web": "workspace:*",
     "solid-js": "workspace:*"
   },
   "devDependencies": {
-    "@solidjs/vite-plugin": "3.0.0-next.35",
+    "@solidjs/vite-plugin": "3.0.0-next.49",
     "vite": "^8.0.0"
   }
 }
diff --git a/examples/hackernews-spa/src/app.css b/examples/hackernews-spa/src/app.css
index bb5325b72a..5a590ff81a 100644
--- a/examples/hackernews-spa/src/app.css
+++ b/examples/hackernews-spa/src/app.css
@@ -236,7 +236,7 @@ a {
   position: relative;
 }
 
-.comment .by, .comment .text, .comment .toggle {
+.comment .by, .comment .text, .comment .toggle > summary {
   font-size: 0.9em;
   margin: 1em 0;
 }
@@ -262,23 +262,30 @@ a {
   white-space: pre-wrap;
 }
 
-.comment .toggle {
+.comment .toggle > summary {
   background-color: #fffbf2;
   padding: 0.3em 0.5em;
   border-radius: 4px;
-}
-
-.comment .toggle a {
   color: #626262;
   cursor: pointer;
+  list-style: none;
+}
+
+.comment .toggle > summary::-webkit-details-marker {
+  display: none;
 }
 
-.comment .toggle.open {
+.comment .toggle[open] > summary {
   padding: 0;
   background-color: transparent;
   margin-bottom: -0.5em;
 }
 
+.comment .toggle[open] > summary > .closed-label,
+.comment .toggle:not([open]) > summary > .open-label {
+  display: none;
+}
+
 .user-view {
   background-color: #fff;
   box-sizing: border-box;
diff --git a/examples/hackernews-spa/src/app.tsx b/examples/hackernews-spa/src/app.tsx
index c83cab3535..c2078542c9 100644
--- a/examples/hackernews-spa/src/app.tsx
+++ b/examples/hackernews-spa/src/app.tsx
@@ -4,7 +4,7 @@
 // (../hackernews) renders the same routes with the same markup — only the
 // static parts come back as server components there, so they arrive as HTML
 // once and never as data.
-import { createRouter, defineRoute } from "@solidjs/router";
+import { createRouter, defineRoute, intentPreload } from "@solidjs/router";
 import { Loading } from "solid-js";
 import Nav from "~/components/nav";
 import Stories, { preload as preloadStories } from "~/routes/stories";
@@ -13,15 +13,19 @@ import User, { preload as preloadUser } from "~/routes/user";
 import "./app.css";
 
 // Explicit route tree rather than the file routes a metaframework provides:
-// this example is plain Vite. The feed paths are enumerated instead of a
-// splat so the typed path proxy stays useful.
+// this example is plain Vite. The same table as the server-components twin:
+// the feed is an optional param the filter limits to the five feed names.
 // `defineRoute` types each route's component and preload from its own `path`,
 // so the `:id` routes read `params.id` as `string` rather than
 // `string | undefined`.
+// `intentPreload` is the hover, focus, and touch preload. Link preloading is
+// opt-in as of router 2.0.0-next.38.
 const Router = createRouter({
+  preloadLinks: intentPreload(),
   routes: [
     defineRoute({
-      path: ["/", "/top", "/new", "/show", "/ask", "/job"],
+      path: "/:type?",
+      matchFilters: { type: ["top", "new", "show", "ask", "job"] },
       component: Stories,
       preload: preloadStories
     }),
@@ -36,7 +40,11 @@ export default function App() {
       {props => (
         <>
           <Nav />
-          <Loading fallback={<div class="news-list-nav">Loading...</div>}>{props.children}</Loading>
+          <div class="page">
+            <Loading fallback={<div class="news-list-nav">Loading...</div>}>
+              {props.children}
+            </Loading>
+          </div>
         </>
       )}
     </Router>
diff --git a/examples/hackernews-spa/src/components/comment.tsx b/examples/hackernews-spa/src/components/comment.tsx
index 564c9664ea..d66f9cde6e 100644
--- a/examples/hackernews-spa/src/components/comment.tsx
+++ b/examples/hackernews-spa/src/components/comment.tsx
@@ -1,6 +1,5 @@
 import { Component, For, Show } from "solid-js";
 import { CommentDefinition } from "~/types";
-import Toggle from "./toggle";
 
 const Comment: Component<{ comment: CommentDefinition }> = props => {
   return (
@@ -11,9 +10,15 @@ const Comment: Component<{ comment: CommentDefinition }> = props => {
       </div>
       <div class="text" innerHTML={props.comment.content} />
       <Show when={props.comment.comments.length}>
-        <Toggle>
-          <For each={props.comment.comments}>{comment => <Comment comment={comment} />}</For>
-        </Toggle>
+        <details class="toggle" open>
+          <summary>
+            <span class="open-label">[-]</span>
+            <span class="closed-label">[+] comments collapsed</span>
+          </summary>
+          <ul class="comment-children">
+            <For each={props.comment.comments}>{comment => <Comment comment={comment} />}</For>
+          </ul>
+        </details>
       </Show>
     </li>
   );
diff --git a/examples/hackernews-spa/src/components/toggle.tsx b/examples/hackernews-spa/src/components/toggle.tsx
deleted file mode 100644
index 32375785e0..0000000000
--- a/examples/hackernews-spa/src/components/toggle.tsx
+++ /dev/null
@@ -1,16 +0,0 @@
-import { createSignal } from "solid-js";
-
-export default function Toggle(props: { children: any }) {
-  const [open, setOpen] = createSignal(true);
-
-  return (
-    <>
-      <div class={["toggle", { open: open() }]}>
-        <a onClick={() => setOpen(o => !o)}>{open() ? "[-]" : "[+] comments collapsed"}</a>
-      </div>
-      <ul class="comment-children" style={{ display: open() ? "block" : "none" }}>
-        {props.children}
-      </ul>
-    </>
-  );
-}
diff --git a/examples/hackernews-spa/src/lib/api.ts b/examples/hackernews-spa/src/lib/api.ts
deleted file mode 100644
index 83e358cd3a..0000000000
--- a/examples/hackernews-spa/src/lib/api.ts
+++ /dev/null
@@ -1,14 +0,0 @@
-// The data the client renders from. `query` wraps the server functions so the
-// router can preload on link hover and dedupe the call the route component
-// then makes — and so each result is serialized into the hydration payload.
-//
-// That payload is the point of this baseline: everything below arrives as
-// JSON, the client renders every template from it, and the initial document
-// therefore carries each story and comment twice — once as the HTML the
-// server painted, once as the data that produced it.
-import { query } from "@solidjs/router";
-import * as hn from "./hn";
-
-export const getStories = query(hn.getStories, "stories");
-export const getStory = query(hn.getStory, "story");
-export const getUser = query(hn.getUser, "user");
diff --git a/examples/hackernews-spa/src/routes/stories.tsx b/examples/hackernews-spa/src/routes/stories.tsx
index e9ad2530ec..dae5da6bbd 100644
--- a/examples/hackernews-spa/src/routes/stories.tsx
+++ b/examples/hackernews-spa/src/routes/stories.tsx
@@ -1,21 +1,35 @@
-import { type RoutePreloadFuncArgs, type RouteSectionProps } from "@solidjs/router";
+import {
+  query,
+  type RouteParams,
+  type RoutePreloadFuncArgs,
+  type RouteProps,
+  type SearchParams
+} from "@solidjs/router";
 import { For, Show, createMemo } from "solid-js";
 import Story from "~/components/story";
-import { getStories } from "~/lib/api";
+import * as hn from "~/server/hn";
 import type { StoryTypes } from "~/types";
 
-/** `/` and the four named feeds all render this; the path names the feed. */
-export const storyType = (pathname: string): StoryTypes =>
-  (pathname.split("/")[1] || "top") as StoryTypes;
+// The route lives in app.tsx, so the component and preload here name the
+// pattern they belong to.
+type Path = "/:type?";
 
-// The feed routes take no params, so the open `RouteSectionProps` is honest here.
-export const preload = ({ location }: RoutePreloadFuncArgs) => {
-  void getStories(storyType(location.pathname), Number(location.query.page) || 1);
+const getStories = query(async (type: StoryTypes, page: number) => {
+  "use server";
+  return hn.getStories(type, page);
+}, "stories");
+
+/** `/` is the top feed; the route's filter admits only the five feed names. */
+const storyType = (params: RouteParams<Path>) => (params.type || "top") as StoryTypes;
+const pageOf = (query: SearchParams) => Number(query.page) || 1;
+
+export const preload = ({ params, location }: RoutePreloadFuncArgs<RouteParams<Path>>) => {
+  void getStories(storyType(params), pageOf(location.query));
 };
 
-export default function Stories(props: RouteSectionProps) {
-  const page = () => Number(props.location.query.page) || 1;
-  const type = () => storyType(props.location.pathname);
+export default function Stories(props: RouteProps<Path>) {
+  const page = () => pageOf(props.location.query);
+  const type = () => storyType(props.params);
   const stories = createMemo(() => getStories(type(), page()));
 
   return (
diff --git a/examples/hackernews-spa/src/routes/story.tsx b/examples/hackernews-spa/src/routes/story.tsx
index f841aff7dc..4142af807f 100644
--- a/examples/hackernews-spa/src/routes/story.tsx
+++ b/examples/hackernews-spa/src/routes/story.tsx
@@ -1,12 +1,22 @@
-import { type RouteParams, type RoutePreloadFuncArgs, type RouteProps } from "@solidjs/router";
+import {
+  query,
+  type RouteParams,
+  type RoutePreloadFuncArgs,
+  type RouteProps
+} from "@solidjs/router";
 import { For, Show, createMemo } from "solid-js";
 import Comment from "~/components/comment";
-import { getStory } from "~/lib/api";
+import * as hn from "~/server/hn";
 
 // The route lives in app.tsx, so the component and preload here name the
 // pattern they belong to; `params.id` is then `string`, not `string | undefined`.
 type Path = "/stories/:id";
 
+const getStory = query(async (id: string) => {
+  "use server";
+  return hn.getStory(id);
+}, "story");
+
 export const preload = ({ params }: RoutePreloadFuncArgs<RouteParams<Path>>) => {
   void getStory(params.id);
 };
diff --git a/examples/hackernews-spa/src/routes/user.tsx b/examples/hackernews-spa/src/routes/user.tsx
index 43dc535278..608caa4afd 100644
--- a/examples/hackernews-spa/src/routes/user.tsx
+++ b/examples/hackernews-spa/src/routes/user.tsx
@@ -1,9 +1,19 @@
-import { type RouteParams, type RoutePreloadFuncArgs, type RouteProps } from "@solidjs/router";
+import {
+  query,
+  type RouteParams,
+  type RoutePreloadFuncArgs,
+  type RouteProps
+} from "@solidjs/router";
 import { Show, createMemo } from "solid-js";
-import { getUser } from "~/lib/api";
+import * as hn from "~/server/hn";
 
 type Path = "/users/:id";
 
+const getUser = query(async (id: string) => {
+  "use server";
+  return hn.getUser(id);
+}, "user");
+
 export const preload = ({ params }: RoutePreloadFuncArgs<RouteParams<Path>>) => {
   void getUser(params.id);
 };
diff --git a/examples/hackernews/src/lib/hn.ts b/examples/hackernews-spa/src/server/hn.ts
similarity index 85%
rename from examples/hackernews/src/lib/hn.ts
rename to examples/hackernews-spa/src/server/hn.ts
index ea3f130fbc..f07ca5a28b 100644
--- a/examples/hackernews/src/lib/hn.ts
+++ b/examples/hackernews-spa/src/server/hn.ts
@@ -1,7 +1,8 @@
-"use server";
-// The HN data source, server-only. Module-level directive: the client build
-// replaces this whole module with reference proxies, so the cached thread
-// below never reaches the browser — important, because it is 600KB.
+import "server-only";
+// The HN data source. Only `"use server"` bodies import it, and the client
+// build replaces those with references, so the cached thread below (600KB)
+// never reaches the browser; the `server-only` marker fails the build if
+// this module is ever imported from client code.
 import type { StoryDefinition, StoryTypes, UserDefinition } from "~/types";
 import cachedStory from "./story-30186326.json";
 
diff --git a/examples/hackernews-spa/src/lib/story-30186326.json b/examples/hackernews-spa/src/server/story-30186326.json
similarity index 100%
rename from examples/hackernews-spa/src/lib/story-30186326.json
rename to examples/hackernews-spa/src/server/story-30186326.json
diff --git a/examples/hackernews-spa/src/types.ts b/examples/hackernews-spa/src/types.ts
index 7e2ceb8631..4239674c49 100644
--- a/examples/hackernews-spa/src/types.ts
+++ b/examples/hackernews-spa/src/types.ts
@@ -1,4 +1,5 @@
 export interface CommentDefinition {
+  id: number;
   user: string;
   time_ago: string;
   content: string;
@@ -6,7 +7,7 @@ export interface CommentDefinition {
 }
 
 export interface StoryDefinition {
-  id: string;
+  id: number;
   points: string;
   url: string;
   title: string;
diff --git a/examples/hackernews-spa/src/vite-env.d.ts b/examples/hackernews-spa/src/vite-env.d.ts
index 11f02fe2a0..c3957e75cc 100644
--- a/examples/hackernews-spa/src/vite-env.d.ts
+++ b/examples/hackernews-spa/src/vite-env.d.ts
@@ -1 +1,2 @@
 /// <reference types="vite/client" />
+/// <reference types="@solidjs/vite-plugin/boundary-modules" />
diff --git a/examples/hackernews/README.md b/examples/hackernews/README.md
index a4a346dd53..2093d76e7a 100644
--- a/examples/hackernews/README.md
+++ b/examples/hackernews/README.md
@@ -1,8 +1,10 @@
 # HackerNews — Solid Server Components
 
-A real HackerNews client built with **Solid Server Components**: the story
-lists, threads, and user pages are rendered on the server and arrive as HTML,
-while the browser gets the router and the one component that owns state.
+A real HackerNews client where the server owns the markup: story lists,
+threads, and user pages are server components that arrive as HTML, and the
+browser gets the router and nothing else. It is
+the reads half of the server-owned, request/response corner of the examples
+(`todos-server` is the writes half).
 
 Its twin, [../hackernews-spa](../hackernews-spa), is the *same application* —
 same routes, same markup, same data layer — built the conventional way, with
@@ -18,26 +20,37 @@ pnpm build && pnpm start  # http://localhost:3004
 
 A `"use server"` function that **returns a function** is a server component.
 The function's arguments are the server's inputs; the returned component's
-props are client positions — holes the client fills, which never travel to the
-server. From [src/lib/views.tsx](./src/lib/views.tsx):
+props are the slots a client would fill, which never travel to the server (this
+app has none). Each route file holds its screen's server component as a `GET`
+server function, with `respond()` marking the response cacheable for a
+minute, and exports it as a server route:
 
 ```tsx
-export async function storyView(id: string) {
-  const story = await getStory(id);
-  return (props: { toggle: Slot }) => <div class="item-view">…</div>;
-}
+const getStory = GET(async ({ params }: ServerRouteArgs<RouteParams<"/stories/:id">>) => {
+  "use server";
+  const story = await hn.getStory(params.id);
+  return respond(() => <div class="item-view">…</div>, cacheable);
+});
+
+export default serverRouteComponent(getStory);
 ```
 
-On the client side there is no server-component API at all. `dynamic()` over
-the call is the entire surface ([src/routes/story.tsx](./src/routes/story.tsx)):
+`respond()` is typed as the value it wraps, so the call is still typed as
+returning the component.
 
-```tsx
-const View = dynamic(() => storyView(props.params.id));
-return <View toggle={p => <Toggle>{p.children}</Toggle>} />;
-```
+There is no route component and no `preload` to write. The router makes the
+call from the match (the route's params, and the feeds' `page` through the
+route's search schema) on navigation and on link hover alike. Navigating to
+another story or feed re-calls it, and the response morphs that boundary in
+place, with no remount and no fallback re-flash.
 
-The source is tracked, so navigating to another story re-calls it and the
-response morphs that boundary in place — no remount, no fallback re-flash.
+## The collapse is HTML
+
+Collapsing a comment's replies is a native `<details>`, so the thread needs no
+client code at all: `Comment` is recursive server markup, and the browser owns
+the open state ([src/routes/story.tsx](./src/routes/story.tsx)). The SPA twin
+renders the same `<details>`, so the markup is identical and the only
+difference between the apps is what else ships.
 
 ## What to look at
 
@@ -47,21 +60,21 @@ render to feed. Compare with the same view in the SPA twin, where each comment
 is present twice: once as the HTML the server painted, and again as the JSON
 that produced it.
 
-**The single client component in a 1,406-comment thread.**
-[src/components/toggle.tsx](./src/components/toggle.tsx) owns collapse state
-and nothing else. The server calls `props.toggle` for each comment that has
-replies, and the replies inside it are server markup again — so a subtree
-streams as HTML once at any depth, with client behavior interleaved. Collapse
-state is client state: it never appears in a request, and `$key` keeps it
-attached to its comment across refetches.
-
 **The client bundle.** No story, comment, or list templates reach the browser:
-grep `dist/client/` for `item-view-comments-header` and it isn't there, because
-[src/lib/views.tsx](./src/lib/views.tsx) is a `"use server"` module and the
-client build strips it. What *is* there is the router, the loading fallbacks,
-and `Toggle` — which is why `comment-children` still appears, since the client
-owns the replies list it wraps. (The 1,406-comment capture stays on the server
-in both apps; `hn.ts` is server-only either way.)
+grep the client JavaScript (`dist/client/assets/*.js`) for
+`item-view-comments-header` or `comment-children` and neither is there. The
+server component bodies, `Comment`, and the `hn` data layer they use are
+removed from the client build; what ships is the router, the loading
+boundary, and the runtime that mounts server components. (The 1,406-comment
+capture stays on the server in both apps.)
+
+**Navigation.** Hover a link and the router makes its call ahead of the
+click. The response is cacheable ([src/server/cache.ts](./src/server/cache.ts)),
+so the click's identical `GET` reads it from the browser's HTTP cache and
+the navigation lands at once. The SPA twin shares the call in memory through
+`query` instead. When a navigation has to wait (click the big thread without
+hovering, or tab to a link and press Enter), the current page stays up until
+the next is ready, instead of going blank.
 
 **The nav is a server component too.** It is static chrome with no reactive
 input, so it renders inline at t=0, the client adopts it, and navigation
@@ -73,18 +86,22 @@ JSON, and the boundary morphs as they arrive.
 
 ## How it's wired
 
-- [src/lib/hn.ts](./src/lib/hn.ts) — the data source, server-only. Live HN API,
-  except story `30186326` ("Facebook loses users for the first time", 1,406
-  comments, 14 levels deep), which is served from a capture so the big thread
-  is deterministic.
-- [src/lib/views.tsx](./src/lib/views.tsx) — the server components. Every view
-  here renders the exact markup its SPA counterpart renders in the browser.
-- [src/routes/](./src/routes) — one `dynamic()` call each, no templates.
-- [src/app.tsx](./src/app.tsx) — the router, the loading boundaries, and
-  nothing else. There are no story, comment, or list templates on this side.
+- [src/routes/](./src/routes) — one file per screen, each exporting its server
+  component (a `GET` server function) as a server route. The feeds also
+  export their `?page` search schema, and the thread's file holds the
+  recursive `Comment`.
+- [src/server/cache.ts](./src/server/cache.ts) — the one cache policy every
+  screen's response carries: public, for a minute.
+- [src/server/hn.ts](./src/server/hn.ts) — the data source. Live HN API, except
+  story `30186326` ("Facebook loses users for the first time", 1,406 comments,
+  14 levels deep), which is served from a capture so the big thread is
+  deterministic. It begins `import "server-only"`, which fails the build if it
+  is ever imported from client code.
+- [src/app.tsx](./src/app.tsx) — the route table (the same as the SPA twin's),
+  the loading boundary, and the nav's server component.
 - [vite.config.ts](./vite.config.ts) — identical to the SPA twin's but for one
   flag: `serverFunctions: { components: true }`. That flag is the entire wiring
-  difference between the two apps. The turnkey `ssr` object generates the
+  difference between the two apps. The turnkey `start` object generates the
   entries, the render plugin, and the document bootstrap, so nothing in `src/`
   imports the frames runtime.
 - [server.js](./server.js) — a plain node server: static assets, the SSR
diff --git a/examples/hackernews/package.json b/examples/hackernews/package.json
index 8ea8893e46..69c41d5d37 100644
--- a/examples/hackernews/package.json
+++ b/examples/hackernews/package.json
@@ -13,12 +13,12 @@
     "typecheck": "tsc --noEmit"
   },
   "dependencies": {
-    "@solidjs/router": "2.0.0-next.29",
+    "@solidjs/router": "2.0.0-next.38",
     "@solidjs/web": "workspace:*",
     "solid-js": "workspace:*"
   },
   "devDependencies": {
-    "@solidjs/vite-plugin": "3.0.0-next.35",
+    "@solidjs/vite-plugin": "3.0.0-next.49",
     "vite": "^8.0.0"
   }
 }
diff --git a/examples/hackernews/src/app.css b/examples/hackernews/src/app.css
index bb5325b72a..5a590ff81a 100644
--- a/examples/hackernews/src/app.css
+++ b/examples/hackernews/src/app.css
@@ -236,7 +236,7 @@ a {
   position: relative;
 }
 
-.comment .by, .comment .text, .comment .toggle {
+.comment .by, .comment .text, .comment .toggle > summary {
   font-size: 0.9em;
   margin: 1em 0;
 }
@@ -262,23 +262,30 @@ a {
   white-space: pre-wrap;
 }
 
-.comment .toggle {
+.comment .toggle > summary {
   background-color: #fffbf2;
   padding: 0.3em 0.5em;
   border-radius: 4px;
-}
-
-.comment .toggle a {
   color: #626262;
   cursor: pointer;
+  list-style: none;
+}
+
+.comment .toggle > summary::-webkit-details-marker {
+  display: none;
 }
 
-.comment .toggle.open {
+.comment .toggle[open] > summary {
   padding: 0;
   background-color: transparent;
   margin-bottom: -0.5em;
 }
 
+.comment .toggle[open] > summary > .closed-label,
+.comment .toggle:not([open]) > summary > .open-label {
+  display: none;
+}
+
 .user-view {
   background-color: #fff;
   box-sizing: border-box;
diff --git a/examples/hackernews/src/app.tsx b/examples/hackernews/src/app.tsx
index 44c5a0152a..caf823ceb9 100644
--- a/examples/hackernews/src/app.tsx
+++ b/examples/hackernews/src/app.tsx
@@ -2,52 +2,85 @@
 // ../hackernews-spa/src/app.tsx: same router, same routes, same boundary. What
 // is missing here is the app itself — there are no story, comment, or list
 // templates on this side, because that markup is returned by server components
-// and arrives as HTML. All that ships is the router, the boundary, and the one
-// component that owns state (Toggle).
+// and arrives as HTML. All that ships is the router and the loading boundary;
+// there are no client components, and the thread's collapse is a native
+// `<details>`.
 //
-// Note there is no server-component API in this file. `dynamic()` over a
-// `"use server"` call is the entire client surface (see the routes); the
-// transport install lives in the generated entry.
-import { createRouter, defineRoute } from "@solidjs/router";
+// Note there is no server-component API in this file. A `"use server"` call
+// mounts as a route (`serverRouteComponent`) or through `dynamicComponent()`;
+// the transport install lives in the generated entry.
+import { createRouter, defineRoute, intentPreload } from "@solidjs/router";
 import { Loading } from "solid-js";
-import { dynamic } from "@solidjs/web";
-import { navView } from "~/lib/views";
-import Stories, { preload as preloadStories } from "~/routes/stories";
-import Story, { preload as preloadStory } from "~/routes/story";
-import User, { preload as preloadUser } from "~/routes/user";
+import { dynamicComponent } from "@solidjs/web";
+import Stories, { searchSchema } from "~/routes/stories";
+import Story from "~/routes/story";
+import User from "~/routes/user";
 import "./app.css";
 
-// `defineRoute` types each route's component and preload from its own `path`,
-// so the `:id` routes read `params.id` as `string` rather than
-// `string | undefined`. The preloads make link hover/focus fetch the route's
-// server component ahead of the click — same wiring as the SPA twin, and the
-// preloaded boundary stays isolated until navigation actually reads it.
+// The nav is a server component too. It is static chrome, so there is no
+// reason for its markup to ship as client templates at all — and with no
+// reactive input it is never refetched: it renders inline at t=0, the client
+// adopts it, and navigation leaves it alone. No `Loading` around it: it does
+// no I/O, so the shell waits on it at no cost.
+async function getNav() {
+  "use server";
+  return () => (
+    <header class="header">
+      <nav class="inner">
+        <a href="/">
+          <strong>HN</strong>
+        </a>
+        <a href="/new">
+          <strong>New</strong>
+        </a>
+        <a href="/show">
+          <strong>Show</strong>
+        </a>
+        <a href="/ask">
+          <strong>Ask</strong>
+        </a>
+        <a href="/job">
+          <strong>Jobs</strong>
+        </a>
+        <a class="github" href="http://github.com/solidjs/solid" target="_blank" rel="noreferrer">
+          Built with Solid
+        </a>
+      </nav>
+    </header>
+  );
+}
+
+// The same route table as the SPA twin. Every screen is a server route: the
+// router makes its call from the match — params, and the feeds' `page`
+// through `searchSchema` — on navigation and on link hover alike.
+// `intentPreload` is that hover (and focus, and touch); link preloading is
+// opt-in as of router 2.0.0-next.38.
 const Router = createRouter({
+  preloadLinks: intentPreload(),
   routes: [
     defineRoute({
-      path: ["/", "/top", "/new", "/show", "/ask", "/job"],
-      component: Stories,
-      preload: preloadStories
+      path: "/:type?",
+      matchFilters: { type: ["top", "new", "show", "ask", "job"] },
+      search: searchSchema,
+      component: Stories
     }),
-    defineRoute({ path: "/stories/:id", component: Story, preload: preloadStory }),
-    defineRoute({ path: "/users/:id", component: User, preload: preloadUser })
+    defineRoute({ path: "/stories/:id", component: Story }),
+    defineRoute({ path: "/users/:id", component: User })
   ]
 });
 
 export default function App() {
-  // The nav is a server component too. It is static chrome, so there is no
-  // reason for its markup to ship as client templates at all — and with no
-  // reactive input it is never refetched: it renders inline at t=0, the client
-  // adopts it, and navigation leaves it alone.
-  const Nav = dynamic(() => navView());
+  const Nav = dynamicComponent(() => getNav());
   return (
     <Router>
       {props => (
         <>
-          <Loading fallback={<div class="news-list-nav">Loading...</div>}>
-            <Nav />
-          </Loading>
-          <Loading fallback={<div class="news-list-nav">Loading...</div>}>{props.children}</Loading>
+          <Nav />
+          <div class="page">
+            <Loading fallback={<div class="news-list-nav">Loading...</div>}>
+              {props.children}
+            </Loading>
+          </div>
         </>
       )}
     </Router>
diff --git a/examples/hackernews/src/components/toggle.tsx b/examples/hackernews/src/components/toggle.tsx
deleted file mode 100644
index 32375785e0..0000000000
--- a/examples/hackernews/src/components/toggle.tsx
+++ /dev/null
@@ -1,16 +0,0 @@
-import { createSignal } from "solid-js";
-
-export default function Toggle(props: { children: any }) {
-  const [open, setOpen] = createSignal(true);
-
-  return (
-    <>
-      <div class={["toggle", { open: open() }]}>
-        <a onClick={() => setOpen(o => !o)}>{open() ? "[-]" : "[+] comments collapsed"}</a>
-      </div>
-      <ul class="comment-children" style={{ display: open() ? "block" : "none" }}>
-        {props.children}
-      </ul>
-    </>
-  );
-}
diff --git a/examples/hackernews/src/lib/api.ts b/examples/hackernews/src/lib/api.ts
deleted file mode 100644
index d85d8b9092..0000000000
--- a/examples/hackernews/src/lib/api.ts
+++ /dev/null
@@ -1,12 +0,0 @@
-// The client-facing data surface, mirroring ../hackernews-spa/src/lib/api.ts:
-// the server components wrapped in the router's `query` — cache identity and
-// preload participation. Hovering a link preloads the route's server
-// component and the navigation reads the same cache entry, so one request
-// serves both. The nav view is chrome, not data (never refetched), so it
-// stays on `dynamic()` alone in app.tsx.
-import { query } from "@solidjs/router";
-import { storiesView, storyView, userView } from "./views";
-
-export const getStories = query(storiesView, "stories");
-export const getStory = query(storyView, "story");
-export const getUser = query(userView, "user");
diff --git a/examples/hackernews/src/lib/views.tsx b/examples/hackernews/src/lib/views.tsx
deleted file mode 100644
index e5195a39b9..0000000000
--- a/examples/hackernews/src/lib/views.tsx
+++ /dev/null
@@ -1,184 +0,0 @@
-"use server";
-// The server components. A `"use server"` function that RETURNS a function is
-// a server component: the function's ARGUMENTS are server inputs (ids, feed,
-// page), and the returned component's PROPS are client positions — holes the
-// client fills that never travel to the server.
-//
-// Every view below renders the exact markup its ../hackernews-spa counterpart
-// renders in the browser. The difference is where it exists: here it is HTML
-// produced once on the server, and the data behind it (a 1,406-comment thread)
-// never crosses the wire. In the SPA twin that same thread arrives twice — as
-// the HTML the server painted and again as the JSON that produced it.
-import type { ComponentProps } from "solid-js";
-import type { Slot } from "@solidjs/web/frames";
-import { getStories, getStory, getUser } from "./hn";
-import type Toggle from "~/components/toggle";
-import type { CommentDefinition, StoryTypes } from "~/types";
-
-/**
- * A client position: the server renders it where client-owned markup belongs
- * and the client puts its own component there. `Slot` takes the client
- * component's own props, so the hole is described with the same type that
- * fills it rather than a restatement of its shape.
- */
-type ToggleSlot = Slot<ComponentProps<typeof Toggle>>;
-
-export async function navView() {
-  return () => (
-    <header class="header">
-      <nav class="inner">
-        <a href="/">
-          <strong>HN</strong>
-        </a>
-        <a href="/new">
-          <strong>New</strong>
-        </a>
-        <a href="/show">
-          <strong>Show</strong>
-        </a>
-        <a href="/ask">
-          <strong>Ask</strong>
-        </a>
-        <a href="/job">
-          <strong>Jobs</strong>
-        </a>
-        <a class="github" href="http://github.com/solidjs/solid" target="_blank" rel="noreferrer">
-          Built with Solid
-        </a>
-      </nav>
-    </header>
-  );
-}
-
-export async function storiesView(type: StoryTypes, page: number) {
-  const stories = await getStories(type, page);
-  return () => (
-    <div class="news-view">
-      <div class="news-list-nav">
-        {page > 1 ? (
-          <a class="page-link" href={`/${type}?page=${page - 1}`} aria-label="Previous Page">
-            {"<"} prev
-          </a>
-        ) : (
-          <span class="page-link disabled" aria-disabled="true">
-            {"<"} prev
-          </span>
-        )}
-        <span>page {page}</span>
-        {stories.length >= 29 ? (
-          <a class="page-link" href={`/${type}?page=${page + 1}`} aria-label="Next Page">
-            more {">"}
-          </a>
-        ) : (
-          <span class="page-link disabled" aria-disabled="true">
-            more {">"}
-          </span>
-        )}
-      </div>
-      <main class="news-list">
-        {stories.map(story => (
-          <li class="news-item">
-            <span class="score">{story.points}</span>
-            <span class="title">
-              {story.url ? (
-                <>
-                  <a href={story.url} target="_blank" rel="noreferrer">
-                    {story.title}
-                  </a>
-                  <span class="host"> ({story.domain})</span>
-                </>
-              ) : (
-                <a href={`/stories/${story.id}`}>{story.title}</a>
-              )}
-            </span>
-            <br />
-            <span class="meta">
-              {story.type !== "job" ? (
-                <>
-                  by <a href={`/users/${story.user}`}>{story.user}</a> {story.time_ago} |{" "}
-                  <a href={`/stories/${story.id}`}>
-                    {story.comments_count ? `${story.comments_count} comments` : "discuss"}
-                  </a>
-                </>
-              ) : (
-                <a href={`/stories/${story.id}`}>{story.time_ago}</a>
-              )}
-            </span>
-            {story.type !== "link" ? (
-              <>
-                {" "}
-                <span class="label">{story.type}</span>
-              </>
-            ) : null}
-          </li>
-        ))}
-      </main>
-    </div>
-  );
-}
-
-export async function storyView(id: string) {
-  const story = await getStory(id);
-
-  /**
-   * Recursive single-copy composition. A comment's own byline and text are
-   * plain server markup; only the collapse control is client-owned, so the
-   * replies list is handed to the `toggle` slot — the client renders the SPA's
-   * Toggle there and the nested comments inside it are server markup again.
-   * Each subtree therefore streams as HTML exactly once, at any depth.
-   */
-  const comment = (c: CommentDefinition, toggle: ToggleSlot): unknown => (
-    <li class="comment">
-      <div class="by">
-        <a href={`/users/${c.user}`}>{c.user}</a> {c.time_ago} ago
-      </div>
-      <div class="text" innerHTML={c.content} />
-      {c.comments.length
-        ? toggle({ children: c.comments.map(child => comment(child, toggle)) })
-        : null}
-    </li>
-  );
-
-  return (props: { toggle: ToggleSlot }) => (
-    <div class="item-view">
-      <div class="item-view-header">
-        <a href={story.url} target="_blank">
-          <h1>{story.title}</h1>
-        </a>
-        {story.domain ? <span class="host">({story.domain})</span> : null}
-        <p class="meta">
-          {story.points} points | by <a href={`/users/${story.user}`}>{story.user}</a>{" "}
-          {story.time_ago} ago
-        </p>
-      </div>
-      <div class="item-view-comments">
-        <p class="item-view-comments-header">
-          {story.comments_count ? story.comments_count + " comments" : "No comments yet."}
-        </p>
-        <ul class="comment-children">{story.comments.map(c => comment(c, props.toggle))}</ul>
-      </div>
-    </div>
-  );
-}
-
-export async function userView(id: string) {
-  const user = await getUser(id);
-  return () => (
-    <div class="user-view">
-      <h1>User : {user.id}</h1>
-      <ul class="meta">
-        <li>
-          <span class="label">Created:</span> {user.created}
-        </li>
-        <li>
-          <span class="label">Karma:</span> {user.karma}
-        </li>
-        {user.about ? <li innerHTML={user.about} class="about" /> : null}
-      </ul>
-      <p class="links">
-        <a href={`https://news.ycombinator.com/submitted?id=${user.id}`}>submissions</a> |{" "}
-        <a href={`https://news.ycombinator.com/threads?id=${user.id}`}>comments</a>
-      </p>
-    </div>
-  );
-}
diff --git a/examples/hackernews/src/routes/stories.tsx b/examples/hackernews/src/routes/stories.tsx
index 7f811ed044..74119cbbba 100644
--- a/examples/hackernews/src/routes/stories.tsx
+++ b/examples/hackernews/src/routes/stories.tsx
@@ -1,25 +1,101 @@
-import { type RoutePreloadFuncArgs, type RouteSectionProps } from "@solidjs/router";
-import { dynamic } from "@solidjs/web";
-import { getStories } from "~/lib/api";
+import {
+  serverRouteComponent,
+  type RouteParams,
+  type ServerRouteArgs,
+  type StandardSchemaV1
+} from "@solidjs/router";
+import { respond } from "@solidjs/web";
+import { GET } from "@solidjs/web/server-functions";
+import { cacheable } from "~/server/cache";
+import * as hn from "~/server/hn";
 import type { StoryTypes } from "~/types";
 
-/** `/` and the four named feeds all render this; the path names the feed. */
-export const storyType = (pathname: string): StoryTypes =>
-  (pathname.split("/")[1] || "top") as StoryTypes;
-
-// The feed routes take no params, so the open `RoutePreloadFuncArgs` is honest here.
-export const preload = ({ location }: RoutePreloadFuncArgs) => {
-  void getStories(storyType(location.pathname), Number(location.query.page) || 1);
+/** The feeds' `?page=`: a number, page 1 when absent or not one. */
+export const searchSchema: StandardSchemaV1<{ page?: string }, { page: number }> = {
+  "~standard": {
+    version: 1,
+    vendor: "hackernews",
+    validate: raw => ({ value: { page: Number((raw as { page?: string }).page) || 1 } })
+  }
 };
 
-export default function Stories(props: RouteSectionProps) {
-  // `dynamic` over the query-wrapped server component is the whole client
-  // surface. The source is tracked, so changing feed or page re-calls it and
-  // the response morphs this boundary in place — no remount, no fallback
-  // re-flash. `query` gives the call cache identity: a hover preload warms
-  // the same entry this render reads.
-  const View = dynamic(() =>
-    getStories(storyType(props.location.pathname), Number(props.location.query.page) || 1)
+type Args = ServerRouteArgs<RouteParams<"/:type?">, { page: number }>;
+
+const getStories = GET(async ({ params, search }: Args) => {
+  "use server";
+  const type = (params.type || "top") as StoryTypes;
+  const page = search.page;
+  const stories = await hn.getStories(type, page);
+  return respond(
+    () => (
+      <div class="news-view">
+        <div class="news-list-nav">
+          {page > 1 ? (
+            <a class="page-link" href={`/${type}?page=${page - 1}`} aria-label="Previous Page">
+              {"<"} prev
+            </a>
+          ) : (
+            <span class="page-link disabled" aria-disabled="true">
+              {"<"} prev
+            </span>
+          )}
+          <span>page {page}</span>
+          {stories.length >= 29 ? (
+            <a class="page-link" href={`/${type}?page=${page + 1}`} aria-label="Next Page">
+              more {">"}
+            </a>
+          ) : (
+            <span class="page-link disabled" aria-disabled="true">
+              more {">"}
+            </span>
+          )}
+        </div>
+        <main class="news-list">
+          {stories.map(story => (
+            <li class="news-item">
+              <span class="score">{story.points}</span>
+              <span class="title">
+                {story.url ? (
+                  <>
+                    <a href={story.url} target="_blank" rel="noreferrer">
+                      {story.title}
+                    </a>
+                    <span class="host"> ({story.domain})</span>
+                  </>
+                ) : (
+                  <a href={`/stories/${story.id}`}>{story.title}</a>
+                )}
+              </span>
+              <br />
+              <span class="meta">
+                {story.type !== "job" ? (
+                  <>
+                    by <a href={`/users/${story.user}`}>{story.user}</a> {story.time_ago} |{" "}
+                    <a href={`/stories/${story.id}`}>
+                      {story.comments_count ? `${story.comments_count} comments` : "discuss"}
+                    </a>
+                  </>
+                ) : (
+                  <a href={`/stories/${story.id}`}>{story.time_ago}</a>
+                )}
+              </span>
+              {story.type !== "link" ? (
+                <>
+                  {" "}
+                  <span class="label">{story.type}</span>
+                </>
+              ) : null}
+            </li>
+          ))}
+        </main>
+      </div>
+    ),
+    cacheable
   );
-  return <View />;
-}
+});
+
+// The router derives the call from the match — the `type` param and the
+// schema's `page` — so changing feed or page re-calls it and the response
+// morphs this boundary in place, and link hover makes the same call ahead of
+// the click, whose response the click then reads from the HTTP cache.
+export default serverRouteComponent(getStories);
diff --git a/examples/hackernews/src/routes/story.tsx b/examples/hackernews/src/routes/story.tsx
index 94c3fd478c..983534264b 100644
--- a/examples/hackernews/src/routes/story.tsx
+++ b/examples/hackernews/src/routes/story.tsx
@@ -1,21 +1,71 @@
-import { type RouteParams, type RoutePreloadFuncArgs, type RouteProps } from "@solidjs/router";
-import { dynamic } from "@solidjs/web";
-import Toggle from "~/components/toggle";
-import { getStory } from "~/lib/api";
+import { serverRouteComponent, type RouteParams, type ServerRouteArgs } from "@solidjs/router";
+import { respond } from "@solidjs/web";
+import { GET } from "@solidjs/web/server-functions";
+import { cacheable } from "~/server/cache";
+import * as hn from "~/server/hn";
+import type { CommentDefinition } from "~/types";
 
-// The pattern witness types `params.id` as `string` — this component is
-// declared away from its route, so it names the pattern it belongs to.
-type Path = "/stories/:id";
+const getStory = GET(async ({ params }: ServerRouteArgs<RouteParams<"/stories/:id">>) => {
+  "use server";
+  const story = await hn.getStory(params.id);
+  return respond(
+    () => (
+      <div class="item-view">
+        <div class="item-view-header">
+          <a href={story.url} target="_blank">
+            <h1>{story.title}</h1>
+          </a>
+          {story.domain ? <span class="host">({story.domain})</span> : null}
+          <p class="meta">
+            {story.points} points | by <a href={`/users/${story.user}`}>{story.user}</a>{" "}
+            {story.time_ago} ago
+          </p>
+        </div>
+        <div class="item-view-comments">
+          <p class="item-view-comments-header">
+            {story.comments_count ? story.comments_count + " comments" : "No comments yet."}
+          </p>
+          <ul class="comment-children">
+            {story.comments.map(comment => (
+              <Comment comment={comment} />
+            ))}
+          </ul>
+        </div>
+      </div>
+    ),
+    cacheable
+  );
+});
 
-export const preload = ({ params }: RoutePreloadFuncArgs<RouteParams<Path>>) => {
-  void getStory(params.id);
-};
-
-export default function Story(props: RouteProps<Path>) {
-  const View = dynamic(() => getStory(props.params.id));
-  // The one client-owned piece of a thread: the server fills this slot per
-  // comment that has replies, and the replies themselves arrive as server
-  // markup inside the Toggle's list. Collapse state is client state — it never
-  // appears in a request.
-  return <View toggle={p => <Toggle>{p.children}</Toggle>} />;
+/**
+ * Recursive, and entirely server markup. The collapse is a native
+ * `<details>`, so the client never sees the tree or anything about it.
+ */
+function Comment(props: { comment: CommentDefinition }) {
+  const c = props.comment;
+  return (
+    <li class="comment">
+      <div class="by">
+        <a href={`/users/${c.user}`}>{c.user}</a> {c.time_ago} ago
+      </div>
+      <div class="text" innerHTML={c.content} />
+      {c.comments.length ? (
+        <details class="toggle" open>
+          <summary>
+            <span class="open-label">[-]</span>
+            <span class="closed-label">[+] comments collapsed</span>
+          </summary>
+          <ul class="comment-children">
+            {c.comments.map(reply => (
+              <Comment comment={reply} />
+            ))}
+          </ul>
+        </details>
+      ) : null}
+    </li>
+  );
 }
+
+// Nothing for the client to fill, so it is a server route like the feeds and
+// the user page.
+export default serverRouteComponent(getStory);
diff --git a/examples/hackernews/src/routes/user.tsx b/examples/hackernews/src/routes/user.tsx
index 3e75e36ddf..cf7f9f82bd 100644
--- a/examples/hackernews/src/routes/user.tsx
+++ b/examples/hackernews/src/routes/user.tsx
@@ -1,14 +1,36 @@
-import { type RouteParams, type RoutePreloadFuncArgs, type RouteProps } from "@solidjs/router";
-import { dynamic } from "@solidjs/web";
-import { getUser } from "~/lib/api";
+import { serverRouteComponent, type RouteParams, type ServerRouteArgs } from "@solidjs/router";
+import { respond } from "@solidjs/web";
+import { GET } from "@solidjs/web/server-functions";
+import { cacheable } from "~/server/cache";
+import * as hn from "~/server/hn";
 
-type Path = "/users/:id";
+const getUser = GET(async ({ params }: ServerRouteArgs<RouteParams<"/users/:id">>) => {
+  "use server";
+  const user = await hn.getUser(params.id);
+  return respond(
+    () => (
+      <div class="user-view">
+        <h1>User : {user.id}</h1>
+        <ul class="meta">
+          <li>
+            <span class="label">Created:</span> {user.created}
+          </li>
+          <li>
+            <span class="label">Karma:</span> {user.karma}
+          </li>
+          {user.about ? <li innerHTML={user.about} class="about" /> : null}
+        </ul>
+        <p class="links">
+          <a href={`https://news.ycombinator.com/submitted?id=${user.id}`}>submissions</a> |{" "}
+          <a href={`https://news.ycombinator.com/threads?id=${user.id}`}>comments</a>
+        </p>
+      </div>
+    ),
+    cacheable
+  );
+});
 
-export const preload = ({ params }: RoutePreloadFuncArgs<RouteParams<Path>>) => {
-  void getUser(params.id);
-};
-
-export default function User(props: RouteProps<Path>) {
-  const View = dynamic(() => getUser(props.params.id));
-  return <View />;
-}
+// No client half, so no route component to write: the router derives the
+// call from the match, mounts its result, and makes the same call on link
+// hover, so there is no `preload` either.
+export default serverRouteComponent(getUser);
diff --git a/examples/hackernews/src/server/cache.ts b/examples/hackernews/src/server/cache.ts
new file mode 100644
index 0000000000..9a1ffa0195
--- /dev/null
+++ b/examples/hackernews/src/server/cache.ts
@@ -0,0 +1,8 @@
+/**
+ * Every screen's response is cacheable for a minute: HN's data is public and
+ * a minute stale is fine. It is also what makes a hover's call count — the
+ * response sits in the browser's HTTP cache when the click makes the same
+ * GET (a click while the hover is still in flight is the browser's to share
+ * or not). The SPA twin keeps that in memory instead, through `query`.
+ */
+export const cacheable = { headers: { "cache-control": "public, max-age=60" } };
diff --git a/examples/hackernews-spa/src/lib/hn.ts b/examples/hackernews/src/server/hn.ts
similarity index 85%
rename from examples/hackernews-spa/src/lib/hn.ts
rename to examples/hackernews/src/server/hn.ts
index ea3f130fbc..f07ca5a28b 100644
--- a/examples/hackernews-spa/src/lib/hn.ts
+++ b/examples/hackernews/src/server/hn.ts
@@ -1,7 +1,8 @@
-"use server";
-// The HN data source, server-only. Module-level directive: the client build
-// replaces this whole module with reference proxies, so the cached thread
-// below never reaches the browser — important, because it is 600KB.
+import "server-only";
+// The HN data source. Only `"use server"` bodies import it, and the client
+// build replaces those with references, so the cached thread below (600KB)
+// never reaches the browser; the `server-only` marker fails the build if
+// this module is ever imported from client code.
 import type { StoryDefinition, StoryTypes, UserDefinition } from "~/types";
 import cachedStory from "./story-30186326.json";
 
diff --git a/examples/hackernews/src/lib/story-30186326.json b/examples/hackernews/src/server/story-30186326.json
similarity index 100%
rename from examples/hackernews/src/lib/story-30186326.json
rename to examples/hackernews/src/server/story-30186326.json
diff --git a/examples/hackernews/src/types.ts b/examples/hackernews/src/types.ts
index 7e2ceb8631..4239674c49 100644
--- a/examples/hackernews/src/types.ts
+++ b/examples/hackernews/src/types.ts
@@ -1,4 +1,5 @@
 export interface CommentDefinition {
+  id: number;
   user: string;
   time_ago: string;
   content: string;
@@ -6,7 +7,7 @@ export interface CommentDefinition {
 }
 
 export interface StoryDefinition {
-  id: string;
+  id: number;
   points: string;
   url: string;
   title: string;
diff --git a/examples/hackernews/src/vite-env.d.ts b/examples/hackernews/src/vite-env.d.ts
index 11f02fe2a0..c3957e75cc 100644
--- a/examples/hackernews/src/vite-env.d.ts
+++ b/examples/hackernews/src/vite-env.d.ts
@@ -1 +1,2 @@
 /// <reference types="vite/client" />
+/// <reference types="@solidjs/vite-plugin/boundary-modules" />
diff --git a/examples/migrating-element/README.md b/examples/migrating-element/README.md
index 1fff10fc9d..18f621290f 100644
--- a/examples/migrating-element/README.md
+++ b/examples/migrating-element/README.md
@@ -5,6 +5,12 @@ element can be **referenced from multiple JSX slots** and the runtime will
 migrate the node — preserving its identity and every piece of state attached
 to it — instead of destroying and re-creating it.
 
+This example sits off the examples grid. The idiomatic case would be a
+mini-player with a `<video>`, and that waits on whether playback survives
+the move (V5 in
+[`examples-grid-plan.md`](../../documentation/plans/examples-grid-plan.md)).
+Until then the example is this canvas.
+
 ## What you'll see
 
 The page renders a `<canvas>` and three layout slots: a hero stage, a
diff --git a/examples/migrating-element/package.json b/examples/migrating-element/package.json
index 968fe4f7b0..9f519b923e 100644
--- a/examples/migrating-element/package.json
+++ b/examples/migrating-element/package.json
@@ -13,11 +13,11 @@
     "typecheck": "tsc --noEmit -p tsconfig.json"
   },
   "devDependencies": {
-    "@solidjs/vite-plugin": "3.0.0-next.35",
+    "@solidjs/vite-plugin": "3.0.0-next.49",
     "@solidjs/web": "workspace:*",
     "@types/node": "^25.6.0",
     "solid-js": "workspace:*",
     "typescript": "^6.0.2",
-    "vite": "^7.0.0"
+    "vite": "^8.0.0"
   }
 }
diff --git a/examples/notes/README.md b/examples/notes/README.md
index ff9c02e8a2..5f33115032 100644
--- a/examples/notes/README.md
+++ b/examples/notes/README.md
@@ -2,8 +2,8 @@
 
 The [React server-components notes demo](https://github.com/reactjs/server-components-demo),
 ported to **Solid Server Components** with the same server/client split: the
-app shell, the sidebar list, and the note viewer render on the server and
-arrive as HTML; the browser gets the router, the search field, the
+sidebar list and the note viewer render on the server and arrive as HTML;
+the browser gets the shell, the router, the search field, the
 expand/collapse behavior, and the editor.
 
 Where the HackerNews twin ([../hackernews](../hackernews)) is read-only, this
@@ -16,32 +16,36 @@ pnpm dev                  # http://localhost:3006
 pnpm build && pnpm start  # http://localhost:3006
 ```
 
-Notes live in an in-memory store ([src/lib/db.ts](./src/lib/db.ts), unstorage's
-memory driver), so the app seeds itself on boot and a restart resets it.
+Notes live in an in-memory store ([src/server/db.ts](./src/server/db.ts),
+unstorage's memory driver), so the app seeds itself on boot and a restart
+resets it.
 
 ## The split, next to the React demo
 
-- [src/server/App.tsx](./src/server/App.tsx) — `App.server.js`. The shell as a
-  server component: static chrome with four client positions (search, the New
-  button, the list, the route outlet). Unlike the original demo, navigation
-  does **not** re-render this tree — the list and the note are independent
-  boundaries that refresh fine-grained while the shell stands still.
-- [src/server/NoteList.tsx](./src/server/NoteList.tsx) — `NoteList.server.js`
-  and `SidebarNote.js` in one module. Each note's header and excerpt are
-  server markup handed into the
+- [src/app.tsx](./src/app.tsx) — `App.js`. The shell: static chrome, the
+  search field and the New button, and two boundaries (the list and the
+  route outlet). Unlike the original demo, navigation does **not** re-render
+  the app — the list and the note refresh independently while the shell
+  stands still.
+- [src/router.tsx](./src/router.tsx) — `NoteList.js` and `SidebarNote.js`,
+  plus the route table. `getNoteList` is the sidebar as a server component:
+  each note's header and excerpt are server markup handed into the
   [SidebarNoteContent](./src/components/SidebarNoteContent.tsx) client slot,
   which owns expand/collapse, the active highlight, and the title-change
   flash. `$key={note.id}` gives each occurrence entity identity, so when a
   mutation reorders the list, that client state follows the note rather than
-  the position.
-- [src/server/Note.tsx](./src/server/Note.tsx) — `Note.server.js`. The demo
-  switched one component on `isEditing`; here each mode is its own route, so
-  each is its own server component: `noteView` renders the markdown preview on
-  the server, `noteEditView` fills the
-  [NoteEditor](./src/components/NoteEditor.tsx) client slot with the note's
-  raw text.
-- [src/server/actions.ts](./src/server/actions.ts) — the mutations. Each
-  answers with `redirect()`, and that redirect is what powers single-flight.
+  the position. As in the demo, the title travels twice: as the `title` prop
+  the flash watches and in the header markup.
+- [src/routes/note.tsx](./src/routes/note.tsx) — `Note.js`. The demo switched
+  one component on `isEditing`; here each mode is its own route. The preview
+  route is a server component (the markdown renders on the server); the edit
+  route needs the note's raw text as data, so `getNoteEdit` is a plain query
+  answering the note itself.
+- [src/components/NoteEditor.tsx](./src/components/NoteEditor.tsx) —
+  `NoteEditor.js`, and the save and delete actions it posts. Each answers
+  with `redirect()`, and that redirect is what powers single-flight.
+- [src/components/SearchField.tsx](./src/components/SearchField.tsx) —
+  `SearchField.js`: a client component writing the `searchText` query param.
 
 ## What to look at
 
@@ -50,39 +54,41 @@ is a single `POST` to `/_server`, and its response is a frame stream carrying
 the redirect target, the fresh sidebar list, and the fresh note view — markup
 regions and data folded into the mutation's own response. No follow-up
 refetch. The router lands on the new URL and every affected boundary morphs
-in place.
+in place, while an open editor keeps its draft.
+
+**Each excerpt ships once.** A note's excerpt is only mounted while it is
+expanded, as in the demo. The server does not send collapsed excerpts as
+hidden markup: view source and each one is an `sc:region` record in the
+serialized data instead. Expand a note with the network tab open and no
+request goes out — the client mounts the excerpt from that record.
 
 **The markdown library never ships for reading.** Notes render to HTML on the
-server (`NotePreview` inside `noteView`), so `marked` is absent from the
-initial client bundle. Only the editor's live preview needs it in the browser,
-so the editor routes are `lazy()` ([src/routes.ts](./src/routes.ts)) and the
-chunk downloads when you head to `/new` or an edit page — the router even
-warms it on link hover. This is the same code-splitting story the React demo
-made its centerpiece.
+server (`NotePreview` inside the note route's server component), so `marked`
+is absent from the initial client bundle. Only the editor's live preview
+needs it in the browser, so the editor routes are `lazy()`
+([src/router.tsx](./src/router.tsx)) and the chunk downloads when you head to
+`/new` or an edit page — the router even warms it on link hover. This is the
+same code-splitting story the React demo made its centerpiece.
 
-**Search is client + server together.**
-[SearchField](./src/components/SearchField.tsx) is a client component writing
-a query param; the list it filters is a server component keyed by that param.
-Typing re-calls `noteListView(searchText)` and the sidebar boundary morphs —
-the expanded/collapsed state of surviving notes stays put, because `$key`
-keeps their client slots attached.
+**Search is client + server together.** The search field writes a query
+param; the list it filters is a server component keyed by that param. Typing
+re-calls `getNoteList(searchText)` and the sidebar boundary morphs — the
+expanded/collapsed state of surviving notes stays put, because `$key` keeps
+their client slots attached.
 
 ## How single-flight is wired
 
-The pieces are deliberately small:
+The pieces are deliberately small, and match the fullstack template:
 
-- [src/lib/api.ts](./src/lib/api.ts) — the server components wrapped in the
-  router's `query()` (cache identity, preload participation, and the names
-  flight collection is keyed by); the mutations wrapped in `action()`.
-- [src/routes.ts](./src/routes.ts) — routes declare `preload`s that call those
-  queries. This module has two consumers: the app root builds the Router from
-  it, and…
+- [src/router.tsx](./src/router.tsx) — the queries and the routes that
+  preload them, in their own module so it has two consumers: the shell
+  renders this Router, and…
 - [src/server-config.ts](./src/server-config.ts) — …the server-function
-  handler registers the router's flight collector over the same routes. When
-  an action returns `redirect()`, the collector reruns the destination's
-  preloads in data-only mode and folds everything they produce — server
-  component markup as frame regions, plain values as data — into the
-  mutation's response.
+  handler registers the router's flight collector over the same instance.
+  When an action returns `redirect()`, the collector reruns the destination's
+  server route and preloads in data-only mode and folds everything they
+  produce — server component markup as frame regions, plain values as data —
+  into the mutation's response.
 - [vite.config.ts](./vite.config.ts) — the same turnkey setup as the
   HackerNews twin plus one line: `serverFunctions.configure` names the module
   above. `components: true` is still the only flag that turns on server
diff --git a/examples/notes/package.json b/examples/notes/package.json
index bd796ec5f7..ca9cedb4e7 100644
--- a/examples/notes/package.json
+++ b/examples/notes/package.json
@@ -13,7 +13,7 @@
     "typecheck": "tsc --noEmit"
   },
   "dependencies": {
-    "@solidjs/router": "2.0.0-next.29",
+    "@solidjs/router": "2.0.0-next.38",
     "@solidjs/web": "workspace:*",
     "date-fns": "^3.6.0",
     "marked": "^12.0.2",
@@ -21,7 +21,7 @@
     "unstorage": "^1.17.5"
   },
   "devDependencies": {
-    "@solidjs/vite-plugin": "3.0.0-next.35",
+    "@solidjs/vite-plugin": "3.0.0-next.49",
     "vite": "^8.0.0"
   }
 }
diff --git a/examples/notes/src/app.tsx b/examples/notes/src/app.tsx
index 1512ea1e34..6a5561f1e2 100644
--- a/examples/notes/src/app.tsx
+++ b/examples/notes/src/app.tsx
@@ -1,49 +1,54 @@
-// The client side of the app. Compare with the React demo's App.server.js:
-// the same composition, but the shell's markup lives in server/App.tsx and
-// this file only fills its client positions — the notes list (a server
-// component of its own, keyed by the search param) and the route outlet.
-// The search field isn't a client position either: its markup is server
-// chrome, and searchField() is a BINDING slot fill — the values and handlers
-// the server template binds at positions on its own elements (§9.2.3).
-// Nothing here fetches data; every read
-// goes through a `dynamic()` over a server-component query. Links (the
-// New/Edit buttons) aren't client positions at all: the router intercepts
-// plain anchors, so they render entirely on the server.
-import { createRouter } from "@solidjs/router";
+// The app, and the React demo's App.js: static chrome around two boundaries.
+// The list and the note are server components — their markup arrives as HTML
+// — and they refresh fine-grained while the shell stands still: unlike the
+// original demo, navigation re-renders only the boundary that changed.
 import { Loading } from "solid-js";
-import { dynamic } from "@solidjs/web";
-import { appView } from "~/server/App";
-import { getNoteList } from "~/lib/api";
-import searchField from "~/components/searchField";
+import { dynamicComponent } from "@solidjs/web";
+import EditButton from "~/components/EditButton";
+import SearchField from "~/components/SearchField";
 import SidebarNoteContent from "~/components/SidebarNoteContent";
-import { preload, routes } from "~/routes";
+import { getNoteList, Router } from "~/router";
 import "./app.css";
 
-const Router = createRouter({ routes, preload });
-
 export default function App() {
-  // Static chrome: rendered inline at t=0, adopted by the client, never
-  // refetched (no reactive input).
-  const AppShell = dynamic(() => appView());
   return (
     <Router>
       {props => {
         // The list refetches when the search param changes — and morphs in
         // place when a mutation's single-flight response includes it.
-        const NoteList = dynamic(() => getNoteList(String(props.location.query.searchText || "")));
+        const NoteList = dynamicComponent(() =>
+          getNoteList(String(props.location.query.searchText || ""))
+        );
         return (
-          <Loading fallback={<div class="main">Loading...</div>}>
-            <AppShell
-              search={searchField()}
-              noteList={
+          <div class="main">
+            <section class="col sidebar">
+              <section class="sidebar-header">
+                <a href="/">
+                  <img
+                    class="logo"
+                    src="/logo.svg"
+                    width="22px"
+                    height="20px"
+                    alt=""
+                    role="presentation"
+                  />
+                </a>
+                <strong>Solid Notes</strong>
+              </section>
+              <section class="sidebar-menu" role="menubar">
+                <SearchField />
+                <EditButton>New</EditButton>
+              </section>
+              <nav>
                 <Loading fallback="Loading Notes..">
                   <NoteList item={p => <SidebarNoteContent {...p} />} />
                 </Loading>
-              }
-            >
+              </nav>
+            </section>
+            <section class="col note-viewer">
               <Loading fallback="Loading Content">{props.children}</Loading>
-            </AppShell>
-          </Loading>
+            </section>
+          </div>
         );
       }}
     </Router>
diff --git a/examples/notes/src/components/NoteEditor.tsx b/examples/notes/src/components/NoteEditor.tsx
index 477d68b01c..cdcd716819 100644
--- a/examples/notes/src/components/NoteEditor.tsx
+++ b/examples/notes/src/components/NoteEditor.tsx
@@ -5,23 +5,45 @@
  * LICENSE file in the root directory of this source tree.
  *
  */
-// The demo's NoteEditor.client.js. The forms post through the router's
-// actions: `saveNote` / `deleteNote` answer with a redirect, and because the
-// server registered a flight collector, that one response also carries the
-// fresh sidebar list and (for save) the fresh note view — submit to settled
-// UI in a single round trip. The live preview reuses the same NotePreview the
-// note's server component renders — the shared-module half of the demo.
+// The demo's NoteEditor.client.js, and the mutations it posts. Each action
+// answers with `redirect()` — and that redirect is what powers single-flight:
+// the server-function runtime hands the target URL to the router's flight
+// collector (see ../server-config.ts), which reruns the destination's server
+// route and preloads, so the response carries the redirect, the fresh sidebar
+// list, and (for save) the fresh note view — submit to settled UI in one round
+// trip. No revalidate keys are named, so everything the destination shows
+// refreshes: the original demo's "refetch the app" semantics, paid only for
+// the regions that actually show. The live preview reuses the same
+// NotePreview the note's server component renders — the shared-module half of
+// the demo.
+import { action } from "@solidjs/router";
 import { createSignal, untrack } from "solid-js";
-import { deleteNote, saveNote } from "~/lib/api";
+import { redirect } from "@solidjs/web";
+import * as db from "~/server/db";
 import NotePreview from "./NotePreview";
 
+const saveNote = action(async (id: number | undefined, formData: FormData) => {
+  "use server";
+  const saved = await db.saveNote(
+    id,
+    String(formData.get("title") ?? ""),
+    String(formData.get("body") ?? "")
+  );
+  return redirect(`/notes/${saved}`);
+});
+
+const deleteNote = action(async (id: number) => {
+  "use server";
+  await db.deleteNote(id);
+  return redirect("/");
+});
+
 export default function NoteEditor(props: {
   noteId?: number;
   initialTitle: string;
   initialBody: string;
 }) {
-  // Slot args are live — a server morph can push fresh values through these
-  // props. This editor seeds its own state from them ONCE by contract (the
+  // This editor seeds its own state from its props ONCE by contract (the
   // `initial*` names), so read them under `untrack` to declare that intent.
   const initial = untrack(() => ({
     noteId: props.noteId,
diff --git a/examples/notes/src/components/NotePreview.tsx b/examples/notes/src/components/NotePreview.tsx
index 755ee01d71..0a4a6f05df 100644
--- a/examples/notes/src/components/NotePreview.tsx
+++ b/examples/notes/src/components/NotePreview.tsx
@@ -1,5 +1,5 @@
 // The shared markdown renderer — the direct analogue of the React demo's
-// NotePreview.js. The server component (server/Note.tsx) renders it on the
+// NotePreview.js. The server component (routes/note.tsx) renders it on the
 // server, where its output is plain HTML in the frame stream; the editor
 // (NoteEditor.tsx) renders it in the browser for the live preview. `marked`
 // ships to the client only because the editor imports it — a note that is
diff --git a/examples/notes/src/components/SearchField.tsx b/examples/notes/src/components/SearchField.tsx
new file mode 100644
index 0000000000..c2c098709d
--- /dev/null
+++ b/examples/notes/src/components/SearchField.tsx
@@ -0,0 +1,37 @@
+/**
+ * Copyright (c) Facebook, Inc. and its affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ */
+// The demo's SearchField.client.js. Search state is the `?searchText` query
+// param, so typing navigates — the router reruns the root preload and the
+// notes-list server component refetches, morphing the list boundary in place.
+// The input restores the param on deep links and back/forward; the spinner
+// tracks the pending list.
+import { useSearchParams } from "@solidjs/router";
+import { isPending } from "solid-js";
+
+export default function SearchField() {
+  const [search, setParams] = useSearchParams();
+  const isSearching = () => !!isPending(() => search.searchText);
+  return (
+    <form class="search" role="search" onSubmit={e => e.preventDefault()}>
+      <label class="offscreen" for="sidebar-search-input">
+        Search for a note by title
+      </label>
+      <input
+        id="sidebar-search-input"
+        placeholder="Search"
+        value={(search.searchText as string) || ""}
+        onInput={e => setParams({ searchText: e.currentTarget.value })}
+      />
+      <div
+        class={{ spinner: true, "spinner--active": isSearching() }}
+        role="progressbar"
+        aria-busy={isSearching() ? "true" : "false"}
+      />
+    </form>
+  );
+}
diff --git a/examples/notes/src/components/SidebarNoteContent.tsx b/examples/notes/src/components/SidebarNoteContent.tsx
index 5402479a44..3f97dcb041 100644
--- a/examples/notes/src/components/SidebarNoteContent.tsx
+++ b/examples/notes/src/components/SidebarNoteContent.tsx
@@ -12,6 +12,10 @@
 // flash animation fires when the title arg CHANGES on the same occurrence —
 // entity identity across single-flight morphs, courtesy of the `$key` the
 // server names each occurrence with.
+//
+// The excerpt mounts only while expanded, as in the demo. A collapsed note's
+// excerpt is never placed, so the server sends it once as a record rather than
+// as hidden markup, and expanding mounts it from that record with no request.
 import { useLocation } from "@solidjs/router";
 import { createEffect, createSignal, Show } from "solid-js";
 import type { JSX } from "@solidjs/web";
@@ -69,7 +73,7 @@ export default function SidebarNoteContent(props: {
           <img src="/chevron-up.svg" width="10px" height="10px" alt="Expand" />
         </Show>
       </button>
-      <div style={{ display: isExpanded() ? "block" : "none" }}>{props.expandedChildren}</div>
+      {isExpanded() && props.expandedChildren}
     </div>
   );
 }
diff --git a/examples/notes/src/components/searchField.ts b/examples/notes/src/components/searchField.ts
deleted file mode 100644
index f81cb92deb..0000000000
--- a/examples/notes/src/components/searchField.ts
+++ /dev/null
@@ -1,58 +0,0 @@
-/**
- * Copyright (c) Facebook, Inc. and its affiliates.
- *
- * This source code is licensed under the MIT license found in the
- * LICENSE file in the root directory of this source tree.
- *
- */
-// The demo's SearchField.client.js, dissolved. The search field's MARKUP
-// lives in the server shell (server/App.tsx); what remains here is the
-// behavior the client contributes, as ONE binding slot (principles §9.2.3):
-// the server calls `props.search()` once and reads the returned object's
-// properties at positions — `value`/`onInput` on the input, `onSubmit` on
-// the form, the spinner's active class and `aria-busy`. The client binds
-// exactly those positions on the server's elements.
-//
-// The fill runs once, as a component body does, so the values are getters
-// over router state: the input restores `?searchText` on deep links and
-// back/forward, the spinner tracks the pending navigation. Before
-// binding slots this file was refs hand-syncing that DOM (the pattern's
-// boundary then — an element whose STATE tracks client reactivity wanted a
-// client component). Now the binding is what the template says: a value
-// position over client state is the same one line on both sides.
-//
-// Search state itself is unchanged: the `?searchText` query param, so typing
-// navigates — the router reruns the root preload and the notes-list server
-// component refetches, morphing the list boundary in place.
-import { useSearchParams } from "@solidjs/router";
-import { isPending } from "solid-js";
-
-/** What the client decides about the search field. */
-export interface SearchBehavior {
-  value: string;
-  active: boolean;
-  /** `aria-busy` wants the string, not the boolean's bare attribute. */
-  busy: "true" | "false";
-  onInput: (e: InputEvent) => void;
-  onSubmit: (e: SubmitEvent) => void;
-}
-
-export default function searchField() {
-  const [search, setParams] = useSearchParams();
-  const isSearching = () => !!isPending(() => search.searchText);
-  return (): SearchBehavior => ({
-    get value() {
-      return (search.searchText as string) || "";
-    },
-    get active() {
-      return isSearching();
-    },
-    get busy() {
-      return isSearching() ? "true" : "false";
-    },
-    onInput: (e: InputEvent) => {
-      setParams({ searchText: (e.target as HTMLInputElement).value });
-    },
-    onSubmit: (e: SubmitEvent) => e.preventDefault()
-  });
-}
diff --git a/examples/notes/src/lib/api.ts b/examples/notes/src/lib/api.ts
deleted file mode 100644
index abeb1aae76..0000000000
--- a/examples/notes/src/lib/api.ts
+++ /dev/null
@@ -1,16 +0,0 @@
-// The client-facing data surface: the server components wrapped in the
-// router's `query` (cache identity + preload participation — and the names
-// single-flight collection is keyed by), the mutations wrapped in `action`.
-// Note what ISN'T here: the shell (server/App.tsx) is chrome, not data — it
-// renders once and is never refetched, so it goes through `dynamic()` alone.
-import { action, query } from "@solidjs/router";
-import { noteListView } from "~/server/NoteList";
-import { noteEditView, noteView } from "~/server/Note";
-import { deleteNote as deleteNoteImpl, saveNote as saveNoteImpl } from "~/server/actions";
-
-export const getNoteList = query(noteListView, "notes");
-export const getNote = query(noteView, "note");
-export const getNoteEdit = query(noteEditView, "note-edit");
-
-export const saveNote = action(saveNoteImpl);
-export const deleteNote = action(deleteNoteImpl);
diff --git a/examples/notes/src/lib/db.ts b/examples/notes/src/lib/db.ts
deleted file mode 100644
index 1f0149eb05..0000000000
--- a/examples/notes/src/lib/db.ts
+++ /dev/null
@@ -1,42 +0,0 @@
-// The note store, server-only: this module is only imported by "use server"
-// modules, so unstorage never reaches the client build. Server functions run
-// in the same process (and module graph) as the SSR renderer on both the dev
-// and prod surfaces, so module-level memory is shared by document renders,
-// server-component calls, and mutations alike. Notes reset on server restart
-// (and dev-time module reloads); swap the driver for the key-value store of
-// your choice in a deployed environment.
-import { createStorage } from "unstorage";
-import memoryDriver from "unstorage/drivers/memory";
-import type { Note } from "./types";
-
-export const storage = createStorage({
-  driver: memoryDriver()
-});
-
-// The seed content from the original React server-components demo.
-const SEED: Omit<Note, "id" | "updatedAt">[] = [
-  {
-    title: "Meeting Notes",
-    body: "This is an example note. It contains **Markdown**!"
-  },
-  {
-    title: "Make a thing",
-    body: "It's very easy to make some words **bold** and other words *italic* with Markdown. You can even [link to Solid's website!](https://www.solidjs.com)."
-  },
-  {
-    title: "A note with a very long title because sometimes you need more words",
-    body: "You can write all kinds of [amazing](https://en.wikipedia.org/wiki/The_Amazing) notes in this app! These notes live in memory on the server.\n\nThis note also has a very long title and a fairly long body content, so you can see what those look like in the UI."
-  }
-];
-
-export async function allNotes(): Promise<Note[]> {
-  const notes = (await storage.getItem("notes:data")) as Note[] | null;
-  if (notes) return notes;
-  const now = new Date().toISOString();
-  const seeded = SEED.map((note, id) => ({ id, ...note, updatedAt: now }));
-  await Promise.all([
-    storage.setItem("notes:data", seeded),
-    storage.setItem("notes:counter", seeded.length)
-  ]);
-  return seeded;
-}
diff --git a/examples/notes/src/router.tsx b/examples/notes/src/router.tsx
new file mode 100644
index 0000000000..b01317e1fa
--- /dev/null
+++ b/examples/notes/src/router.tsx
@@ -0,0 +1,127 @@
+// The router lives in its own module so app.tsx (render) and server-config.ts
+// (the single-flight collector) share one instance, as in the fullstack
+// template. The collector reruns these routes' server calls and preloads for
+// a mutation's target URL, so the sidebar list's query lives here too: the
+// root preload names it, on every route, filtered by the search param.
+import { createRouter, defineRoute, intentPreload, query } from "@solidjs/router";
+import { lazy, type ComponentProps } from "solid-js";
+import type { Slot } from "@solidjs/web/frames";
+import { format, isToday } from "date-fns";
+import { marked } from "marked";
+import * as db from "~/server/db";
+import type SidebarNoteContent from "~/components/SidebarNoteContent";
+import Home from "~/routes/home";
+import Note, { getNoteEdit } from "~/routes/note";
+import NotFound from "~/routes/not-found";
+
+type ItemSlot = Slot<ComponentProps<typeof SidebarNoteContent>>;
+
+const ENTITIES: Record<string, string> = {
+  amp: "&",
+  lt: "<",
+  gt: ">",
+  quot: '"',
+  "#39": "'"
+};
+
+/**
+ * The demo's excerpt: the rendered note as plain text, cut to 20 words. It
+ * runs on the server, so `marked` costs the sidebar nothing in the browser.
+ * The decode undoes the five characters marked escapes, so JSX escapes them
+ * once.
+ */
+function excerpt(body: string) {
+  const text = (marked(body) as string)
+    .replace(/<[^>]*>/g, "")
+    .replace(/&(amp|lt|gt|quot|#39);/g, (_, name) => ENTITIES[name]);
+  const words = text.split(/\s+/).filter(Boolean);
+  const summary = words.slice(0, 20).join(" ");
+  return words.length > 20 ? summary + "…" : summary;
+}
+
+// The React demo's NoteList.js + SidebarNote.js: the sidebar list, keyed by
+// the search text. Each note's header and excerpt are server markup handed
+// into the SidebarNoteContent client slot, which owns the expand/collapse
+// state, the active highlight, and the flash animation — the demo's split,
+// expressed as a slot instead of a client import.
+//
+// `$key: note.id` gives each occurrence entity identity: when a mutation
+// morphs this list (a note added, removed, or renamed reorders positions),
+// per-note client state and the title-change flash follow the note rather
+// than the position.
+export const getNoteList = query(async (searchText: string) => {
+  "use server";
+  const notes = await db.findNotes(searchText);
+
+  // The sidebar filter IS the `?searchText` query param, so a note-open link
+  // that drops it would clear the search box on click. This component
+  // re-renders with the current searchText on every change, so it bakes the
+  // carry-forward href right into the slot args — no client-side URL
+  // plumbing. (The shell's New/Edit anchors never see the live query, so
+  // entering the editor intentionally leaves the filter behind.)
+  const search = searchText ? `?searchText=${encodeURIComponent(searchText)}` : "";
+
+  return (props: { item: ItemSlot }) =>
+    notes.length ? (
+      <ul class="notes-list">
+        {notes.map(note => {
+          const updatedAt = new Date(note.updatedAt);
+          const summary = excerpt(note.body);
+          return (
+            <li>
+              <props.item
+                $key={note.id}
+                id={note.id}
+                title={note.title}
+                href={`/notes/${note.id}${search}`}
+                expandedChildren={
+                  <p class="sidebar-note-excerpt">{summary || <i>(No content)</i>}</p>
+                }
+              >
+                <header class="sidebar-note-header">
+                  <strong>{note.title}</strong>
+                  <small>
+                    {isToday(updatedAt)
+                      ? format(updatedAt, "h:mm bb")
+                      : format(updatedAt, "M/d/yy")}
+                  </small>
+                </header>
+              </props.item>
+            </li>
+          );
+        })}
+      </ul>
+    ) : (
+      <div class="notes-empty">
+        {searchText ? `Couldn't find any notes titled "${searchText}".` : "No notes created yet!"}
+      </div>
+    );
+}, "notes");
+
+// The editor routes are the only client code that needs the markdown library
+// (NoteEditor's live preview), so they load lazily: `marked` stays out of the
+// initial bundle and only downloads when you head to an editor — the router
+// warms the chunk on link hover, alongside the route's data preload.
+// Everything else renders markdown on the server, where the library never
+// ships at all.
+const NewNote = lazy(() => import("~/routes/new"));
+const EditNote = lazy(() => import("~/routes/edit"));
+
+// `intentPreload` warms a link's route on hover, focus, and touch, which is
+// what gets the lazy editor chunk (and its data) fetched before the click.
+// Link preloading is opt-in as of router 2.0.0-next.38.
+export const Router = createRouter({
+  preloadLinks: intentPreload(),
+  routes: [
+    defineRoute({ path: "/", component: Home }),
+    defineRoute({ path: "/new", component: NewNote }),
+    defineRoute({ path: "/notes/:id", component: Note }),
+    defineRoute({
+      path: "/notes/:id/edit",
+      component: EditNote,
+      preload: ({ params }) => void getNoteEdit(+params.id)
+    }),
+    defineRoute({ path: "*404", component: NotFound })
+  ],
+  preload: ({ location }) => void getNoteList(String(location.query.searchText || ""))
+});
diff --git a/examples/notes/src/routes.ts b/examples/notes/src/routes.ts
deleted file mode 100644
index f67744d37a..0000000000
--- a/examples/notes/src/routes.ts
+++ /dev/null
@@ -1,41 +0,0 @@
-// The route tree and root preload, in their own module because two consumers
-// need them: the app root (app.tsx) builds the Router from them, and the
-// server-function config (server-config.ts) hands them to the single-flight
-// collector — which reruns exactly these preloads for a mutation's target URL
-// to produce the response's regions and data.
-import { lazy } from "solid-js";
-import { defineRoute, defineRoutes, type RoutePreloadFunc } from "@solidjs/router";
-import { getNote, getNoteEdit, getNoteList } from "~/lib/api";
-import Home from "~/routes/home";
-import Note from "~/routes/note";
-import NotFound from "~/routes/not-found";
-
-// The editor routes are the only client code that needs the markdown library
-// (NoteEditor's live preview), so they load lazily: `marked` stays out of the
-// initial bundle and only downloads when you head to an editor — the router
-// even warms the chunk on link hover, alongside the route's data preload.
-// Everything ELSE renders markdown on the server (NotePreview inside the
-// noteView server component), where the library never ships at all.
-const NewNote = lazy(() => import("~/routes/new"));
-const EditNote = lazy(() => import("~/routes/edit"));
-
-export const routes = defineRoutes([
-  defineRoute({ path: "/", component: Home }),
-  defineRoute({ path: "/new", component: NewNote }),
-  defineRoute({
-    path: "/notes/:id",
-    component: Note,
-    preload: ({ params }) => void getNote(+params.id)
-  }),
-  defineRoute({
-    path: "/notes/:id/edit",
-    component: EditNote,
-    preload: ({ params }) => void getNoteEdit(+params.id)
-  }),
-  defineRoute({ path: "*404", component: NotFound })
-]);
-
-// The sidebar list preloads at the root — it shows on every route, filtered
-// by the search param.
-export const preload: RoutePreloadFunc = ({ location }) =>
-  void getNoteList(String(location.query.searchText || ""));
diff --git a/examples/notes/src/routes/edit.tsx b/examples/notes/src/routes/edit.tsx
index df7dd9e018..963e43d5fd 100644
--- a/examples/notes/src/routes/edit.tsx
+++ b/examples/notes/src/routes/edit.tsx
@@ -1,9 +1,23 @@
 import type { RouteProps } from "@solidjs/router";
-import { dynamic } from "@solidjs/web";
+import { createMemo, Show } from "solid-js";
 import NoteEditor from "~/components/NoteEditor";
-import { getNoteEdit } from "~/lib/api";
+import { getNoteEdit } from "~/routes/note";
 
 export default function EditNote(props: RouteProps<"/notes/:id/edit">) {
-  const View = dynamic(() => getNoteEdit(+props.params.id));
-  return <View editor={p => <NoteEditor {...p} />} />;
+  const note = createMemo(() => getNoteEdit(+props.params.id));
+  // Keyed: the editor seeds its draft from the note once, so another note
+  // (edit/1 -> edit/2 reuses this route) must mount a fresh editor.
+  return (
+    <Show
+      when={note()}
+      keyed
+      fallback={
+        <div class="note--empty-state">
+          <span class="note-text--empty-state">Couldn't find note with id {props.params.id}.</span>
+        </div>
+      }
+    >
+      {note => <NoteEditor noteId={note.id} initialTitle={note.title} initialBody={note.body} />}
+    </Show>
+  );
 }
diff --git a/examples/notes/src/routes/note.tsx b/examples/notes/src/routes/note.tsx
index 65248c811e..26b3067dd4 100644
--- a/examples/notes/src/routes/note.tsx
+++ b/examples/notes/src/routes/note.tsx
@@ -1,11 +1,64 @@
-import type { RouteProps } from "@solidjs/router";
-import { dynamic } from "@solidjs/web";
-import { getNote } from "~/lib/api";
-
-export default function Note(props: RouteProps<"/notes/:id">) {
-  // The note view is pure server markup — even its Edit button is a plain
-  // server-rendered anchor (the router intercepts anchor clicks), so there
-  // are no client slots to fill here.
-  const View = dynamic(() => getNote(+props.params.id));
-  return <View />;
+// The React demo's Note.js. The demo switched one server component on
+// `isEditing`; here each mode is its own query with its own cache key.
+// `getNote` is the preview route itself — a server route, so the router
+// makes the call from the match on navigation and on link hover, and the
+// single-flight collector reruns it after a save. The preview is markup, so
+// it is a server component; the editor needs the note's raw text as data, so
+// `getNoteEdit` answers the note itself. It lives here because the edit route
+// is lazy (it is the only client code that needs `marked`) while the route
+// table must preload it eagerly.
+//
+// Nothing below the imports reaches the browser except the route: the
+// client build replaces each `"use server"` body with a reference, and
+// NotePreview, date-fns and the store are imported by those bodies alone.
+import {
+  query,
+  serverRouteComponent,
+  type RouteParams,
+  type ServerRouteArgs
+} from "@solidjs/router";
+import { format } from "date-fns";
+import * as db from "~/server/db";
+import EditButton from "~/components/EditButton";
+import NotePreview from "~/components/NotePreview";
+
+function notFound(id: number) {
+  return () => (
+    <div class="note--empty-state">
+      <span class="note-text--empty-state">Couldn't find note with id {id}.</span>
+    </div>
+  );
 }
+
+const getNote = query(async ({ params }: ServerRouteArgs<RouteParams<"/notes/:id">>) => {
+  "use server";
+  const id = +params.id;
+  const note = await db.getNote(id);
+  if (!note) return notFound(id);
+
+  const updatedAt = format(new Date(note.updatedAt), "d MMM yyyy 'at' h:mm bb");
+  // EditButton renders on the server: it's a plain anchor, and document-level
+  // link interception makes server-rendered hrefs SPA-navigate — no slot, no
+  // client module.
+  return () => (
+    <div class="note">
+      <div class="note-header">
+        <h1 class="note-title">{note.title}</h1>
+        <div class="note-menu" role="menubar">
+          <small class="note-updated-at" role="status">
+            Last updated on {updatedAt}
+          </small>
+          <EditButton noteId={note.id}>Edit</EditButton>
+        </div>
+      </div>
+      <NotePreview body={note.body} />
+    </div>
+  );
+}, "note");
+
+export const getNoteEdit = query(async (id: number) => {
+  "use server";
+  return (await db.getNote(id)) ?? null;
+}, "note-edit");
+
+export default serverRouteComponent(getNote);
diff --git a/examples/notes/src/server-config.ts b/examples/notes/src/server-config.ts
index 6f3d30a92f..ef3ff93e82 100644
--- a/examples/notes/src/server-config.ts
+++ b/examples/notes/src/server-config.ts
@@ -2,13 +2,15 @@
 // configure` in vite.config.ts), before any dispatch. Registering the
 // router's flight collector is what turns mutations single-flight: when an
 // action answers with `redirect()`, the runtime hands the target URL here,
-// the collector reruns the matched routes' preloads in data-only mode, and
-// everything they collect — server-component markup as frame regions, plain
-// values as data — folds into the mutation's own response.
+// the collector reruns the matched routes' server calls and preloads (and the
+// root preload) in data-only mode, and everything they collect —
+// server-component markup as frame regions, plain values as data — folds into
+// the mutation's own response. It takes the app's router, so the routes it
+// reruns are the ones the client is showing.
 import { configureServerFunctionsServer } from "@solidjs/web/server-functions/server";
 import { createFlightDataCollector } from "@solidjs/router/server";
-import { preload, routes } from "./routes";
+import { Router } from "./router";
 
 configureServerFunctionsServer({
-  collectFlightData: createFlightDataCollector({ routes, rootPreload: preload })
+  collectFlightData: createFlightDataCollector(Router)
 });
diff --git a/examples/notes/src/server/App.tsx b/examples/notes/src/server/App.tsx
deleted file mode 100644
index e0ee741759..0000000000
--- a/examples/notes/src/server/App.tsx
+++ /dev/null
@@ -1,79 +0,0 @@
-"use server";
-// The React demo's App.server.js: the application shell as a server
-// component. It is static chrome with two client positions — the notes list
-// and the route outlet — so its markup ships as HTML once at document SSR
-// and is never refetched. Unlike the original demo, navigation does NOT
-// re-render this tree: the list and the note are independent server
-// components (their own boundaries) that refresh fine-grained while the
-// shell stands still.
-//
-// The search field is NOT a client position either (the React demo's
-// SearchField.client.js, and this file's `search` slot until Stage 6): its
-// markup is server chrome like everything else, and the CLIENT contributes
-// a BINDING slot (principles §9.2.3) — one call, `props.search()`, returning
-// the values and handlers this template reads at positions: the input's
-// `value` and `onInput`, the form's `onSubmit`, the spinner's class and
-// `aria-busy`. The client owns exactly those positions; the router state
-// they track is the client's, so the reads are getters over it and each
-// position updates on its own. One input needed a whole shipped component
-// before; now it needs one small object — see searchField.ts.
-//
-// The New button is NOT a client position either: EditButton is a plain
-// anchor, and the router intercepts every same-origin <a> at the document
-// level, so server-rendered links SPA-navigate without shipping a component.
-// (The React demo needed a client component here because its navigation was
-// a context call — ours is just an href.)
-import type { JSX } from "@solidjs/web";
-import type { BindingSlot } from "@solidjs/web/frames";
-import EditButton from "~/components/EditButton";
-import type { SearchBehavior } from "~/components/searchField";
-
-export async function appView() {
-  return (props: {
-    search: BindingSlot<{}, SearchBehavior>;
-    noteList: JSX.Element;
-    children: JSX.Element;
-  }) => {
-    const search = props.search();
-    return (
-      <div class="main">
-        <section class="col sidebar">
-          <section class="sidebar-header">
-            <a href="/">
-              <img
-                class="logo"
-                src="/logo.svg"
-                width="22px"
-                height="20px"
-                alt=""
-                role="presentation"
-              />
-            </a>
-            <strong>Solid Notes</strong>
-          </section>
-          <section class="sidebar-menu" role="menubar">
-            <form class="search" role="search" onSubmit={search.onSubmit}>
-              <label class="offscreen" for="sidebar-search-input">
-                Search for a note by title
-              </label>
-              <input
-                id="sidebar-search-input"
-                placeholder="Search"
-                value={search.value}
-                onInput={search.onInput}
-              />
-              <div
-                class={{ spinner: true, "spinner--active": search.active }}
-                role="progressbar"
-                aria-busy={search.busy}
-              />
-            </form>
-            <EditButton>New</EditButton>
-          </section>
-          <nav>{props.noteList}</nav>
-        </section>
-        <section class="col note-viewer">{props.children}</section>
-      </div>
-    );
-  };
-}
diff --git a/examples/notes/src/server/Note.tsx b/examples/notes/src/server/Note.tsx
deleted file mode 100644
index d62981988d..0000000000
--- a/examples/notes/src/server/Note.tsx
+++ /dev/null
@@ -1,54 +0,0 @@
-"use server";
-// The React demo's Note.server.js. The demo switched one server component on
-// `isEditing`; here each mode is its own route, so each is its own server
-// component with its own cache key — `noteView` renders the preview (markdown
-// through the shared NotePreview, on the server), `noteEditView` fills the
-// NoteEditor client slot with the note's raw text as slot args.
-import { format } from "date-fns";
-import type { ComponentProps } from "solid-js";
-import type { Slot } from "@solidjs/web/frames";
-import { allNotes } from "~/lib/db";
-import EditButton from "~/components/EditButton";
-import NotePreview from "~/components/NotePreview";
-import type NoteEditor from "~/components/NoteEditor";
-
-function notFound(id: number) {
-  return () => (
-    <div class="note--empty-state">
-      <span class="note-text--empty-state">Couldn't find note with id {id}.</span>
-    </div>
-  );
-}
-
-export async function noteView(id: number) {
-  const note = (await allNotes()).find(note => note.id === id);
-  if (!note) return notFound(id);
-
-  const updatedAt = format(new Date(note.updatedAt), "d MMM yyyy 'at' h:mm bb");
-  // EditButton renders on the server: it's a plain anchor, and document-level
-  // link interception makes server-rendered hrefs SPA-navigate — no slot, no
-  // client module.
-  return () => (
-    <div class="note">
-      <div class="note-header">
-        <h1 class="note-title">{note.title}</h1>
-        <div class="note-menu" role="menubar">
-          <small class="note-updated-at" role="status">
-            Last updated on {updatedAt}
-          </small>
-          <EditButton noteId={note.id}>Edit</EditButton>
-        </div>
-      </div>
-      <NotePreview body={note.body} />
-    </div>
-  );
-}
-
-export async function noteEditView(id: number) {
-  const note = (await allNotes()).find(note => note.id === id);
-  if (!note) return notFound(id);
-
-  return (props: { editor: Slot<ComponentProps<typeof NoteEditor>> }) => (
-    <props.editor noteId={note.id} initialTitle={note.title} initialBody={note.body} />
-  );
-}
diff --git a/examples/notes/src/server/NoteList.tsx b/examples/notes/src/server/NoteList.tsx
deleted file mode 100644
index 3cff7f0172..0000000000
--- a/examples/notes/src/server/NoteList.tsx
+++ /dev/null
@@ -1,76 +0,0 @@
-"use server";
-// The React demo's NoteList.server.js + SidebarNote.js in one module: the
-// sidebar list, server-rendered. Each note's header and excerpt are server
-// markup handed into the SidebarNoteContent client slot, which owns the
-// expand/collapse state, the active highlight, and the flash animation —
-// exactly the demo's split, expressed as a slot instead of a client import.
-//
-// `$key: note.id` gives each occurrence entity identity: when a mutation
-// morphs this list (a note added, removed, or renamed reorders positions),
-// per-note client state and the title-change flash follow the note rather
-// than the position.
-import { format, isToday } from "date-fns";
-import type { ComponentProps } from "solid-js";
-import type { Slot } from "@solidjs/web/frames";
-import { allNotes } from "~/lib/db";
-import type SidebarNoteContent from "~/components/SidebarNoteContent";
-
-type ItemSlot = Slot<ComponentProps<typeof SidebarNoteContent>>;
-
-/** A plain-text summary, like the demo's excerpt of the note body. */
-function excerpt(body: string) {
-  const words = body.split(/\s+/);
-  const summary = words.slice(0, 20).join(" ");
-  return words.length > 20 ? summary + "…" : summary;
-}
-
-export async function noteListView(searchText: string) {
-  const notes = (await allNotes()).filter(
-    note => !searchText || note.title.toLowerCase().includes(searchText.toLowerCase())
-  );
-
-  // The sidebar filter IS the `?searchText` query param, so a note-open link
-  // that drops it would clear the search box on click. This component
-  // re-renders with the current searchText on every change, so it can bake
-  // the carry-forward href right into the slot args — no client-side URL
-  // plumbing. (The app shell's New/Edit anchors render once and never see
-  // the live query, so entering the editor intentionally leaves the browse
-  // filter behind.)
-  const search = searchText ? `?searchText=${encodeURIComponent(searchText)}` : "";
-
-  return (props: { item: ItemSlot }) =>
-    notes.length ? (
-      <ul class="notes-list">
-        {notes.map(note => {
-          const updatedAt = new Date(note.updatedAt);
-          const summary = excerpt(note.body);
-          return (
-            <li>
-              <props.item
-                $key={note.id}
-                id={note.id}
-                title={note.title}
-                href={`/notes/${note.id}${search}`}
-                expandedChildren={
-                  <p class="sidebar-note-excerpt">{summary || <i>(No content)</i>}</p>
-                }
-              >
-                <header class="sidebar-note-header">
-                  <strong>{note.title}</strong>
-                  <small>
-                    {isToday(updatedAt)
-                      ? format(updatedAt, "h:mm bb")
-                      : format(updatedAt, "M/d/yy")}
-                  </small>
-                </header>
-              </props.item>
-            </li>
-          );
-        })}
-      </ul>
-    ) : (
-      <div class="notes-empty">
-        {searchText ? `Couldn't find any notes titled "${searchText}".` : "No notes created yet!"}
-      </div>
-    );
-}
diff --git a/examples/notes/src/server/actions.ts b/examples/notes/src/server/actions.ts
deleted file mode 100644
index 702cba7275..0000000000
--- a/examples/notes/src/server/actions.ts
+++ /dev/null
@@ -1,46 +0,0 @@
-"use server";
-// The mutations. Each one answers with `redirect()` — and that redirect is
-// what powers single-flight: the server-function runtime hands the target URL
-// to the router's flight collector (see ../server-config.ts), which reruns the
-// destination's preloads, so the response carries the redirect, the fresh
-// sidebar list, and the fresh note — markup and data — in one round trip. No
-// revalidate keys are named, so everything the destination shows refreshes:
-// the same "refetch the app" semantics the original React demo had, paid only
-// for the regions that actually show.
-import { redirect } from "@solidjs/web";
-import { allNotes, storage } from "~/lib/db";
-
-export async function saveNote(id: number | undefined, formData: FormData) {
-  const title = String(formData.get("title") ?? "");
-  const body = String(formData.get("body") ?? "");
-  const notes = await allNotes();
-
-  if (id == undefined) {
-    const index = ((await storage.getItem("notes:counter")) as number) || notes.length;
-    await Promise.all([
-      storage.setItem("notes:data", [
-        ...notes,
-        { id: index, title, body, updatedAt: new Date().toISOString() }
-      ]),
-      storage.setItem("notes:counter", index + 1)
-    ]);
-    return redirect(`/notes/${index}`);
-  }
-
-  await storage.setItem(
-    "notes:data",
-    notes.map(note =>
-      note.id === id ? { id, title, body, updatedAt: new Date().toISOString() } : note
-    )
-  );
-  return redirect(`/notes/${id}`);
-}
-
-export async function deleteNote(id: number) {
-  const notes = await allNotes();
-  await storage.setItem(
-    "notes:data",
-    notes.filter(note => note.id !== id)
-  );
-  return redirect("/");
-}
diff --git a/examples/notes/src/server/db.ts b/examples/notes/src/server/db.ts
new file mode 100644
index 0000000000..75f9883995
--- /dev/null
+++ b/examples/notes/src/server/db.ts
@@ -0,0 +1,88 @@
+import "server-only";
+// The note store. Only `"use server"` bodies import it, and the client build
+// replaces those with references, so unstorage never reaches the browser; the
+// `server-only` marker fails the build if this module is ever imported from
+// client code. Server functions run in the same process (and module graph) as
+// the SSR renderer on both the dev and prod surfaces, so module-level memory
+// is shared by document renders, server-component calls, and mutations alike.
+// Notes reset on server restart (and dev-time module reloads); swap the driver
+// for the key-value store of your choice in a deployed environment.
+import { createStorage } from "unstorage";
+import memoryDriver from "unstorage/drivers/memory";
+import type { Note } from "~/types";
+
+const storage = createStorage({
+  driver: memoryDriver()
+});
+
+// The seed content from the original React server-components demo.
+const SEED: Omit<Note, "id" | "updatedAt">[] = [
+  {
+    title: "Meeting Notes",
+    body: "This is an example note. It contains **Markdown**!"
+  },
+  {
+    title: "Make a thing",
+    body: "It's very easy to make some words **bold** and other words *italic* with Markdown. You can even [link to Solid's website!](https://www.solidjs.com)."
+  },
+  {
+    title: "A note with a very long title because sometimes you need more words",
+    body: "You can write all kinds of [amazing](https://en.wikipedia.org/wiki/The_Amazing) notes in this app! These notes live in memory on the server.\n\nThis note also has a very long title and a fairly long body content, so you can see what those look like in the UI."
+  }
+];
+
+async function allNotes(): Promise<Note[]> {
+  const notes = (await storage.getItem("notes:data")) as Note[] | null;
+  if (notes) return notes;
+  const now = new Date().toISOString();
+  const seeded = SEED.map((note, id) => ({ id, ...note, updatedAt: now }));
+  await Promise.all([
+    storage.setItem("notes:data", seeded),
+    storage.setItem("notes:counter", seeded.length)
+  ]);
+  return seeded;
+}
+
+export async function getNote(id: number): Promise<Note | undefined> {
+  return (await allNotes()).find(note => note.id === id);
+}
+
+/**
+ * The notes whose title contains `searchText`, case-insensitively, newest
+ * first (the demo's `order by id desc`).
+ */
+export async function findNotes(searchText: string): Promise<Note[]> {
+  const needle = searchText.toLowerCase();
+  return (await allNotes())
+    .filter(note => !needle || note.title.toLowerCase().includes(needle))
+    .sort((a, b) => b.id - a.id);
+}
+
+/** Creates the note when `id` is undefined; answers the saved note's id. */
+export async function saveNote(id: number | undefined, title: string, body: string) {
+  const notes = await allNotes();
+  const updatedAt = new Date().toISOString();
+
+  if (id == undefined) {
+    const index = ((await storage.getItem("notes:counter")) as number) || notes.length;
+    await Promise.all([
+      storage.setItem("notes:data", [...notes, { id: index, title, body, updatedAt }]),
+      storage.setItem("notes:counter", index + 1)
+    ]);
+    return index;
+  }
+
+  await storage.setItem(
+    "notes:data",
+    notes.map(note => (note.id === id ? { id, title, body, updatedAt } : note))
+  );
+  return id;
+}
+
+export async function deleteNote(id: number) {
+  const notes = await allNotes();
+  await storage.setItem(
+    "notes:data",
+    notes.filter(note => note.id !== id)
+  );
+}
diff --git a/examples/notes/src/lib/types.ts b/examples/notes/src/types.ts
similarity index 100%
rename from examples/notes/src/lib/types.ts
rename to examples/notes/src/types.ts
diff --git a/examples/notes/src/vite-env.d.ts b/examples/notes/src/vite-env.d.ts
index 11f02fe2a0..c3957e75cc 100644
--- a/examples/notes/src/vite-env.d.ts
+++ b/examples/notes/src/vite-env.d.ts
@@ -1 +1,2 @@
 /// <reference types="vite/client" />
+/// <reference types="@solidjs/vite-plugin/boundary-modules" />
diff --git a/examples/rendering/package.json b/examples/rendering/package.json
index 66cd04dab4..f97d092464 100644
--- a/examples/rendering/package.json
+++ b/examples/rendering/package.json
@@ -20,12 +20,12 @@
     "clean": "rimraf */dist/"
   },
   "devDependencies": {
-    "@solidjs/vite-plugin": "3.0.0-next.35",
+    "@solidjs/vite-plugin": "3.0.0-next.49",
     "@solidjs/web": "workspace:*",
     "@types/node": "^25.6.0",
     "rimraf": "^3.0.2",
     "solid-js": "workspace:*",
     "typescript": "^6.0.2",
-    "vite": "^7.0.0"
+    "vite": "^8.0.0"
   }
 }
diff --git a/examples/room/README.md b/examples/room/README.md
index 88b8a8f977..8df703250b 100644
--- a/examples/room/README.md
+++ b/examples/room/README.md
@@ -15,6 +15,11 @@ both. Where [../chat](../chat) shows server-rendered markup that keeps
 changing after it arrives, this example is about liveness having **one
 declaration, one loop, and one status surface** across data and markup.
 
+It stays as the live-declaration test bed. The persistent-corner products
+(a real chat, a board) are handed off in
+[`examples-grid-plan.md`](../../documentation/plans/examples-grid-plan.md);
+this example is retired when they exist.
+
 ```sh
 pnpm dev                       # https://localhost:3010/  (self-signed cert)
 HTTPS=0 pnpm dev               # http://localhost:3010/   (HTTP/1.1 — see below)
@@ -32,8 +37,9 @@ open and close them.
 answers with a **component**, declared exactly like the data sources:
 `live(GET(async (room, me) => { "use server"; return props => <…/> }))`. The
 page ([src/routes/home.tsx](./src/routes/home.tsx)) mounts it with
-`dynamic(() => roomPanel(room, me))` — `dynamic` is a memo, and a `live`
-reference's answer is an async iterable it pumps like any other.
+`dynamicComponent(() => roomPanel(room, me))` — `dynamicComponent` is a
+memo, and a `live` reference's answer is an async iterable it pumps like
+any other.
 
 - **The render is the connection.** The component reads the same in-memory
   watchers `/live`'s sources read, through memos; every change re-renders the
@@ -65,8 +71,8 @@ reference's answer is an async iterable it pumps like any other.
   completes. The browser adopts that markup at hydration (no request, no
   fallback — the markup is the value) and connects once, from the identity
   the tab mints during hydration: `roomPanel(room, me)` is a different
-  call from the document's `roomPanel(room, null)`, and `dynamic` delivers
-  the new address into the same instance rather than remounting. The
+  call from the document's `roomPanel(room, null)`, and `dynamicComponent`
+  delivers the new address into the same instance rather than remounting. The
   document's render only watches — `join` runs when there is a `me` — so
   the tab's connection is the one that joins. Everything above (death →
   reconnect, the draft surviving) then starts from adopted content.
diff --git a/examples/room/package.json b/examples/room/package.json
index 1bf953fdf2..1b185e9123 100644
--- a/examples/room/package.json
+++ b/examples/room/package.json
@@ -13,12 +13,12 @@
     "typecheck": "tsc --noEmit"
   },
   "dependencies": {
-    "@solidjs/router": "2.0.0-next.29",
+    "@solidjs/router": "2.0.0-next.38",
     "@solidjs/web": "workspace:*",
     "solid-js": "workspace:*"
   },
   "devDependencies": {
-    "@solidjs/vite-plugin": "3.0.0-next.35",
+    "@solidjs/vite-plugin": "3.0.0-next.49",
     "@vitejs/plugin-basic-ssl": "^2.3.0",
     "vite": "^8.0.0"
   }
diff --git a/examples/room/src/app.tsx b/examples/room/src/app.tsx
index 50eff3a821..622d03ee3f 100644
--- a/examples/room/src/app.tsx
+++ b/examples/room/src/app.tsx
@@ -1,13 +1,13 @@
 // The app root: a router over routes.ts, under the tab's identity. Nothing
 // here fetches; every read on the live page is a memo or projection over a
 // server function.
-import { createRouter } from "@solidjs/router";
+import { createRouter, intentPreload } from "@solidjs/router";
 import { Loading } from "solid-js";
 import { IdentityProvider } from "~/lib/identity";
 import { routes } from "~/routes";
 import "./app.css";
 
-const Router = createRouter({ routes });
+const Router = createRouter({ routes, preloadLinks: intentPreload() });
 
 export default function App() {
   return (
diff --git a/examples/room/src/routes/home.tsx b/examples/room/src/routes/home.tsx
index 7cc7980489..eedd49cbfa 100644
--- a/examples/room/src/routes/home.tsx
+++ b/examples/room/src/routes/home.tsx
@@ -15,7 +15,7 @@
 // new call's stream in place (that connection is the one that joins the
 // room). Kill every connection and the loop reconnects from wherever it is.
 import { action, createSignal, latest, Loading, Show } from "solid-js";
-import { dynamic } from "@solidjs/web";
+import { dynamicComponent } from "@solidjs/web";
 import type { RouteSectionProps } from "@solidjs/router";
 import { useIdentity } from "~/lib/identity";
 import { roomPanel } from "~/lib/room-panel";
@@ -63,16 +63,17 @@ export default function Home(props: RouteSectionProps) {
   );
 }
 
-// `roomPanel(room, me)` is the reconnecting iterable itself, and `dynamic`
-// is a memo: it pumps the iterable as it pumps any async source, and its
-// value is the component the server answered with. A reconnect re-yields
-// the SAME binding — the memo stays quiet, nothing re-mounts, and the
-// reconnected render's markup lands as one morph. At t=0 the document's
-// markup IS the value: the memo adopts it during hydration, and the first
-// connection is the standing render's — here the call with the tab's
-// identity, which `dynamic` delivers into the adopted instance.
+// `roomPanel(room, me)` is the reconnecting iterable itself, and
+// `dynamicComponent` is a memo: it pumps the iterable as it pumps any async
+// source, and its value is the component the server answered with. A
+// reconnect re-yields the SAME binding — the memo stays quiet, nothing
+// re-mounts, and the reconnected render's markup lands as one morph. At t=0
+// the document's markup IS the value: the memo adopts it during hydration,
+// and the first connection is the standing render's — here the call with
+// the tab's identity, which `dynamicComponent` delivers into the adopted
+// instance.
 function Panel(props: { room: string; me: Identity | null; wire: Wire }) {
-  const Room = dynamic(() => props.wire.watch(roomPanel(props.room, props.me)));
+  const Room = dynamicComponent(() => props.wire.watch(roomPanel(props.room, props.me)));
   return (
     <Loading fallback={<p class="muted">Rendering the room on the server…</p>}>
       <Room composer={p => <Composer room={p.room} />} />
diff --git a/examples/sierpinski/package.json b/examples/sierpinski/package.json
index b796bdd94c..5e6cbee30f 100644
--- a/examples/sierpinski/package.json
+++ b/examples/sierpinski/package.json
@@ -13,11 +13,11 @@
     "typecheck": "tsc --noEmit -p tsconfig.json"
   },
   "devDependencies": {
-    "@solidjs/vite-plugin": "3.0.0-next.35",
+    "@solidjs/vite-plugin": "3.0.0-next.49",
     "@solidjs/web": "workspace:*",
     "@types/node": "^25.6.0",
     "solid-js": "workspace:*",
     "typescript": "^6.0.2",
-    "vite": "^7.0.0"
+    "vite": "^8.0.0"
   }
 }
diff --git a/examples/todos-server/README.md b/examples/todos-server/README.md
index 7f15c0ace1..8f2d8340fa 100644
--- a/examples/todos-server/README.md
+++ b/examples/todos-server/README.md
@@ -1,121 +1,97 @@
 # Todos — TodoMVC as a Solid Server Component
 
 The [../todos](../todos) example, with the list moved to the server. The
-markup that the SPA's `MainSection`, `TodoItem` and `Footer` produced is now
-returned by one `"use server"` component and arrives as HTML; the browser
-keeps the header, the optimistic state, and — the point of this example —
-every behavior those components had, bound to the server's own elements
-through **binding slots**. The row is one component, `TodoRow`, that both
-sides render.
+list is one `"use server"` query that returns a component
+([src/todo-list.tsx](./src/todo-list.tsx)); it arrives as HTML, and every
+control in it is a form that posts a mutation. Nothing in the list needs
+JavaScript to work, and none of it is client code.
 
-Same deliberately unreliable API as the SPA (400 ms saves, ~33% of them
-fail), so the optimistic UI, the per-item errors and the retry affordances
-get exercised.
+What JavaScript adds is **instant intent**: the moment you click, the page
+shows what you asked for — a toggle presses down, a deleted row dims — and
+the server's answer replaces it. It never shows a guess at the answer. The
+SPA twin predicts outcomes (a toggle checks itself, the count moves before
+the server agrees); this app shows the request, and lets the server say
+what happened.
+
+Same deliberately unreliable store as the SPA (400 ms saves, ~33% of them
+fail), so the in-flight marks, the failures and the retries get exercised.
 
 ```sh
 pnpm dev                  # http://localhost:3010
 pnpm build && pnpm start  # http://localhost:3010
 ```
 
-## Binding slots
+## Forms first
 
-A slot renders one of two things: markup (placed as `<props.pending />`) or
-**bindings** — a plain object the server template consumes by
-reading its properties at positions: an attribute, a class name, a style
-property, a handler, a ref. The server component calls the slot once per
-data context and reads from the result wherever it likes
-([src/server/todos.tsx](./src/server/todos.tsx)):
+Each mutation is a router `action` around a `"use server"` function
+([src/actions.ts](./src/actions.ts)). The list renders them as forms; a row
+binds its id with `.with()`, and the button carries the value it submits:
 
 ```tsx
-const list = props.list({ total, active, completed });
-const filters = props.filters();
-
-<section class="main" hidden={list.empty}>
-  <input id="toggle-all" type="checkbox" checked={list.allDone} onChange={list.onToggleAll} />
-  <ul class="todo-list">
-    {todos.map(t => (
-      <TodoRow id={t.id} title={t.title} row={props.row({ $key: t.id, id: t.id, completed: t.completed })} />
-    ))}
-    <props.pending />
-  </ul>
-</section>
-<a href="#/" class={{ selected: filters.all }}>All</a>
+<form class="toggle-form" action={toggleTodo.with(t.id)} method="post">
+  <button
+    class="toggle"
+    name="completed"
+    value={t.completed ? "false" : "true"}
+    aria-pressed={t.completed ? "true" : "false"}
+  />
+</form>
 ```
 
-`TodoRow` ([src/todo-row.tsx](./src/todo-row.tsx)) is the shared component:
-it binds `row.rowClass`, `row.removed`, `row.done`, `row.onToggle`,
-`row.onRemove`, `row.onRetry`, `row.error` at attribute, class, event and
-handler positions and cannot tell — does not need to — whether `row` is an
-binding slot's value (server) or the fill's result passed directly (client).
-
-The object is a props interface — `TodoRow` takes it as a prop on the client
-path — so it is named like one: handlers are `on` + intent (`onToggle`,
-`onRemove`; the position names the DOM event, the key names the meaning),
-values are nouns (`done`, `rowClass`, `error`), a ref is `ref`. The
-runtime reads nothing into the prefix — the position decides what a
-property is — but a reader can tell a handler from a value without the type.
-
-One rule: a slot property is a JSX attribute value, whole, and nothing else.
-`class={row.rowClass}` binds; ``class={`todo ${row.rowClass}`}``,
-`{row.title}` as text, or `if (row.done)` in the server component do not —
-the server has no value to compute with, so the decision belongs in the
-fill, which returns the decided value.
-
-The client's fill receives the args as reactive props and returns the
-**object** the template reads ([src/app.tsx](./src/app.tsx)):
-
-```tsx
-const rowFor = (p: Entity): RowBehavior => ({
-  get rowClass() { return { todo: true, completed: done(p.id, p.completed), pending: …, errored: … }; },
-  get done() { return done(p.id, p.completed); },
-  get removed() { return removed(p.id) || !visible(done(p.id, p.completed)); },
-  get error() { return errors[p.id] ? `Retry ${errors[p.id].type}` : undefined; },
-  onToggle: e => actions.toggleTodo(p.id, e.currentTarget.checked),
-  onRemove: () => actions.removeTodo(p.id, p.completed),
-  onRetry: () => actions.retryTodo(p.id)
-});
-
-<Todos list={listFor} row={rowFor} filters={() => ({ get all() { return filter === "all"; }, … })} pending={…} count={…} />
+Without JavaScript the browser posts, the server redirects back, and the
+page renders the stored state. With it, the router submits the same form
+through the action, and the response is **single-flight**
+([src/server-config.ts](./src/server-config.ts)): the POST reruns the
+page's preload, so one round trip carries the mutation's result and the
+list's fresh markup.
+
+Without JavaScript the page also has to arrive whole. The server streams by
+default: content that settles before the first flush is inlined into the
+document, and anything later arrives as markup that a script swaps into
+place. This example's reads answer immediately, so the list lands before
+the flush — but that is timing, not a guarantee. An app that has to work
+without JavaScript renders in the vite plugin's `async` mode
+(`start.renderMode`), which waits for the whole page before sending it:
+either always, or only for crawlers, chosen per request from the user agent.
+
+## Intent is CSS
+
+While a form's submission is in flight, the router marks it `aria-busy`.
+That attribute is all [src/app.css](./src/app.css) needs:
+
+```css
+.todo-list li:has(.toggle-form[aria-busy]) label { /* this row: asked */ }
+.todoapp:has(.toggle-all-form[aria-busy]) .todo-list li label { /* every row: asked */ }
+.todo-list li:has(.destroy-form[aria-busy]) { /* dims */ }
+.todoapp:has(.clear-completed-form[aria-busy]) .todo-list li.completed { /* dims */ }
 ```
 
-The values are getters because a fill runs once per occurrence, as a
-component body does: a top-level read in it is read once, and a getter is
-the reactive form — the same shape a client component's props object has,
-which is why the same `rowFor` result is also `TodoRow`'s prop for the
-pending rows. Handlers and refs are read once, when an element binds. On
-the server each read at a position marks the
-element (`_s:class="row#0001:rowClass"`, `_s:on:input="row#0001:onToggle"`);
-the client binds exactly those positions, writes the values that change,
-binds handlers as client JSX does (delegated where it delegates), and a response morphing the list
-skips the positions a fill owns. At document SSR the fill runs inline, so
-`checked` and `class="todo completed"` are in the HTML before JavaScript; on
-hydration the fill binds to the same nodes.
-
-## What the client holds
-
-The SPA kept the todo array on the client. This app never has it — the rows
-are markup. What it holds is **intent** (what it asked the server to do and
-has not heard back about) in a `createOptimisticStore`, and the errors it
-heard back in a plain store ([src/todos.ts](./src/todos.ts)). Fills combine
-those with each call's args:
-
-- toggle: `intent.byId[id]?.completed ?? p.completed`
-- remove: `hidden` on the server's `<li>`; the morph drops the row when the
-  refetch lands (or `hidden` reverts when the save fails)
-- add: the one thing the client cannot decorate is a row the server has not
-  rendered, so `<props.pending />` is a markup slot where the client renders
-  in-flight and failed adds — as `TodoRow` again, with `rowFor(todo)`, so a
-  pending row toggles and deletes like any other. Those actions wait for
-  the add to settle before calling the server (it has no such id yet); a
-  todo whose add failed lives only in its error record, so they edit that.
-- counts, toggle-all, clear-completed, filters: the server passes its
-  numbers and id lists as args; the fills adjust them by intent
-
-## Mutation shape
-
-Each action writes its intent, calls the server function, then
-`yield refresh(todos)` — the "typical multi-flight" shape: the write and the
-re-read are two requests, and the action's transaction spans both, so the
-optimistic value holds until the refetched markup and args have applied.
-(Under a router's single-flight mutations the fills are identical; only the
-hold differs.)
+`:has()` is what carries toggle-all and clear-completed to every row they
+touch — the cross-element feedback a single form can't express on its own.
+A mark that waits more than two seconds starts to pulse. Each mark belongs
+to its own submission, so overlapping requests don't clear each other's.
+
+## Errors are answers
+
+A failed save returns `{ error }` rather than throwing, so the failure is
+typed from the action to the client. The server words it — it knows the
+todo's title, the client doesn't. The router records each submission;
+`useSubmissions(action)` lists them, and `submission.retry()` runs the same
+call again. The route ([src/routes/todos.tsx](./src/routes/todos.tsx))
+renders the failures under the list — the one piece of client code the list
+has — and each action's `onSettled` clears the earlier answers to the same
+question, so a success dismisses an old error and a new failure takes its
+place. After a no-JavaScript post the router seeds the same list from its
+flash cookie, so the failures render on the server too — under the same
+condition as the list, since the cookie's decode is async.
+
+Adding works the same way: the header ([src/app.tsx](./src/app.tsx)) marks
+the input busy while the add is in flight, clears it on success, and keeps
+the text with the error and a retry on failure.
+
+## Prediction, when you want it
+
+Instant intent covers most interactions without client state. When an app
+should show the outcome before the server agrees — the SPA twin's
+behaviour — render that piece as a client component, where an optimistic
+store and ordinary JSX can predict it.
diff --git a/examples/todos-server/package.json b/examples/todos-server/package.json
index 199daa9d2f..90ad648ead 100644
--- a/examples/todos-server/package.json
+++ b/examples/todos-server/package.json
@@ -1,6 +1,6 @@
 {
   "name": "todos-server-example",
-  "description": "TodoMVC as a Solid Server Component — the list is server markup, and every optimistic behavior (toggle, remove, pending/error/retry, counts, filters) is a client fill over slot args and createOptimisticStore state: binding slots the server template reads at positions, a shared TodoRow on both sides, one markup slot for pending adds",
+  "description": "TodoMVC as a Solid Server Component — the list is server markup whose every control is a form that works without JavaScript; with it, binding slots add the optimism a form cannot express (toggle-all, clear-completed, the live count) and typed errors come back through useSubmissions",
   "version": "0.0.1-rc.2",
   "private": true,
   "author": "Ryan Carniato",
@@ -13,12 +13,13 @@
     "typecheck": "tsc --noEmit"
   },
   "dependencies": {
+    "@solidjs/router": "2.0.0-next.38",
     "@solidjs/web": "workspace:*",
     "solid-js": "workspace:*",
     "unstorage": "^1.17.5"
   },
   "devDependencies": {
-    "@solidjs/vite-plugin": "3.0.0-next.35",
+    "@solidjs/vite-plugin": "3.0.0-next.49",
     "vite": "^8.0.0"
   }
 }
diff --git a/examples/todos-server/src/actions.ts b/examples/todos-server/src/actions.ts
new file mode 100644
index 0000000000..93a9e519b3
--- /dev/null
+++ b/examples/todos-server/src/actions.ts
@@ -0,0 +1,53 @@
+// The mutations. Each one is a form's action: the server component renders
+// `<form action={toggleTodo.with(id)}>`, so every control works before
+// JavaScript loads (a no-JS post redirects back with the outcome in a flash
+// cookie), and after it the router submits the same form in place. The
+// value a button submits is the intent — `completed=true` — rather than
+// "flip", so two quick clicks each say what the user saw.
+//
+// None of them redirects: the response answers the page the form was posted
+// from (see ../server-config.ts), so it carries the outcome AND the list's
+// fresh markup in one round trip. A failed save answers `{ error }` rather
+// than throwing, so the failure is typed where the client reads it; the
+// server words it, because only the server knows the todo's title.
+import { action } from "@solidjs/router";
+import * as db from "~/server/db";
+
+/** The `completed` a toggle form submitted: the button's value. */
+export const completedOf = (form: FormData) => form.get("completed") === "true";
+
+async function titleOf(id: string) {
+  const todo = (await db.getTodos()).find(t => t.id === id);
+  return todo ? `“${todo.title}”` : "a todo";
+}
+
+export const addTodo = action(async (form: FormData) => {
+  "use server";
+  const title = String(form.get("title") ?? "").trim();
+  if (!title) return { error: "A todo needs a title" };
+  return db.addTodo(title);
+});
+
+export const toggleTodo = action(async (id: string, form: FormData) => {
+  "use server";
+  const completed = completedOf(form);
+  if (await db.toggleTodo(id, completed))
+    return { error: `Couldn't ${completed ? "complete" : "reopen"} ${await titleOf(id)}` };
+});
+
+export const removeTodo = action(async (id: string) => {
+  "use server";
+  if (await db.removeTodo(id)) return { error: `Couldn't delete ${await titleOf(id)}` };
+});
+
+export const toggleAll = action(async (form: FormData) => {
+  "use server";
+  const completed = completedOf(form);
+  if (await db.toggleAll(completed))
+    return { error: `Couldn't mark everything ${completed ? "complete" : "active"}` };
+});
+
+export const clearCompleted = action(async () => {
+  "use server";
+  if (await db.clearCompleted()) return { error: "Couldn't clear completed" };
+});
diff --git a/examples/todos-server/src/app.css b/examples/todos-server/src/app.css
index 249c846af6..9604944c03 100644
--- a/examples/todos-server/src/app.css
+++ b/examples/todos-server/src/app.css
@@ -115,26 +115,20 @@ body {
   border-top: 1px solid #e6e6e6;
 }
 
+/* The toggles are submit buttons in forms (they work without JavaScript),
+   so the checkbox styling keys off `aria-pressed` and the row's class
+   instead of `:checked`. */
 .toggle-all {
-  width: 1px;
-  height: 1px;
-  border: none;
-  opacity: 0;
-  position: absolute;
-  right: 100%;
-  bottom: 100%;
-}
-
-.toggle-all + label {
   width: 45px;
   height: 65px;
   font-size: 0;
   position: absolute;
   top: -65px;
-  left: -0;
+  left: 0;
+  cursor: pointer;
 }
 
-.toggle-all + label:before {
+.toggle-all:before {
   content: "❯";
   display: inline-block;
   font-size: 22px;
@@ -144,7 +138,7 @@ body {
   transform: rotate(90deg);
 }
 
-.toggle-all:checked + label:before {
+.toggle-all[aria-pressed="true"]:before {
   color: #484848;
 }
 
@@ -181,30 +175,21 @@ body {
 }
 
 .todo-list li .toggle {
-  text-align: center;
   width: 40px;
-  /* auto, since non-WebKit browsers doesn't support input styling */
-  height: auto;
+  height: 100%;
   position: absolute;
   top: 0;
-  bottom: 0;
-  margin: auto 0;
-  border: none; /* Mobile Safari */
-  -webkit-appearance: none;
-  appearance: none;
-}
-
-.todo-list li .toggle {
-  opacity: 0;
+  left: 0;
+  cursor: pointer;
 }
 
-.todo-list li .toggle + label {
+.todo-list li label {
   background-image: url("data:image/svg+xml;utf8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2240%22%20height%3D%2240%22%20viewBox%3D%22-10%20-18%20100%20135%22%3E%3Ccircle%20cx%3D%2250%22%20cy%3D%2250%22%20r%3D%2250%22%20fill%3D%22none%22%20stroke%3D%22%23949494%22%20stroke-width%3D%223%22%2F%3E%3C%2Fsvg%3E");
   background-repeat: no-repeat;
   background-position: center left;
 }
 
-.todo-list li .toggle:checked + label {
+.todo-list li.completed label {
   background-image: url("data:image/svg+xml;utf8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2240%22%20height%3D%2240%22%20viewBox%3D%22-10%20-18%20100%20135%22%3E%3Ccircle%20cx%3D%2250%22%20cy%3D%2250%22%20r%3D%2250%22%20fill%3D%22none%22%20stroke%3D%22%2359A193%22%20stroke-width%3D%223%22%2F%3E%3Cpath%20fill%3D%22%233EA390%22%20d%3D%22M72%2025L42%2071%2027%2056l-4%204%2020%2020%2034-52z%22%2F%3E%3C%2Fsvg%3E");
 }
 
@@ -359,7 +344,12 @@ html .clear-completed:active {
   text-decoration: underline;
 }
 
-/* Optimistic / saving / errored affordances */
+/* Instant intent. The router marks a form `aria-busy` while its submission
+   is in flight; these rules show what was asked for from that alone, and
+   never what the answer will be. A toggle presses down rather than checking
+   itself; a row being deleted or cleared dims rather than disappearing.
+   `:has()` carries the bulk forms to every row they touch. If the answer
+   takes longer than a couple of seconds, the mark starts to pulse. */
 
 .loading {
   padding: 20px;
@@ -368,49 +358,61 @@ html .clear-completed:active {
   color: #949494;
 }
 
-.todo.pending label {
-  opacity: 0.5;
-  font-style: italic;
+.todo-list li:has(.toggle-form[aria-busy]) label,
+.todoapp:has(.toggle-all-form[aria-busy]) .todo-list li label {
+  outline: 2px dashed #b83f45;
+  outline-offset: -6px;
+  opacity: 0.6;
+  animation: waiting 0.8s ease-in-out 2s infinite;
 }
 
-.todo.errored label {
-  color: #c91524;
+.todoapp:has(.toggle-all-form[aria-busy]) .toggle-all:before {
+  color: #b83f45;
 }
 
-.todo-list li .retry {
-  display: none;
-  position: absolute;
-  top: 0;
-  right: 10px;
-  bottom: 0;
-  width: 40px;
-  height: 40px;
-  margin: auto 0;
-  font-size: 24px;
-  color: #c91524;
-  cursor: pointer;
-  transition: color 0.2s ease-out;
+.todo-list li:has(.destroy-form[aria-busy]),
+.todoapp:has(.clear-completed-form[aria-busy]) .todo-list li.completed {
+  opacity: 0.35;
+  animation: waiting 0.8s ease-in-out 2s infinite;
 }
 
-.todo-list li .retry:after {
-  content: "\21bb";
-  display: block;
-  height: 100%;
-  line-height: 1.4;
+.header form[aria-busy] .new-todo {
+  color: #949494;
+  animation: waiting 0.8s ease-in-out 2s infinite;
 }
 
-.todo-list li .retry:hover,
-.todo-list li .retry:focus {
-  color: #8e0e1a;
+@keyframes waiting {
+  50% {
+    opacity: 0.2;
+  }
 }
 
-.todo-list li.errored .retry {
-  display: block;
+/* Answers: the server's words for a failed save, each with a retry.
+   Positioned so the footer's stacked-paper shadow (`.footer:before`,
+   anchored to the bottom of `.todoapp`) stays under it, not over it. */
+
+.add-error,
+.failures {
+  position: relative;
+  margin: 0;
+  padding: 10px 15px;
+  font-size: 15px;
+  color: #c91524;
+  border-top: 1px solid #e6e6e6;
 }
 
-.todo-list li.errored .destroy,
-.todo-list li.errored:hover .destroy {
-  display: none;
+.failures {
+  list-style: none;
+}
+
+.failures li + li {
+  margin-top: 6px;
+}
+
+.add-error button,
+.failures button {
+  text-decoration: underline;
+  cursor: pointer;
 }
 
 .app-error {
diff --git a/examples/todos-server/src/app.tsx b/examples/todos-server/src/app.tsx
index 806af43bd9..174de8c00f 100644
--- a/examples/todos-server/src/app.tsx
+++ b/examples/todos-server/src/app.tsx
@@ -1,160 +1,69 @@
-// The client side. Compare with ../../todos/src/app.tsx: `Header` and
-// `TodoRow` are the same client components — `TodoRow` is shared with the
-// server (./todo-row.tsx). `MainSection` and `Footer` are gone: that markup
-// comes from the server component (server/todos.tsx) as HTML, and the
-// client's part of it is one FILL per data context — `rowFor` for a row,
-// `listFor` for the list — a function of the server's args (and the
-// client's intent, errors and filter) returning the values the server
-// template binds. The server rows read those through a binding slot; the
-// pending rows (todos the server has not seen) are the only client markup,
-// and they are `TodoRow` again, handed the same fill's result directly.
-import { createContext, Errored, For, Loading, useContext } from "solid-js";
-import { dynamic } from "@solidjs/web";
-import { createTodos, type Todos as TodosState } from "./todos";
-import { createHashFilter, type Filter } from "./filter";
-import { TodoRow, type RowBehavior } from "./todo-row";
-import type { Entity } from "./server/todos";
+// The client shell: the header and the boundary the list renders in. The
+// list itself is a server component (./todo-list.tsx) and its client half
+// is the route (./routes/todos.tsx).
+//
+// Adding shows intent like every other form: the router marks it
+// `aria-busy` while it saves (app.css dims the input), the input clears when
+// the answer lands, and a failure stays in the input with its error beside
+// it.
+import { useSubmissions } from "@solidjs/router";
+import { Errored, Loading, Show } from "solid-js";
+import { addTodo } from "~/actions";
+import { Router } from "~/router";
 import "./app.css";
 
-const TodosContext = createContext<TodosState>();
-
 function Header() {
-  const { actions } = useContext(TodosContext);
+  let input!: HTMLInputElement;
+  const adds = useSubmissions(addTodo);
+  const failure = () => adds.find(s => s.result?.error);
+  addTodo.onSettled(settled => {
+    for (const s of [...adds]) if (s !== settled) s.clear();
+    if (!settled.result) input.value = "";
+  });
   return (
     <header class="header">
       <h1>todos</h1>
-      <input
-        class="new-todo"
-        placeholder="What needs to be done?"
-        autofocus
-        onKeyDown={e => {
-          if (e.key !== "Enter") return;
-          const title = e.currentTarget.value.trim();
-          if (!title) return;
-          const id = `${Date.now()}-${Math.random().toString(36).slice(2, 7)}`;
-          actions.addTodo({ id, title, completed: false });
-          e.currentTarget.value = "";
-        }}
-      />
+      <form action={addTodo} method="post">
+        <input
+          ref={input}
+          class="new-todo"
+          name="title"
+          placeholder="What needs to be done?"
+          autocomplete="off"
+          autofocus
+          required
+        />
+      </form>
+      <Show when={failure()}>
+        {f => (
+          <p class="add-error">
+            Couldn't add “{String(f().input[0].get("title"))}”: {f().result!.error}.{" "}
+            <button onClick={() => f().retry()}>Retry</button>
+          </p>
+        )}
+      </Show>
     </header>
   );
 }
 
-function TodoList(props: { filter: Filter }) {
-  const state = useContext(TodosContext);
-  const { intent, errors, done, removed, extraRows, counts, actions } = state;
-  const Todos = dynamic(() => state.todos());
-
-  const visible = (completed: boolean) =>
-    props.filter === "all" || (props.filter === "active") !== completed;
-
-  // A row's behavior, from the server's view of it (`completed` as of the
-  // last response) and the client's (intent over it, errors beside it).
-  // Same function for a server row (through the `row` binding slot) and a
-  // pending one (passed to <TodoRow> directly). The fill runs once per
-  // occurrence, as a component body does, so values are getters — a
-  // top-level read would be read once — and handlers are plain closures
-  // that read at event time.
-  const rowFor = (p: Entity): RowBehavior => ({
-    get rowClass() {
-      return {
-        todo: true,
-        completed: done(p.id, p.completed),
-        pending: !!intent.byId[p.id] || intent.adds.some(t => t.id === p.id),
-        errored: !!errors[p.id]
-      };
-    },
-    get done() {
-      return done(p.id, p.completed);
-    },
-    get removed() {
-      return removed(p.id) || !visible(done(p.id, p.completed));
-    },
-    get error() {
-      return errors[p.id] ? `Retry ${errors[p.id]!.type}` : undefined;
-    },
-    onToggle: e => actions.toggleTodo(p.id, e.currentTarget.checked),
-    onRemove: () => actions.removeTodo(p.id, p.completed),
-    onRetry: () => actions.retryTodo(p.id)
-  });
-
-  // The ids whose client-side `completed` is the given value, from the
-  // server's two lists (an entity's intent may have moved it across).
-  const idsWhere = (p: { active: string[]; completed: string[] }, completed: boolean) => [
-    ...p.active.filter(id => !removed(id) && done(id, false) === completed),
-    ...p.completed.filter(id => !removed(id) && done(id, true) === completed)
-  ];
-  const listFor = (p: { total: number; active: string[]; completed: string[] }) => {
-    const active = () => idsWhere(p, false);
-    const completed = () => idsWhere(p, true);
-    const allDone = () => active().length === 0 && completed().length > 0;
-    return {
-      get empty() {
-        return counts({ remaining: 0, total: p.total }).total === 0;
-      },
-      get allDone() {
-        return allDone();
-      },
-      get noneDone() {
-        return completed().length === 0;
-      },
-      onToggleAll: () =>
-        allDone() ? actions.toggleAll(completed(), false) : actions.toggleAll(active(), true),
-      onClearCompleted: () => actions.clearCompleted(completed())
-    };
-  };
-
-  return (
-    <Todos
-      list={listFor}
-      row={rowFor}
-      pending={() => (
-        <For each={extraRows()}>
-          {todo => <TodoRow id={todo.id} title={todo.title} row={rowFor(todo)} />}
-        </For>
-      )}
-      count={p => {
-        const remaining = () => counts(p).remaining;
-        return (
-          <>
-            <strong>{remaining()}</strong> {remaining() === 1 ? "item" : "items"} left
-          </>
-        );
-      }}
-      filters={() => ({
-        get all() {
-          return props.filter === "all";
-        },
-        get active() {
-          return props.filter === "active";
-        },
-        get completed() {
-          return props.filter === "completed";
-        }
-      })}
-    />
-  );
-}
-
 export default function App() {
-  const filter = createHashFilter();
   return (
-    <Errored
-      fallback={(err, reset) => (
-        <div class="app-error">
-          <p>Something went wrong: {String(err())}</p>
-          <button onClick={reset}>Reset</button>
-        </div>
+    <Router>
+      {props => (
+        <Errored
+          fallback={(err, reset) => (
+            <div class="app-error">
+              <p>Something went wrong: {String(err())}</p>
+              <button onClick={reset}>Reset</button>
+            </div>
+          )}
+        >
+          <section class="todoapp">
+            <Header />
+            <Loading fallback={<p class="loading">Loading…</p>}>{props.children}</Loading>
+          </section>
+        </Errored>
       )}
-    >
-      <TodosContext value={createTodos()}>
-        <section class="todoapp">
-          <Header />
-          <Loading fallback={<p class="loading">Loading…</p>}>
-            <TodoList filter={filter()} />
-          </Loading>
-        </section>
-      </TodosContext>
-    </Errored>
+    </Router>
   );
 }
diff --git a/examples/todos-server/src/filter.ts b/examples/todos-server/src/filter.ts
deleted file mode 100644
index e80aca0c7a..0000000000
--- a/examples/todos-server/src/filter.ts
+++ /dev/null
@@ -1,29 +0,0 @@
-import { createSignal, onSettled } from "solid-js";
-
-export type Filter = "all" | "active" | "completed";
-
-function parseHash(hash: string): Filter {
-  if (hash === "#/active") return "active";
-  if (hash === "#/completed") return "completed";
-  return "all";
-}
-
-/**
- * View-state primitive that mirrors the URL hash into a reactive filter.
- *
- * The SPA twin reads `location.hash` at creation. Here the app is
- * server-rendered and the server cannot see the hash, so the signal starts
- * at "all" on both faces (the hydrated HTML matches what the client's first
- * pass computes) and takes the real hash once the initial activity settles —
- * at the same moment the `hashchange` listener attaches.
- */
-export function createHashFilter(): () => Filter {
-  const [filter, setFilter] = createSignal<Filter>("all");
-  onSettled(() => {
-    const onChange = () => setFilter(parseHash(location.hash));
-    onChange();
-    window.addEventListener("hashchange", onChange);
-    return () => window.removeEventListener("hashchange", onChange);
-  });
-  return filter;
-}
diff --git a/examples/todos-server/src/lib/db.ts b/examples/todos-server/src/lib/db.ts
deleted file mode 100644
index 66b11d66b2..0000000000
--- a/examples/todos-server/src/lib/db.ts
+++ /dev/null
@@ -1,81 +0,0 @@
-// The todo store, server-only: this module is only imported by "use server"
-// modules, so unstorage never reaches the client build. It is the SPA twin's
-// mock API (../../../todos/src/api.ts) moved behind the server boundary with
-// the same shape and the same deliberate unreliability: every save waits
-// 400 ms and ~33% of them fail, so the optimistic UI, the per-item errors
-// and the retry affordances get exercised. Todos reset on server restart
-// (memory driver); swap the driver for a durable store in a deployment.
-import { createStorage } from "unstorage";
-import memoryDriver from "unstorage/drivers/memory";
-
-export interface Todo {
-  id: string;
-  title: string;
-  completed: boolean;
-}
-
-const storage = createStorage({ driver: memoryDriver() });
-
-const SEED: Todo[] = [
-  { id: "0001", title: "Read the server-components principles", completed: true },
-  { id: "0002", title: "Port TodoMVC to a server component", completed: false },
-  { id: "0003", title: "Break the network and watch it recover", completed: false }
-];
-
-export async function getTodos(): Promise<Todo[]> {
-  const todos = (await storage.getItem("todos")) as Todo[] | null;
-  if (todos) return todos;
-  await storage.setItem("todos", SEED);
-  return SEED;
-}
-
-async function saveTodos(todos: Todo[]) {
-  if (Math.random() < 0.33) return reject(400);
-  await storage.setItem("todos", todos);
-  return delay(undefined, 400);
-}
-
-export async function addTodo(todo: Todo) {
-  const newTodo = { ...todo };
-  const todos = await getTodos();
-  if (todos.some(t => t.id === newTodo.id)) return newTodo;
-  const index = todos.findIndex(t => t.id > newTodo.id);
-  if (index > -1) todos.splice(index, 0, newTodo);
-  else todos.push(newTodo);
-  await saveTodos(todos);
-  return newTodo;
-}
-
-export async function removeTodo(todoId: string) {
-  return saveTodos((await getTodos()).filter(t => t.id !== todoId));
-}
-
-export async function toggleTodo(todoId: string, completed: boolean) {
-  let found: Todo | undefined;
-  const todos = (await getTodos()).map(t => {
-    if (t.id !== todoId) return t;
-    return (found = { ...t, completed });
-  });
-  if (!found) return reject(400);
-  await saveTodos(todos);
-  return found;
-}
-
-export async function toggleAll(ids: string[], completed: boolean) {
-  const set = new Set(ids);
-  const todos = (await getTodos()).map(t => (set.has(t.id) ? { ...t, completed } : t));
-  return saveTodos(todos);
-}
-
-export async function clearCompleted(ids: string[]) {
-  const set = new Set(ids);
-  return saveTodos((await getTodos()).filter(t => !set.has(t.id)));
-}
-
-function delay<T>(payload: T, time: number) {
-  return new Promise<T>(res => setTimeout(res, time, payload));
-}
-
-function reject(time: number) {
-  return new Promise<never>((_, rej) => setTimeout(rej, time, new Error("Failed to save")));
-}
diff --git a/examples/todos-server/src/router.tsx b/examples/todos-server/src/router.tsx
new file mode 100644
index 0000000000..4a608b56e4
--- /dev/null
+++ b/examples/todos-server/src/router.tsx
@@ -0,0 +1,18 @@
+// The router lives in its own module so app.tsx (render) and server-config.ts
+// (the single-flight collector) share one instance. The collector reruns the
+// matched route's preload for the page a mutation was posted from, which is
+// how a toggle's response carries the list's fresh markup.
+import { createRouter, defineRoute, intentPreload } from "@solidjs/router";
+import Todos from "~/routes/todos";
+import { getTodoList, parseFilter } from "~/todo-list";
+
+export const Router = createRouter({
+  preloadLinks: intentPreload(),
+  routes: [
+    defineRoute({
+      path: "/",
+      component: Todos,
+      preload: ({ location }) => void getTodoList(parseFilter(location.query.filter))
+    })
+  ]
+});
diff --git a/examples/todos-server/src/routes/todos.tsx b/examples/todos-server/src/routes/todos.tsx
new file mode 100644
index 0000000000..7c7aa269f4
--- /dev/null
+++ b/examples/todos-server/src/routes/todos.tsx
@@ -0,0 +1,72 @@
+// The route: the server's list, and the one thing about it the server cannot
+// render — answers to requests this browser made. Compare with
+// ../../../todos/src/todos.ts: the SPA keeps the todo array and layers
+// optimistic writes and errors over it. Here the array is server markup the
+// client never holds, and there is no optimistic layer: intent shows from
+// `aria-busy` and CSS (see ../todo-list.tsx), so the client keeps only the
+// failures, where the router already keeps them.
+//
+// `useSubmissions(action)` lists a failed save's `{ error }` until the next
+// attempt at the same thing settles. After a form posted without JavaScript
+// the router seeds the same list from its flash cookie, so the failures
+// render on the server too.
+import { useSubmissions, type RouteProps, type Submission } from "@solidjs/router";
+import { For } from "solid-js";
+import { dynamicComponent } from "@solidjs/web";
+import { clearCompleted, removeTodo, toggleAll, toggleTodo } from "~/actions";
+import { getTodoList, parseFilter } from "~/todo-list";
+
+type Answer = Submission<any[], { error: string } | undefined>;
+
+/** A settled attempt replaces the earlier answers to the same question: a
+ *  success (which records nothing) dismisses an old error, a new failure
+ *  takes its place. Row actions ask about one todo; bulk ones about all. */
+const supersede =
+  (subs: Answer[], sameTodo = false) =>
+  (settled: Answer) => {
+    for (const s of [...subs])
+      if (s !== settled && (!sameTodo || s.input[0] === settled.input[0])) s.clear();
+  };
+
+function Failures() {
+  const toggles = useSubmissions(toggleTodo) as Answer[];
+  const removals = useSubmissions(removeTodo) as Answer[];
+  const markAll = useSubmissions(toggleAll) as Answer[];
+  const clears = useSubmissions(clearCompleted) as Answer[];
+  toggleTodo.onSettled(supersede(toggles, true));
+  // A todo deleted has no open questions left, and marking all answers
+  // every row's toggle.
+  removeTodo.onSettled(settled => {
+    supersede(removals, true)(settled);
+    if (!settled.result) supersede(toggles, true)(settled);
+  });
+  toggleAll.onSettled(settled => {
+    supersede(markAll)(settled);
+    if (!settled.result) supersede(toggles)(settled);
+  });
+  clearCompleted.onSettled(supersede(clears));
+
+  const failed = () =>
+    [...toggles, ...removals, ...markAll, ...clears].filter(s => s.result?.error);
+  return (
+    <ul class="failures" hidden={failed().length === 0}>
+      <For each={failed()}>
+        {s => (
+          <li>
+            {s.result!.error}. <button onClick={() => s.retry()}>Retry</button>
+          </li>
+        )}
+      </For>
+    </ul>
+  );
+}
+
+export default function Todos(props: RouteProps<"/">) {
+  const List = dynamicComponent(() => getTodoList(parseFilter(props.location.query.filter)));
+  return (
+    <>
+      <List />
+      <Failures />
+    </>
+  );
+}
diff --git a/examples/todos-server/src/server-config.ts b/examples/todos-server/src/server-config.ts
new file mode 100644
index 0000000000..82646750f1
--- /dev/null
+++ b/examples/todos-server/src/server-config.ts
@@ -0,0 +1,13 @@
+// Evaluated in the server-function handler graph (see `serverFunctions.
+// configure` in vite.config.ts), before any dispatch. Registering the
+// router's flight collector is what makes a mutation single-flight: when an
+// action answers without a redirect, the collector reruns the route of the
+// page the form was posted from in data-only mode, and the list's fresh
+// markup folds into the mutation's own response.
+import { configureServerFunctionsServer } from "@solidjs/web/server-functions/server";
+import { createFlightDataCollector } from "@solidjs/router/server";
+import { Router } from "./router";
+
+configureServerFunctionsServer({
+  collectFlightData: createFlightDataCollector(Router)
+});
diff --git a/examples/todos-server/src/server/db.ts b/examples/todos-server/src/server/db.ts
new file mode 100644
index 0000000000..3fa9e2a3b6
--- /dev/null
+++ b/examples/todos-server/src/server/db.ts
@@ -0,0 +1,62 @@
+import "server-only";
+// The todo store. Only `"use server"` bodies import it, and the client build
+// replaces those with references, so unstorage never reaches the browser; the
+// `server-only` marker fails the build if this module is ever imported from
+// client code. It keeps the SPA twin's deliberate unreliability
+// (../../../todos/src/api.ts): every save waits 400 ms and ~33% of them fail,
+// so the in-flight marks, the failures and the retries get exercised. A
+// failure is an answer, not an exception — the store returns `{ error }`, and
+// the actions word it for the client. Todos reset on server restart (memory
+// driver); swap the driver for a durable store in a deployment.
+import { createStorage } from "unstorage";
+import memoryDriver from "unstorage/drivers/memory";
+
+export interface Todo {
+  id: string;
+  title: string;
+  completed: boolean;
+}
+
+export type Failure = { error: string };
+
+const storage = createStorage({ driver: memoryDriver() });
+
+const SEED: Todo[] = [
+  { id: "0001", title: "Read the server-components principles", completed: true },
+  { id: "0002", title: "Port TodoMVC to a server component", completed: false },
+  { id: "0003", title: "Break the network and watch it recover", completed: false }
+];
+
+export async function getTodos(): Promise<Todo[]> {
+  const todos = (await storage.getItem("todos")) as Todo[] | null;
+  if (todos) return todos;
+  await storage.setItem("todos", SEED);
+  return SEED;
+}
+
+async function saveTodos(todos: Todo[]): Promise<Failure | undefined> {
+  await new Promise(res => setTimeout(res, 400));
+  if (Math.random() < 0.33) return { error: "Failed to save" };
+  await storage.setItem("todos", todos);
+}
+
+export async function addTodo(title: string) {
+  const id = `${Date.now()}-${Math.random().toString(36).slice(2, 7)}`;
+  return saveTodos([...(await getTodos()), { id, title, completed: false }]);
+}
+
+export async function removeTodo(id: string) {
+  return saveTodos((await getTodos()).filter(t => t.id !== id));
+}
+
+export async function toggleTodo(id: string, completed: boolean) {
+  return saveTodos((await getTodos()).map(t => (t.id === id ? { ...t, completed } : t)));
+}
+
+export async function toggleAll(completed: boolean) {
+  return saveTodos((await getTodos()).map(t => ({ ...t, completed })));
+}
+
+export async function clearCompleted() {
+  return saveTodos((await getTodos()).filter(t => !t.completed));
+}
diff --git a/examples/todos-server/src/server/todos.tsx b/examples/todos-server/src/server/todos.tsx
deleted file mode 100644
index 69c60ef69f..0000000000
--- a/examples/todos-server/src/server/todos.tsx
+++ /dev/null
@@ -1,131 +0,0 @@
-"use server";
-// TodoMVC's list as a server component. Compare with the SPA twin's
-// app.tsx: the markup is the same, but this side renders DATA only — titles,
-// counts, ids, the server's `completed` — and never a pending row, an error
-// class or a retry button. Those belong to the client, and the client puts
-// them on the server's own elements through BINDING SLOTS: a slot CALLED with
-// the element's data context and READ as an object, its properties bound
-// at positions of the template. The fill on the other side runs once per
-// occurrence with the args as reactive props and returns the values, its
-// getters tracking the args (a refetch) and the client's state (an
-// optimistic write); the runtime writes each bound position that moves, and
-// morphs around the positions so a new response never clobbers a
-// client-owned value.
-//
-// One call per data context: `props.row(entity)` is the row's whole client
-// behavior, consumed by the row's <li>, its checkbox and its buttons
-// (../todo-row.tsx); `props.list(...)` is the list-level behavior consumed
-// by the section, the toggle-all box, the footer and the clear button.
-//
-// The one thing the client cannot bind is a row the server has not
-// rendered — an optimistic add — so `<props.pending />` is a pre-placed
-// MARKUP slot where the client renders its in-flight rows: the same
-// `TodoRow`, with the same fill's result passed directly.
-import type { BindingSlot, Slot } from "@solidjs/web/frames";
-import * as db from "~/lib/db";
-import { TodoRow, type RowBehavior } from "~/todo-row";
-
-export type Entity = { id: string; completed: boolean };
-
-/** The list-level values and behavior the client owns. */
-export interface ListBehavior {
-  empty: boolean;
-  allDone: boolean;
-  onToggleAll: () => void;
-  noneDone: boolean;
-  onClearCompleted: () => void;
-}
-
-/** Which filter link is selected — client state (the URL hash). */
-export interface FilterBehavior {
-  all: boolean;
-  active: boolean;
-  completed: boolean;
-}
-
-export interface TodoListProps {
-  list: BindingSlot<{ total: number; active: string[]; completed: string[] }, ListBehavior>;
-  row: BindingSlot<Entity, RowBehavior>;
-  pending: Slot;
-  count: Slot<{ remaining: number; total: number }>;
-  filters: BindingSlot<{}, FilterBehavior>;
-}
-
-export async function todoListView() {
-  const todos = await db.getTodos();
-  const active = todos.filter(t => !t.completed).map(t => t.id);
-  const completed = todos.filter(t => t.completed).map(t => t.id);
-  return (props: TodoListProps) => {
-    const list = props.list({ total: todos.length, active, completed });
-    const filters = props.filters();
-    return (
-      <>
-        <section class="main" hidden={list.empty}>
-          <input
-            id="toggle-all"
-            class="toggle-all"
-            type="checkbox"
-            checked={list.allDone}
-            onChange={list.onToggleAll}
-          />
-          <label for="toggle-all">Mark all as complete</label>
-          <ul class="todo-list">
-            {todos.map(t => (
-              <TodoRow
-                id={t.id}
-                title={t.title}
-                row={props.row({ $key: t.id, id: t.id, completed: t.completed })}
-              />
-            ))}
-            <props.pending />
-          </ul>
-        </section>
-        <footer class="footer" hidden={list.empty}>
-          <span class="todo-count">
-            <props.count remaining={active.length} total={todos.length} />
-          </span>
-          <ul class="filters">
-            <li>
-              <a href="#/" class={{ selected: filters.all }}>
-                All
-              </a>
-            </li>
-            <li>
-              <a href="#/active" class={{ selected: filters.active }}>
-                Active
-              </a>
-            </li>
-            <li>
-              <a href="#/completed" class={{ selected: filters.completed }}>
-                Completed
-              </a>
-            </li>
-          </ul>
-          <button class="clear-completed" hidden={list.noneDone} onClick={list.onClearCompleted}>
-            Clear completed
-          </button>
-        </footer>
-      </>
-    );
-  };
-}
-
-// The mutations. Plain server functions: the client calls them from inside
-// its actions and follows each with a refetch of `todoListView` (see
-// ../todos.ts) — the "typical multi-flight" shape, where the write and the
-// re-read are separate requests and the action's transaction spans both.
-export async function addTodo(todo: db.Todo) {
-  return db.addTodo(todo);
-}
-export async function removeTodo(id: string) {
-  return db.removeTodo(id);
-}
-export async function toggleTodo(id: string, completed: boolean) {
-  return db.toggleTodo(id, completed);
-}
-export async function toggleAll(ids: string[], completed: boolean) {
-  return db.toggleAll(ids, completed);
-}
-export async function clearCompleted(ids: string[]) {
-  return db.clearCompleted(ids);
-}
diff --git a/examples/todos-server/src/todo-list.tsx b/examples/todos-server/src/todo-list.tsx
new file mode 100644
index 0000000000..f6d4b0ca51
--- /dev/null
+++ b/examples/todos-server/src/todo-list.tsx
@@ -0,0 +1,103 @@
+// TodoMVC's list as a server component. Compare with the SPA twin's app.tsx:
+// the markup is the same, but every value in it is the server's — titles,
+// `completed`, the count, which buttons show — and every control is a form
+// that posts a mutation. Nothing here needs JavaScript to work, and nothing
+// here is client code: the list ships as HTML and its template never reaches
+// the browser.
+//
+// What JavaScript adds is INSTANT INTENT, not prediction. While a form's
+// submission is in flight the router marks it `aria-busy`, and app.css shows
+// what was asked for from that alone: the clicked toggle presses down, a
+// deleted row dims, and `:has()` carries toggle-all and clear-completed to
+// every row they touch. Nothing on the client computes an outcome — the
+// response's markup lands with the server's answer, and the marks go when
+// the submission settles.
+import { query } from "@solidjs/router";
+import { clearCompleted, removeTodo, toggleAll, toggleTodo } from "~/actions";
+import * as db from "~/server/db";
+
+export type Filter = "all" | "active" | "completed";
+
+export const parseFilter = (value: unknown): Filter =>
+  value === "active" || value === "completed" ? value : "all";
+
+// The filter is a query param the server applies, so a filtered page is
+// right before JavaScript and a filter link is a navigation that refetches
+// this component.
+export const getTodoList = query(async (filter: Filter) => {
+  "use server";
+  const todos = await db.getTodos();
+  const shown = todos.filter(t => filter === "all" || t.completed === (filter === "completed"));
+  const remaining = todos.filter(t => !t.completed).length;
+  const allDone = todos.length > 0 && remaining === 0;
+
+  return () => (
+    <>
+      <section class="main" hidden={todos.length === 0}>
+        <form class="toggle-all-form" action={toggleAll} method="post">
+          <button
+            class="toggle-all"
+            name="completed"
+            value={allDone ? "false" : "true"}
+            aria-pressed={allDone ? "true" : "false"}
+          >
+            Mark all as complete
+          </button>
+        </form>
+        <ul class="todo-list">
+          {shown.map(t => (
+            // `$key` is the row's morph identity: a response keeps the node
+            // for the same todo.
+            <li $key={t.id} class={{ todo: true, completed: t.completed }}>
+              <div class="view">
+                <form class="toggle-form" action={toggleTodo.with(t.id)} method="post">
+                  <button
+                    class="toggle"
+                    name="completed"
+                    value={t.completed ? "false" : "true"}
+                    aria-pressed={t.completed ? "true" : "false"}
+                    aria-label={`Toggle ${t.title}`}
+                  />
+                </form>
+                <label>{t.title}</label>
+                <form class="destroy-form" action={removeTodo.with(t.id)} method="post">
+                  <button class="destroy" aria-label={`Delete ${t.title}`} />
+                </form>
+              </div>
+            </li>
+          ))}
+        </ul>
+      </section>
+      <footer class="footer" hidden={todos.length === 0}>
+        <span class="todo-count">
+          <strong>{remaining}</strong> {remaining === 1 ? "item left" : "items left"}
+        </span>
+        <ul class="filters">
+          <li>
+            <a href="/" class={{ selected: filter === "all" }}>
+              All
+            </a>
+          </li>
+          <li>
+            <a href="/?filter=active" class={{ selected: filter === "active" }}>
+              Active
+            </a>
+          </li>
+          <li>
+            <a href="/?filter=completed" class={{ selected: filter === "completed" }}>
+              Completed
+            </a>
+          </li>
+        </ul>
+        <form
+          class="clear-completed-form"
+          action={clearCompleted}
+          method="post"
+          hidden={remaining === todos.length}
+        >
+          <button class="clear-completed">Clear completed</button>
+        </form>
+      </footer>
+    </>
+  );
+}, "todos");
diff --git a/examples/todos-server/src/todo-row.tsx b/examples/todos-server/src/todo-row.tsx
deleted file mode 100644
index 1d797b4d97..0000000000
--- a/examples/todos-server/src/todo-row.tsx
+++ /dev/null
@@ -1,43 +0,0 @@
-// The row. One component, no directive, no side: the server renders it for
-// every todo it has, the client renders it for every todo the server does
-// not have yet (an add in flight, or one that failed). What differs is what
-// `row` IS at the call site — on the server a BINDING SLOT (server/todos.tsx:
-// `props.row({ id, completed })`), whose properties are stand-ins the
-// positions below bind and the client owns; on the client the fill's result
-// itself (app.tsx: `rowFor(todo)`), so the same positions are ordinary
-// bindings. The component cannot tell and does not need to.
-//
-// Keys are semantic, positions are structural: nothing in `RowBehavior` says
-// attribute, class or handler — where each property is bound below does.
-
-/** What the client decides about a row: the values and behavior it owns. */
-export interface RowBehavior {
-  rowClass: Record<string, boolean>;
-  removed: boolean;
-  done: boolean;
-  onToggle: (e: InputEvent & { currentTarget: HTMLInputElement }) => void;
-  onRemove: () => void;
-  onRetry: () => void;
-  error: string | undefined;
-}
-
-export function TodoRow(props: { id: string; title: string; row: RowBehavior }) {
-  // `$key` is the <li>'s MORPH identity (server markup: a response keeps the
-  // node for the same todo); a DOM compile strips it. The `row` call's own
-  // `$key` is the occurrence's identity — two keys, two jobs.
-  return (
-    <li $key={props.id} class={props.row.rowClass} hidden={props.row.removed}>
-      <div class="view">
-        <input
-          class="toggle"
-          type="checkbox"
-          checked={props.row.done}
-          onInput={props.row.onToggle}
-        />
-        <label>{props.title}</label>
-        <button class="retry" title={props.row.error} onClick={props.row.onRetry} />
-        <button class="destroy" onClick={props.row.onRemove} />
-      </div>
-    </li>
-  );
-}
diff --git a/examples/todos-server/src/todos.ts b/examples/todos-server/src/todos.ts
deleted file mode 100644
index eb73a8f351..0000000000
--- a/examples/todos-server/src/todos.ts
+++ /dev/null
@@ -1,220 +0,0 @@
-// The client's half of the list. Compare with ../../todos/src/todos.ts: the
-// SPA keeps the whole todo array on the client and layers optimistic writes
-// and errors over it. Here the array is server markup that the client never
-// holds — what it holds is INTENT (what it has asked the server to do and
-// not yet heard back about) and the errors it heard back. Both are keyed by
-// entity id, and the fills in app.tsx combine them with the args each server
-// element carries.
-//
-// Same three lifetime layers as the SPA, same order, without the array:
-//
-//   3. Optimistic  (transition-scoped) ── `intent`, a `createOptimisticStore`
-//                                         written inside `action` generators;
-//                                         auto-reverts when the action settles,
-//                                         which is when the server's answer
-//                                         has APPLIED (see the actions).
-//   2. Ephemeral   (UI-scoped)         ── `errors`, a plain store written after
-//                                         the call fails. Survives the revert
-//                                         because it is not optimistic.
-//   1. Persistent  (durable)           ── the server's rows: `p.completed` in
-//                                         a fill's props is truth as of the
-//                                         last response.
-//
-// Every fill reads (3) over (1) and shows (2) beside it.
-//
-// Pending rows are not inert (parity with the SPA): a toggle or remove on a
-// todo whose add is still in flight writes its intent immediately and then
-// waits for the add to settle before talking to the server — the server
-// has no such id until then. A todo whose add FAILED exists only here, so
-// those actions edit the failed record instead (the retry carries the
-// change).
-
-import { action, createMemo, createOptimisticStore, createStore, refresh } from "solid-js";
-import type { Todo } from "~/lib/db";
-import * as server from "~/server/todos";
-
-export type { Todo };
-
-export type TodoError = {
-  type: "addTodo" | "removeTodo" | "toggleTodo";
-  args: any[];
-};
-
-export interface Intent {
-  /** The server's `completed` when the intent was written (for the counts). */
-  from: boolean;
-  completed?: boolean;
-  removed?: boolean;
-}
-
-export function createTodos() {
-  // The source the boundary shows and the actions refetch. `refresh(todos)`
-  // re-runs the memo, which re-calls the server component; the transaction
-  // holds until the refetched markup and args have applied.
-  const todos = createMemo(() => server.todoListView());
-
-  const [intent, setIntent] = createOptimisticStore<{
-    byId: Record<string, Intent>;
-    adds: Todo[];
-  }>({ byId: {}, adds: [] });
-
-  const [errors, setErrors] = createStore<Record<string, TodoError | undefined>>({});
-
-  /** Adds in flight, by id: what a toggle/remove on a pending row waits on. */
-  const inflight = new Map<string, Promise<void>>();
-  /** The failed add a todo exists in, if that is the only place it exists. */
-  const failedAdd = (id: string) => (errors[id]?.type === "addTodo" ? errors[id] : undefined);
-
-  /** The client's view of one entity's `completed`: intent over the server. */
-  const done = (id: string, completed: boolean) => intent.byId[id]?.completed ?? completed;
-  const removed = (id: string) => !!intent.byId[id]?.removed;
-
-  /** Todos the server does not have: in-flight adds, then adds that failed.
-   *  The store's own objects, not copies: their identity is stable across
-   *  reads, so a `<For>` over them keeps each row's node while the list
-   *  around it changes. */
-  const extraRows = (): Todo[] => {
-    const rows: Todo[] = [...intent.adds];
-    for (const id in errors) {
-      const error = errors[id];
-      if (error?.type === "addTodo" && !rows.some(r => r.id === id)) rows.push(error.args[0]);
-    }
-    return rows.sort((a, b) => (a.id > b.id ? 1 : -1));
-  };
-
-  /** Counts as the client sees them: the server's, adjusted by intent. */
-  const counts = (p: { remaining: number; total: number }) => {
-    let remaining = p.remaining;
-    let total = p.total;
-    const extra = extraRows();
-    for (const id in intent.byId) {
-      // Intent over a row the server has; a pending row's intent is read
-      // with the row below.
-      if (extra.some(t => t.id === id)) continue;
-      const i = intent.byId[id];
-      if (i.removed) {
-        total--;
-        if (!i.from) remaining--;
-      } else if (i.completed !== undefined && i.completed !== i.from) {
-        remaining += i.completed ? -1 : 1;
-      }
-    }
-    for (const t of extra) {
-      if (removed(t.id)) continue;
-      total++;
-      if (!done(t.id, t.completed)) remaining++;
-    }
-    return { remaining, total };
-  };
-
-  function fail(id: string, error: TodoError) {
-    setErrors(e => {
-      e[id] ||= error;
-    });
-  }
-  function ok(id: string) {
-    setErrors(e => {
-      delete e[id];
-    });
-  }
-
-  const add = action(function* (todo: Todo) {
-    setIntent(s => {
-      if (!s.adds.some(t => t.id === todo.id)) s.adds.push(todo);
-    });
-    try {
-      yield server.addTodo(todo);
-      ok(todo.id);
-    } catch {
-      fail(todo.id, { type: "addTodo", args: [todo] });
-    }
-    yield refresh(todos);
-  });
-
-  const actions = {
-    addTodo(todo: Todo): Promise<void> {
-      const p = add(todo).finally(() => {
-        if (inflight.get(todo.id) === p) inflight.delete(todo.id);
-      });
-      inflight.set(todo.id, p);
-      return p;
-    },
-    removeTodo: action(function* (id: string, completed: boolean) {
-      setIntent(s => {
-        s.byId[id] = { from: completed, removed: true };
-      });
-      // Sequenced behind the add the server has not answered yet.
-      const pending = inflight.get(id);
-      if (pending) yield pending;
-      if (failedAdd(id)) {
-        // The todo never reached the server: removing it is forgetting it.
-        ok(id);
-        return;
-      }
-      try {
-        yield server.removeTodo(id);
-        ok(id);
-      } catch {
-        fail(id, { type: "removeTodo", args: [id, completed] });
-      }
-      yield refresh(todos);
-    }),
-    toggleTodo: action(function* (id: string, completed: boolean) {
-      setIntent(s => {
-        s.byId[id] = { from: !completed, completed };
-      });
-      const pending = inflight.get(id);
-      if (pending) yield pending;
-      const failed = failedAdd(id);
-      if (failed) {
-        // The todo exists only in its failed add: the retry adds it toggled.
-        setErrors(e => {
-          (e[id]!.args[0] as Todo).completed = completed;
-        });
-        return;
-      }
-      try {
-        yield server.toggleTodo(id, completed);
-        ok(id);
-      } catch {
-        fail(id, { type: "toggleTodo", args: [id, completed] });
-      }
-      yield refresh(todos);
-    }),
-    toggleAll: action(function* (ids: string[], completed: boolean) {
-      setIntent(s => {
-        for (const id of ids) s.byId[id] = { from: !completed, completed };
-      });
-      try {
-        yield server.toggleAll(ids, completed);
-        ids.forEach(ok);
-      } catch {
-        // Bulk failed — fan the error out to per-item entries so each
-        // failed item gets its own retry affordance via `retryTodo`.
-        ids.forEach(id => fail(id, { type: "toggleTodo", args: [id, completed] }));
-      }
-      yield refresh(todos);
-    }),
-    clearCompleted: action(function* (ids: string[]) {
-      setIntent(s => {
-        for (const id of ids) s.byId[id] = { from: true, removed: true };
-      });
-      try {
-        yield server.clearCompleted(ids);
-        ids.forEach(ok);
-      } catch {
-        ids.forEach(id => fail(id, { type: "removeTodo", args: [id, true] }));
-      }
-      yield refresh(todos);
-    }),
-    retryTodo(id: string): Promise<void> {
-      const error = errors[id];
-      if (!error) return Promise.resolve();
-      return (actions[error.type] as (...args: any[]) => Promise<void>)(...error.args);
-    }
-  };
-
-  return { todos, intent, errors, done, removed, extraRows, counts, actions };
-}
-
-export type Todos = ReturnType<typeof createTodos>;
diff --git a/examples/todos-server/src/vite-env.d.ts b/examples/todos-server/src/vite-env.d.ts
index 11f02fe2a0..c3957e75cc 100644
--- a/examples/todos-server/src/vite-env.d.ts
+++ b/examples/todos-server/src/vite-env.d.ts
@@ -1 +1,2 @@
 /// <reference types="vite/client" />
+/// <reference types="@solidjs/vite-plugin/boundary-modules" />
diff --git a/examples/todos-server/vite.config.ts b/examples/todos-server/vite.config.ts
index 2be0a74d9a..da164e1b1d 100644
--- a/examples/todos-server/vite.config.ts
+++ b/examples/todos-server/vite.config.ts
@@ -2,14 +2,21 @@ import { fileURLToPath } from "node:url";
 import { defineConfig } from "vite";
 import solid from "@solidjs/vite-plugin";
 
-// The same turnkey setup as ../hackernews: `serverFunctions.components` makes
-// a `"use server"` function that returns a component stream its markup over
-// the server-function endpoint (and inline it at document SSR). Nothing in
-// src/ imports the frames runtime — the generated entries wire it.
+// The same setup as ../notes: `serverFunctions.components` streams a
+// server component's markup over the server-function endpoint, and
+// `serverFunctions.configure` registers the router's single-flight collector
+// in the handler graph, so a mutation's response carries the list's fresh
+// markup.
 export default defineConfig({
   resolve: {
     alias: { "~": fileURLToPath(new URL("./src", import.meta.url)) }
   },
   server: { port: 3010 },
-  plugins: [solid({ start: {}, ssr: true, serverFunctions: { components: true } })]
+  plugins: [
+    solid({
+      start: {},
+      ssr: true,
+      serverFunctions: { components: true, configure: "src/server-config.ts" }
+    })
+  ]
 });
diff --git a/examples/todos/README.md b/examples/todos/README.md
index 81fa3f864f..e62d088cc8 100644
--- a/examples/todos/README.md
+++ b/examples/todos/README.md
@@ -1,6 +1,16 @@
-# Solid 2.0 Todos
+# Todos — TodoMVC as a client app
 
-A small TodoMVC built on Solid 2.0 to exercise the patterns AI tools and humans most commonly need to write:
+TodoMVC built the client-side way: the browser holds the list, renders every
+element, and talks to an API. It sits in the client-owned, request/response
+corner of the examples, beside `hackernews-spa`.
+
+Its twin is [../todos-server](../todos-server), the same app with the list
+rendered on the server. It is also the baseline for the planned `board`
+example, which keeps this client ownership and adds a live data tier.
+
+The part to read is [src/todos.ts](./src/todos.ts): fetching, per-item
+optimistic writes, per-item errors with retry, and bulk actions, layered by
+how the primitives compose. What it exercises:
 
 - **`createOptimisticStore` (derived form)** — async projection that re-fetches via `refresh(todos)`; the optimistic overlay covers each in-flight action.
 - **`action` generators** — every mutation is an `action(function* () { ... })` so writes between yields are batched into a single transition.
diff --git a/examples/todos/package.json b/examples/todos/package.json
index 0cd2f37294..bb885ffe40 100644
--- a/examples/todos/package.json
+++ b/examples/todos/package.json
@@ -13,11 +13,11 @@
     "typecheck": "tsc --noEmit -p tsconfig.json"
   },
   "devDependencies": {
-    "@solidjs/vite-plugin": "3.0.0-next.35",
+    "@solidjs/vite-plugin": "3.0.0-next.49",
     "@solidjs/web": "workspace:*",
     "@types/node": "^25.6.0",
     "solid-js": "workspace:*",
     "typescript": "^6.0.2",
-    "vite": "^7.0.0"
+    "vite": "^8.0.0"
   }
 }
diff --git a/examples/todos/src/app.tsx b/examples/todos/src/app.tsx
index ad153c3f69..b52f44b021 100644
--- a/examples/todos/src/app.tsx
+++ b/examples/todos/src/app.tsx
@@ -44,7 +44,7 @@ function TodoItem(props: { todo: Todo }) {
           class="toggle"
           type="checkbox"
           checked={props.todo.completed}
-          onInput={e => toggleTodo(props.todo.id, e.currentTarget.checked)}
+          onChange={e => toggleTodo(props.todo.id, e.currentTarget.checked)}
         />
         <label>{props.todo.title}</label>
         <Show when={props.todo.error}>
diff --git a/examples/todos/src/todos.ts b/examples/todos/src/todos.ts
index ed94062e4c..133a3a62d9 100644
--- a/examples/todos/src/todos.ts
+++ b/examples/todos/src/todos.ts
@@ -1,9 +1,8 @@
-// If you came here to enumerate React-vs-Solid syntax differences, you've
-// already misread this example. The thing that matters is what ~170 lines
-// accomplishes — fetch + per-item optimistic writes + per-item errors +
-// retry + bulk operations + loading + transitions, with the layering
-// enforced by primitive composition rather than by convention. That, not
-// the symbol diff, is what's distinctive.
+// Read this file for its layering, not its syntax. It is not a list of
+// React-to-Solid renames: the point is what this one file does — fetch,
+// per-item optimistic writes, per-item errors with retry, bulk operations,
+// loading and transitions — with the layering enforced by how the
+// primitives compose rather than by convention.
 //
 // State architecture: three lifetime layers, each a derivation of the layer
 // below, applied in a fixed order across the whole application.
@@ -44,12 +43,6 @@ export interface Todo extends ServerTodo {
   error?: TodoError;
 }
 
-// Side-channel of action failures, keyed by todo id. Plain (non-reactive)
-// JS map — read only inside the projection function, which re-runs on
-// `refresh(todos)`. Mutations followed by `refresh(todos)` are what make
-// errors visible; nothing else observes this object directly.
-const Errors: Record<string, TodoError> = {};
-
 function applyErrors(todos: Todo[], errors: Record<string, TodoError>) {
   for (const key in errors) {
     const error = errors[key];
@@ -73,16 +66,13 @@ function applyErrors(todos: Todo[], errors: Record<string, TodoError>) {
   }
 }
 
-export interface TodoActions {
-  addTodo: (todo: ServerTodo) => Promise<void>;
-  removeTodo: (id: string) => Promise<void>;
-  toggleTodo: (id: string, completed: boolean) => Promise<void>;
-  toggleAll: (completed: boolean) => Promise<void>;
-  clearCompleted: () => Promise<void>;
-  retryTodo: (todo: Todo) => Promise<void>;
-}
-
 export function createTodos() {
+  // Side-channel of action failures, keyed by todo id. Plain (non-reactive)
+  // JS map — read only inside the projection function, which re-runs on
+  // `refresh(todos)`. Mutations followed by `refresh(todos)` are what make
+  // errors visible; nothing else observes this object directly.
+  const Errors: Record<string, TodoError> = {};
+
   const [todos, setTodos] = createOptimisticStore<Todo[]>(async () => {
     const todos: Todo[] = await api.getTodos();
     applyErrors(todos, Errors);
diff --git a/packages/web/test/harness/__artifacts__/frame-occlusion-document.json b/packages/web/test/harness/__artifacts__/frame-occlusion-document.json
new file mode 100644
index 0000000000..c7416026e5
--- /dev/null
+++ b/packages/web/test/harness/__artifacts__/frame-occlusion-document.json
@@ -0,0 +1,5 @@
+{
+  "name": "frame-occlusion-document",
+  "shell": "<main _hk=1><solid-frame data-fid=\"frame-occlusion-doc/list\" style=\"display:contents\"><ul id=\"list\"><li><!--slot:item#a:start--><div _hk=sc-frame-occlusion-doc/list-item#a-0 class=\"item\" id=\"item-a\"><!--$--><solid-frame data-fid=\"frame-occlusion-doc/list.item#a.children\" style=\"display:contents\"><strong class=\"title\"><!--lh:1-->Title alpha<!--lh:/1--></strong></solid-frame><!--/--><button id=\"toggle-a\">toggle</button><!--$--><!--/--></div><!--slot:item#a:end--></li><li><!--slot:item#b:start--><div _hk=sc-frame-occlusion-doc/list-item#b-0 class=\"item\" id=\"item-b\"><!--$--><solid-frame data-fid=\"frame-occlusion-doc/list.item#b.children\" style=\"display:contents\"><strong class=\"title\"><!--lh:3-->Title bravo<!--lh:/3--></strong></solid-frame><!--/--><button id=\"toggle-b\">toggle</button><!--$--><solid-frame data-fid=\"frame-occlusion-doc/list.item#b.expandedChildren\" style=\"display:contents\"><p class=\"excerpt\"><!--lh:2-->Excerpt bravo<!--lh:/2--></p></solid-frame><!--/--></div><!--slot:item#b:end--></li></ul></solid-frame></main><script>(self.$R=self.$R||{})[\"\"]=[];_$HY.r[\"$B\"]=($R[0]={2000:$R[1]=($R[2]=($R[3]=() => {\n\tconst resolver = {\n\t\tp: 0,\n\t\ts: 0,\n\t\tf: 0\n\t};\n\tresolver.p = new Promise((resolve, reject) => {\n\t\tresolver.s = resolve;\n\t\tresolver.f = reject;\n\t});\n\treturn resolver;\n})()).p,\"2_fr\":$R[4]=($R[5]=$R[3]()).p});(b=>{for(var k in b)_$HY.r[k]=b[k];delete _$HY.r[\"$B\"]})(_$HY.r[\"$B\"]);($R[7]=(resolver, data) => {\n\tresolver.s(data);\n\tresolver.p.s = 1;\n\tresolver.p.v = data;\n})($R[2],$R[6]=(self._$SC||(self._$SC={c:{},a:{},b:{},r(i,a){var c=this.c[i]||(this.c[i]=(p,b)=>self._$SC.impl(i,p,b));if(!a)return c;this.a[a]=i;this.reg&&this.reg(a,i);return this.b[a]||(this.b[a]=Object.assign(p=>c(p,()=>a),{[Symbol.for(\"solid.component-binding\")]:{component:c,address:a}}))}})).r(\"frame-occlusion-doc/list\",\"frame-occlusion-doc/list:18sevpg\"));_$HY.r[\"sc:live\"]=$R[8]=($R[9]=(stream) => new ReadableStream({ start(controller) {\n\tstream.on({\n\t\tnext(value) {\n\t\t\ttry {\n\t\t\t\tcontroller.enqueue(value);\n\t\t\t} catch (_error) {}\n\t\t},\n\t\tthrow(value) {\n\t\t\tcontroller.error(value);\n\t\t},\n\t\treturn() {\n\t\t\ttry {\n\t\t\t\tcontroller.close();\n\t\t\t} catch (_error) {}\n\t\t}\n\t});\n} }))($R[10]=($R[11]=() => {\n\tconst buffer = [];\n\tconst listeners = [];\n\tlet alive = true;\n\tlet success = false;\n\tlet count = 0;\n\tconst internal = {\n\t\tflush(value, mode, x) {\n\t\t\tfor (x = 0; x < count; x++) {\n\t\t\t\tconst listener = listeners[x];\n\t\t\t\tif (listener) listener[mode](value);\n\t\t\t}\n\t\t},\n\t\tup(listener, x, z, current) {\n\t\t\tfor (x = 0, z = buffer.length; x < z; x++) {\n\t\t\t\tcurrent = buffer[x];\n\t\t\t\tif (!alive && x === z - 1) listener[success ? \"return\" : \"throw\"](current);\n\t\t\t\telse listener.next(current);\n\t\t\t}\n\t\t},\n\t\ton(listener, temp = 0) {\n\t\t\tlet subscribed = alive;\n\t\t\tif (alive) {\n\t\t\t\tfor (temp = 0; temp < count; temp++) if (!listeners[temp]) break;\n\t\t\t\tif (temp === count) count++;\n\t\t\t\tlisteners[temp] = listener;\n\t\t\t}\n\t\t\tinternal.up(listener);\n\t\t\treturn () => {\n\t\t\t\tif (alive && subscribed) {\n\t\t\t\t\tsubscribed = false;\n\t\t\t\t\tlisteners[temp] = void 0;\n\t\t\t\t\twhile (count > 0 && !listeners[count - 1]) count--;\n\t\t\t\t\tlisteners.length = count;\n\t\t\t\t}\n\t\t\t};\n\t\t}\n\t};\n\treturn {\n\t\t__SEROVAL_STREAM__: true,\n\t\ton(listener) {\n\t\t\treturn internal.on(listener);\n\t\t},\n\t\tnext(value) {\n\t\t\tif (alive) {\n\t\t\t\tbuffer.push(value);\n\t\t\t\tinternal.flush(value, \"next\");\n\t\t\t}\n\t\t},\n\t\tthrow(value) {\n\t\t\tif (alive) {\n\t\t\t\tbuffer.push(value);\n\t\t\t\tinternal.flush(value, \"throw\");\n\t\t\t\talive = false;\n\t\t\t\tsuccess = false;\n\t\t\t\tlisteners.length = 0;\n\t\t\t}\n\t\t},\n\t\treturn(value) {\n\t\t\tif (alive) {\n\t\t\t\tbuffer.push(value);\n\t\t\t\tinternal.flush(value, \"return\");\n\t\t\t\talive = false;\n\t\t\t\tsuccess = true;\n\t\t\t\tlisteners.length = 0;\n\t\t\t}\n\t\t}\n\t};\n})());_$HY.r[\"sc:tiers\"]=$R[12]=[\"regions\"];_$HY.r[\"sc:region:frame-occlusion-doc/list.item#a.expandedChildren\"]=\"\\x3Cp class=\\\"excerpt\\\">\\x3C!--lh:0-->Excerpt alpha\\x3C!--lh:/0-->\\x3C/p>\";_$HY.r[\"$B\"]=($R[13]={\"sc:slot:frame-occlusion-doc/list:item#a\":$R[14]=($R[15]=$R[3]()).p,\"sc:slot:frame-occlusion-doc/list:item#b\":$R[16]=($R[17]=$R[3]()).p});(b=>{for(var k in b)_$HY.r[k]=b[k];delete _$HY.r[\"$B\"]})(_$HY.r[\"$B\"]);$R[7]($R[15],$R[18]={id:\"a\",expandedChildren:$R[19]={$frame:\"frame-occlusion-doc/list.item#a.expandedChildren\"},children:$R[20]={$frame:\"frame-occlusion-doc/list.item#a.children\"}});$R[7]($R[17],$R[21]={id:\"b\",expandedChildren:$R[22]={$frame:\"frame-occlusion-doc/list.item#b.expandedChildren\"},children:$R[23]={$frame:\"frame-occlusion-doc/list.item#b.children\"}});$R[7]($R[5],!0);$R[10].return(void 0);</script>",
+  "rest": ""
+}
\ No newline at end of file
diff --git a/packages/web/test/harness/frame-occlusion-document.tsx b/packages/web/test/harness/frame-occlusion-document.tsx
new file mode 100644
index 0000000000..fd79e30e09
--- /dev/null
+++ b/packages/web/test/harness/frame-occlusion-document.tsx
@@ -0,0 +1,97 @@
+/**
+ * @jsxImportSource @solidjs/web
+ *
+ * Occlusion on the document face: server content handed to a client slot
+ * the client does not place at first render. The shape is the React
+ * server-components demo's sidebar (`NoteList` → `SidebarNoteContent`): the
+ * server passes each item's header as `children` and its excerpt as
+ * `expandedChildren`; the client fill owns the expanded state and renders
+ * `{expanded() && props.expandedChildren}`.
+ *
+ * Item `a` starts collapsed — its excerpt is occluded and must ship once, as
+ * an `sc:region:` record, never as markup. Item `b` starts open — its
+ * excerpt ships once, as markup, and collapsing then expanding it remounts
+ * the same content with no request.
+ *
+ * `LateItem` places the excerpt only after an async read settles, past the
+ * synchronous slot render — the region is already serialized (and locked) by
+ * then, so the late placement must add no markup.
+ *
+ * Shared by test/server/frame-occlusion-document.spec.tsx (writes the
+ * artifact) and test/hydration/frame-occlusion-document.spec.tsx.
+ */
+import { createMemo, createSignal, Loading, untrack } from "solid-js";
+import { dynamic, type JSX } from "@solidjs/web";
+
+export const FID = "frame-occlusion-doc/list";
+export const ARGS = ["list"];
+export const OPEN_ID = "b";
+
+export const ITEMS = [
+  { id: "a", title: "Title alpha", excerpt: "Excerpt alpha" },
+  { id: "b", title: "Title bravo", excerpt: "Excerpt bravo" }
+];
+
+type ItemProps = { id: string; children: JSX.Element; expandedChildren: JSX.Element };
+
+/** The client slot fill: `SidebarNoteContent`'s expand/collapse. */
+export function Item(props: ItemProps) {
+  const [expanded, setExpanded] = createSignal(untrack(() => props.id) === OPEN_ID);
+  return (
+    <div class="item" id={`item-${props.id}`}>
+      {props.children}
+      <button id={`toggle-${props.id}`} onClick={() => setExpanded(!expanded())}>
+        toggle
+      </button>
+      {expanded() && props.expandedChildren}
+    </div>
+  );
+}
+
+/** A fill that places the excerpt only once an async read settles. */
+export function LateItem(props: ItemProps) {
+  const ready = createMemo(async () => {
+    await new Promise<void>(r => setTimeout(r, 5));
+    return true;
+  });
+  return (
+    <div class="item" id={`item-${props.id}`}>
+      {props.children}
+      <Loading fallback={<i class="late-fb">late</i>}>{ready() && props.expandedChildren}</Loading>
+    </div>
+  );
+}
+
+/** The page: the list under a `Loading`, mounted through `dynamic`. */
+export function makeApp(source: () => any, Fill: (props: ItemProps) => any = Item) {
+  return () => {
+    const List = dynamic(source);
+    return (
+      <main>
+        <Loading fallback={<p class="fb">shell-fallback</p>}>
+          <List item={(p: any) => <Fill {...p} />} />
+        </Loading>
+      </main>
+    );
+  };
+}
+
+/** The server component: `NoteList`'s shape. */
+export function makeListComponent() {
+  const ListComponent = (props: { item: any }) => (
+    <ul id="list">
+      {ITEMS.map(it => (
+        <li>
+          <props.item
+            $key={it.id}
+            id={it.id}
+            expandedChildren={<p class="excerpt">{it.excerpt}</p>}
+          >
+            <strong class="title">{it.title}</strong>
+          </props.item>
+        </li>
+      ))}
+    </ul>
+  );
+  return ListComponent;
+}
diff --git a/packages/web/test/hydration/frame-occlusion-document.spec.tsx b/packages/web/test/hydration/frame-occlusion-document.spec.tsx
new file mode 100644
index 0000000000..1674171b11
--- /dev/null
+++ b/packages/web/test/hydration/frame-occlusion-document.spec.tsx
@@ -0,0 +1,118 @@
+/**
+ * @jsxImportSource @solidjs/web
+ */
+// Occlusion — client half. Hydrates the document
+// test/server/frame-occlusion-document.spec.tsx rendered: item `a`'s excerpt
+// arrived as an `sc:region:` record only, item `b`'s as markup only. With
+// every request failing, expanding `a` mounts its excerpt from the record,
+// and collapsing then expanding `b` remounts its excerpt — nothing leaves
+// the browser, and each excerpt is on screen exactly once.
+import { describe, expect, test, vi } from "vitest";
+import { flush } from "solid-js";
+import { hydrate } from "@solidjs/web";
+import { installServerComponents } from "../../frames/src/client.js";
+import { prepareTier } from "../../frames/src/frame-client.js";
+import { createServerReference } from "../../server-functions/src/client.js";
+import { makeHost } from "../lifecycle-matrix/harness.js";
+import { ARGS, FID, ITEMS, makeApp } from "../harness/frame-occlusion-document.jsx";
+import { applyChunk, drain, loadArtifact } from "./frame-live-document-helpers.js";
+
+const count = (haystack: string, needle: string) => haystack.split(needle).length - 1;
+
+describe("document face — occluded slot content — hydrate", () => {
+  test("expand mounts the record; collapse and expand remount; no request", async () => {
+    const { shell } = loadArtifact("frame-occlusion-document");
+    (globalThis as any)._$HY = { events: [], completed: new WeakSet(), r: {}, fe() {} };
+    const container = document.createElement("div");
+    document.body.appendChild(container);
+    installServerComponents(makeHost().host);
+
+    const urls: string[] = [];
+    vi.stubGlobal("fetch", async (input: any) => {
+      urls.push(typeof input === "string" ? input : input.url);
+      throw new Error("unexpected fetch");
+    });
+    const warnings: string[] = [];
+    vi.spyOn(console, "warn").mockImplementation((...args: unknown[]) => {
+      warnings.push(args.map(String).join(" "));
+    });
+    const errors: string[] = [];
+    vi.spyOn(console, "error").mockImplementation((...args: unknown[]) => {
+      errors.push(args.map(String).join(" "));
+    });
+
+    const list = createServerReference(FID);
+    const App = makeApp(() => list(...ARGS));
+
+    applyChunk(container, shell, true);
+    // The document announces the regions tier (`sc:tiers`): the slot args
+    // are `{$frame}` regions. Resident before hydrate, as a page whose
+    // modulepreload landed — a record naming a region waits for the tier.
+    expect((globalThis as any)._$HY.r["sc:tiers"]).toEqual(["regions"]);
+    await prepareTier("regions");
+    const [a, b] = ITEMS;
+    const excerptOf = (id: string) => container.querySelector(`#item-${id} .excerpt`);
+    const toggle = async (id: string) => {
+      container.querySelector<HTMLButtonElement>(`#toggle-${id}`)!.click();
+      flush();
+      await drain();
+    };
+    const before = {
+      itemA: container.querySelector("#item-a"),
+      itemB: container.querySelector("#item-b"),
+      excerptB: excerptOf("b")
+    };
+    expect(excerptOf("a"), "a's excerpt is not in the document").toBeNull();
+    expect(before.excerptB, "b's excerpt is in the document").not.toBeNull();
+
+    const dispose = hydrate(() => <App />, container);
+    flush();
+    await drain();
+
+    expect(warnings).toEqual([]);
+    expect(errors).toEqual([]);
+    expect(container.querySelector("#item-a"), "same item a").toBe(before.itemA);
+    expect(container.querySelector("#item-b"), "same item b").toBe(before.itemB);
+    expect(excerptOf("b"), "b's excerpt adopted").toBe(before.excerptB);
+    expect(excerptOf("a"), "a stays collapsed").toBeNull();
+
+    // Occluded at first render: expanding mounts it from the region record.
+    await toggle("a");
+    const excerptA = excerptOf("a");
+    expect(excerptA?.textContent, "a's excerpt mounted").toBe(a.excerpt);
+    expect(excerptA!.closest("solid-frame")!.getAttribute("data-fid")).toBe(
+      `${FID}.item#a.expandedChildren`
+    );
+
+    // Open at first render: collapse unmounts, expand remounts.
+    await toggle("b");
+    expect(excerptOf("b"), "b collapsed").toBeNull();
+    await toggle("b");
+    expect(excerptOf("b")?.textContent, "b's excerpt remounted").toBe(b.excerpt);
+
+    // The record-mounted excerpt remounts too.
+    await toggle("a");
+    expect(excerptOf("a"), "a collapsed").toBeNull();
+    await toggle("a");
+    expect(excerptOf("a")?.textContent, "a's excerpt remounted").toBe(a.excerpt);
+
+    console.log("[occlusion]", {
+      urls,
+      warnings,
+      errors,
+      sameExcerptB: excerptOf("b") === before.excerptB,
+      sameExcerptA: excerptOf("a") === excerptA,
+      html: container.innerHTML
+    });
+
+    for (const it of ITEMS) {
+      expect(count(container.textContent!, it.excerpt), `${it.id} excerpt on screen once`).toBe(1);
+      expect(count(container.textContent!, it.title), `${it.id} header on screen once`).toBe(1);
+    }
+    expect(urls, "no request left the browser").toEqual([]);
+    expect(errors).toEqual([]);
+
+    dispose();
+    container.remove();
+  });
+});
diff --git a/packages/web/test/server/frame-binding-slots.spec.tsx b/packages/web/test/server/frame-binding-slots.spec.tsx
index b6bb2b2aa9..855f1a7a5f 100644
--- a/packages/web/test/server/frame-binding-slots.spec.tsx
+++ b/packages/web/test/server/frame-binding-slots.spec.tsx
@@ -235,6 +235,23 @@ describe("binding slots — stream face", () => {
     );
   });
 
+  it("a class ARRAY binds its object entries' names as the object form does; its strings stay inline", async () => {
+    const ServerComp = (props: any) => {
+      const t = props.toggle({ $key: 7 });
+      return (
+        <div class={["toggle", { open: t.open }]}>
+          <a onClick={t.onToggle}>{t.label}</a>
+        </div>
+      );
+    };
+    const chunks = await collect(renderServerComponent(ServerComp, { frame: { id: "ds1a" } }));
+    const html = plain(chunks.find(c => c.type === "html").html);
+    expect(html).toContain(
+      '<div class="toggle" _s:class="toggle#7:open=open"><a _s:on:click="toggle#7:onToggle"><!--_s:t=toggle#7:label--><!--/_s:t--></a></div>'
+    );
+    expect(findings()).toEqual([]);
+  });
+
   it("keys and class names percent-encode onto the marker alphabet", async () => {
     const ServerComp = (props: any) => {
       const row = props.row({ id: 1 });
@@ -833,6 +850,42 @@ describe("binding slots — document face (t=0)", () => {
     expect(findings()).toEqual([]);
   });
 
+  it("a class ARRAY writes its strings and its bound names' t=0 values into one class attribute", async () => {
+    const ServerComp = (props: any) => (
+      <ul>
+        {[1, 2].map(id => {
+          const t = props.toggle({ $key: id });
+          return (
+            <li>
+              <div class={["toggle", { open: t.open }]}>
+                <a onClick={t.onToggle}>{t.label}</a>
+              </div>
+            </li>
+          );
+        })}
+      </ul>
+    );
+    const Inline = frameTransformDirectResult(ServerComp, { id: "dsd1a" }) as any;
+    let calls = 0;
+    const html = plain(
+      await document(() =>
+        Inline({
+          toggle: () => {
+            const open = calls++ === 0;
+            return { open, label: open ? "[-]" : "[+] comments collapsed", onToggle: () => {} };
+          }
+        })
+      )
+    );
+    expect(html).toContain(
+      '<div class="toggle open" _s:class="toggle#1:open=open"><a _s:on:click="toggle#1:onToggle" _hk><!--_s:t=toggle#1:label-->[-]<!--/_s:t--></a></div>'
+    );
+    expect(html).toContain(
+      '<div class="toggle" _s:class="toggle#2:open=open"><a _s:on:click="toggle#2:onToggle" _hk><!--_s:t=toggle#2:label-->[+] comments collapsed<!--/_s:t--></a></div>'
+    );
+    expect(findings()).toEqual([]);
+  });
+
   it("a `$key`ed call in a component prop runs the fill ONCE and emits ONE record at t=0", async () => {
     const ServerComp = (props: any) => (
       <ul>
diff --git a/packages/web/test/server/frame-occlusion-document.spec.tsx b/packages/web/test/server/frame-occlusion-document.spec.tsx
new file mode 100644
index 0000000000..82bf1997c4
--- /dev/null
+++ b/packages/web/test/server/frame-occlusion-document.spec.tsx
@@ -0,0 +1,90 @@
+/**
+ * @jsxImportSource @solidjs/web
+ */
+// Occlusion — server half. Server content passed to a client slot ships
+// exactly once: as markup where the fill placed it at first render, as an
+// `sc:region:` record where it did not. Writes the artifact
+// test/hydration/frame-occlusion-document.spec.tsx hydrates.
+import { describe, expect, test } from "vitest";
+import { mkdirSync, writeFileSync } from "node:fs";
+import { resolve, dirname } from "node:path";
+import { fileURLToPath } from "node:url";
+import { renderToStream } from "@solidjs/web";
+import { frameTransformDirectResult, ServerComponentPlugin } from "../../frames/src/frame-sink.js";
+import {
+  ARGS,
+  FID,
+  ITEMS,
+  LateItem,
+  makeApp,
+  makeListComponent
+} from "../harness/frame-occlusion-document.jsx";
+
+const artifactsDir = resolve(dirname(fileURLToPath(import.meta.url)), "../harness/__artifacts__");
+mkdirSync(artifactsDir, { recursive: true });
+
+function collect(code: () => any): Promise<string> {
+  return new Promise(resolvePromise => {
+    const chunks: string[] = [];
+    renderToStream(code, { plugins: [ServerComponentPlugin] } as any).pipe({
+      write(chunk: string) {
+        chunks.push(chunk);
+      },
+      end() {
+        resolvePromise(chunks.join(""));
+      }
+    });
+  });
+}
+
+const scripts = (html: string) =>
+  [...html.matchAll(/<script[^>]*>([\s\S]*?)<\/script>/g)].map(m => m[1]).join("\n");
+const markup = (html: string) => html.replace(/<script[\s\S]*?<\/script>/g, "");
+const count = (haystack: string, needle: string) => haystack.split(needle).length - 1;
+
+function render(Fill?: any) {
+  const Inline = frameTransformDirectResult(makeListComponent(), { id: FID, args: ARGS }) as any;
+  const App = makeApp(() => Promise.resolve(Inline), Fill);
+  return collect(() => <App />);
+}
+
+describe("document face — occluded slot content — server render", () => {
+  test("each excerpt ships once: markup where placed, a region record where not", async () => {
+    const html = await render();
+    console.log(`${FID}:\n${html}`);
+    const [a, b] = ITEMS;
+
+    // Headers are placed by every fill: markup, once.
+    for (const it of ITEMS) {
+      expect(count(markup(html), it.title), `${it.id} header in markup`).toBe(1);
+      expect(count(scripts(html), it.title), `${it.id} header not in records`).toBe(0);
+    }
+
+    // `a` is collapsed at first render: the excerpt is a record, not markup.
+    expect(count(html, a.excerpt), "a excerpt ships once").toBe(1);
+    expect(count(markup(html), a.excerpt), "a excerpt not in markup").toBe(0);
+    expect(scripts(html)).toContain(`sc:region:${FID}.item#a.expandedChildren`);
+    expect(markup(html)).not.toContain(`data-fid="${FID}.item#a.expandedChildren"`);
+
+    // `b` is open at first render: the excerpt is markup, not a record.
+    expect(count(html, b.excerpt), "b excerpt ships once").toBe(1);
+    expect(count(markup(html), b.excerpt), "b excerpt in markup").toBe(1);
+    expect(scripts(html)).not.toContain(`sc:region:${FID}.item#b.expandedChildren`);
+    expect(markup(html)).toContain(`data-fid="${FID}.item#b.expandedChildren"`);
+
+    writeFileSync(
+      resolve(artifactsDir, "frame-occlusion-document.json"),
+      JSON.stringify({ name: "frame-occlusion-document", shell: html, rest: "" }, null, 2)
+    );
+  });
+
+  test("a placement after the synchronous slot render is locked: the record, no markup", async () => {
+    const html = await render(LateItem);
+    console.log(`${FID} (late):\n${html}`);
+    for (const it of ITEMS) {
+      expect(count(html, it.excerpt), `${it.id} excerpt ships once`).toBe(1);
+      expect(count(markup(html), it.excerpt), `${it.id} excerpt not in markup`).toBe(0);
+      expect(scripts(html)).toContain(`sc:region:${FID}.item#${it.id}.expandedChildren`);
+    }
+  });
+});
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 53cdae5932..ed2980c661 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -47,7 +47,7 @@ importers:
         version: link:packages/babel-plugin
       '@solidjs/vite-plugin':
         specifier: 3.0.0-next.35
-        version: 3.0.0-next.35(@solidjs/web@packages+web)(@testing-library/jest-dom@6.9.1)(solid-js@packages+solid)(vite@8.1.5(@types/node@25.6.0)(esbuild@0.27.7)(terser@5.49.0))
+        version: 3.0.0-next.35(@solidjs/web@packages+web)(@testing-library/jest-dom@6.9.1)(vite@8.1.5(@types/node@25.6.0)(esbuild@0.27.7)(terser@5.49.0))
       '@solidjs/web':
         specifier: workspace:*
         version: link:packages/web
@@ -125,8 +125,8 @@ importers:
         version: link:../../packages/solid
     devDependencies:
       '@solidjs/vite-plugin':
-        specifier: 3.0.0-next.35
-        version: 3.0.0-next.35(@solidjs/web@packages+web)(@testing-library/jest-dom@6.9.1)(solid-js@packages+solid)(vite@8.1.5(@types/node@25.6.0)(esbuild@0.27.7)(terser@5.49.0))
+        specifier: 3.0.0-next.49
+        version: 3.0.0-next.49(@solidjs/web@packages+web)(@testing-library/jest-dom@6.9.1)(solid-js@packages+solid)(vite@8.1.5(@types/node@25.6.0)(esbuild@0.27.7)(terser@5.49.0))
       vite:
         specifier: ^8.0.0
         version: 8.1.5(@types/node@25.6.0)(esbuild@0.27.7)(terser@5.49.0)
@@ -138,8 +138,8 @@ importers:
         version: 3.22.1
     devDependencies:
       '@solidjs/vite-plugin':
-        specifier: 3.0.0-next.35
-        version: 3.0.0-next.35(@solidjs/web@packages+web)(@testing-library/jest-dom@6.9.1)(solid-js@packages+solid)(vite@7.3.3(@types/node@25.6.0)(lightningcss@1.33.0)(terser@5.49.0))
+        specifier: 3.0.0-next.49
+        version: 3.0.0-next.49(@solidjs/web@packages+web)(@testing-library/jest-dom@6.9.1)(solid-js@packages+solid)(vite@8.1.5(@types/node@25.6.0)(esbuild@0.27.7)(terser@5.49.0))
       '@solidjs/web':
         specifier: workspace:*
         version: link:../../packages/web
@@ -153,14 +153,14 @@ importers:
         specifier: ^6.0.2
         version: 6.0.3
       vite:
-        specifier: ^7.0.0
-        version: 7.3.3(@types/node@25.6.0)(lightningcss@1.33.0)(terser@5.49.0)
+        specifier: ^8.0.0
+        version: 8.1.5(@types/node@25.6.0)(esbuild@0.27.7)(terser@5.49.0)
 
   examples/hackernews:
     dependencies:
       '@solidjs/router':
-        specifier: 2.0.0-next.29
-        version: 2.0.0-next.29(@solidjs/web@packages+web)(solid-js@packages+solid)
+        specifier: 2.0.0-next.38
+        version: 2.0.0-next.38(@solidjs/web@packages+web)(solid-js@packages+solid)
       '@solidjs/web':
         specifier: workspace:*
         version: link:../../packages/web
@@ -169,8 +169,8 @@ importers:
         version: link:../../packages/solid
     devDependencies:
       '@solidjs/vite-plugin':
-        specifier: 3.0.0-next.35
-        version: 3.0.0-next.35(@solidjs/web@packages+web)(@testing-library/jest-dom@6.9.1)(solid-js@packages+solid)(vite@8.1.5(@types/node@25.6.0)(esbuild@0.27.7)(terser@5.49.0))
+        specifier: 3.0.0-next.49
+        version: 3.0.0-next.49(@solidjs/web@packages+web)(@testing-library/jest-dom@6.9.1)(solid-js@packages+solid)(vite@8.1.5(@types/node@25.6.0)(esbuild@0.27.7)(terser@5.49.0))
       vite:
         specifier: ^8.0.0
         version: 8.1.5(@types/node@25.6.0)(esbuild@0.27.7)(terser@5.49.0)
@@ -178,8 +178,8 @@ importers:
   examples/hackernews-spa:
     dependencies:
       '@solidjs/router':
-        specifier: 2.0.0-next.29
-        version: 2.0.0-next.29(@solidjs/web@packages+web)(solid-js@packages+solid)
+        specifier: 2.0.0-next.38
+        version: 2.0.0-next.38(@solidjs/web@packages+web)(solid-js@packages+solid)
       '@solidjs/web':
         specifier: workspace:*
         version: link:../../packages/web
@@ -188,8 +188,8 @@ importers:
         version: link:../../packages/solid
     devDependencies:
       '@solidjs/vite-plugin':
-        specifier: 3.0.0-next.35
-        version: 3.0.0-next.35(@solidjs/web@packages+web)(@testing-library/jest-dom@6.9.1)(solid-js@packages+solid)(vite@8.1.5(@types/node@25.6.0)(esbuild@0.27.7)(terser@5.49.0))
+        specifier: 3.0.0-next.49
+        version: 3.0.0-next.49(@solidjs/web@packages+web)(@testing-library/jest-dom@6.9.1)(solid-js@packages+solid)(vite@8.1.5(@types/node@25.6.0)(esbuild@0.27.7)(terser@5.49.0))
       vite:
         specifier: ^8.0.0
         version: 8.1.5(@types/node@25.6.0)(esbuild@0.27.7)(terser@5.49.0)
@@ -197,8 +197,8 @@ importers:
   examples/migrating-element:
     devDependencies:
       '@solidjs/vite-plugin':
-        specifier: 3.0.0-next.35
-        version: 3.0.0-next.35(@solidjs/web@packages+web)(@testing-library/jest-dom@6.9.1)(solid-js@packages+solid)(vite@7.3.3(@types/node@25.6.0)(lightningcss@1.33.0)(terser@5.49.0))
+        specifier: 3.0.0-next.49
+        version: 3.0.0-next.49(@solidjs/web@packages+web)(@testing-library/jest-dom@6.9.1)(solid-js@packages+solid)(vite@8.1.5(@types/node@25.6.0)(esbuild@0.27.7)(terser@5.49.0))
       '@solidjs/web':
         specifier: workspace:*
         version: link:../../packages/web
@@ -212,14 +212,14 @@ importers:
         specifier: ^6.0.2
         version: 6.0.3
       vite:
-        specifier: ^7.0.0
-        version: 7.3.3(@types/node@25.6.0)(lightningcss@1.33.0)(terser@5.49.0)
+        specifier: ^8.0.0
+        version: 8.1.5(@types/node@25.6.0)(esbuild@0.27.7)(terser@5.49.0)
 
   examples/notes:
     dependencies:
       '@solidjs/router':
-        specifier: 2.0.0-next.29
-        version: 2.0.0-next.29(@solidjs/web@packages+web)(solid-js@packages+solid)
+        specifier: 2.0.0-next.38
+        version: 2.0.0-next.38(@solidjs/web@packages+web)(solid-js@packages+solid)
       '@solidjs/web':
         specifier: workspace:*
         version: link:../../packages/web
@@ -237,8 +237,8 @@ importers:
         version: 1.17.5
     devDependencies:
       '@solidjs/vite-plugin':
-        specifier: 3.0.0-next.35
-        version: 3.0.0-next.35(@solidjs/web@packages+web)(@testing-library/jest-dom@6.9.1)(solid-js@packages+solid)(vite@8.1.5(@types/node@25.6.0)(esbuild@0.27.7)(terser@5.49.0))
+        specifier: 3.0.0-next.49
+        version: 3.0.0-next.49(@solidjs/web@packages+web)(@testing-library/jest-dom@6.9.1)(solid-js@packages+solid)(vite@8.1.5(@types/node@25.6.0)(esbuild@0.27.7)(terser@5.49.0))
       vite:
         specifier: ^8.0.0
         version: 8.1.5(@types/node@25.6.0)(esbuild@0.27.7)(terser@5.49.0)
@@ -246,8 +246,8 @@ importers:
   examples/rendering:
     devDependencies:
       '@solidjs/vite-plugin':
-        specifier: 3.0.0-next.35
-        version: 3.0.0-next.35(@solidjs/web@packages+web)(@testing-library/jest-dom@6.9.1)(solid-js@packages+solid)(vite@7.3.3(@types/node@25.6.0)(lightningcss@1.33.0)(terser@5.49.0))
+        specifier: 3.0.0-next.49
+        version: 3.0.0-next.49(@solidjs/web@packages+web)(@testing-library/jest-dom@6.9.1)(solid-js@packages+solid)(vite@8.1.5(@types/node@25.6.0)(esbuild@0.27.7)(terser@5.49.0))
       '@solidjs/web':
         specifier: workspace:*
         version: link:../../packages/web
@@ -264,14 +264,14 @@ importers:
         specifier: ^6.0.2
         version: 6.0.2
       vite:
-        specifier: ^7.0.0
-        version: 7.3.3(@types/node@25.6.0)(lightningcss@1.33.0)(terser@5.49.0)
+        specifier: ^8.0.0
+        version: 8.1.5(@types/node@25.6.0)(esbuild@0.27.7)(terser@5.49.0)
 
   examples/room:
     dependencies:
       '@solidjs/router':
-        specifier: 2.0.0-next.29
-        version: 2.0.0-next.29(@solidjs/web@packages+web)(solid-js@packages+solid)
+        specifier: 2.0.0-next.38
+        version: 2.0.0-next.38(@solidjs/web@packages+web)(solid-js@packages+solid)
       '@solidjs/web':
         specifier: workspace:*
         version: link:../../packages/web
@@ -280,8 +280,8 @@ importers:
         version: link:../../packages/solid
     devDependencies:
       '@solidjs/vite-plugin':
-        specifier: 3.0.0-next.35
-        version: 3.0.0-next.35(@solidjs/web@packages+web)(@testing-library/jest-dom@6.9.1)(solid-js@packages+solid)(vite@8.1.5(@types/node@25.6.0)(esbuild@0.27.7)(terser@5.49.0))
+        specifier: 3.0.0-next.49
+        version: 3.0.0-next.49(@solidjs/web@packages+web)(@testing-library/jest-dom@6.9.1)(solid-js@packages+solid)(vite@8.1.5(@types/node@25.6.0)(esbuild@0.27.7)(terser@5.49.0))
       '@vitejs/plugin-basic-ssl':
         specifier: ^2.3.0
         version: 2.3.0(vite@8.1.5(@types/node@25.6.0)(esbuild@0.27.7)(terser@5.49.0))
@@ -292,8 +292,8 @@ importers:
   examples/sierpinski:
     devDependencies:
       '@solidjs/vite-plugin':
-        specifier: 3.0.0-next.35
-        version: 3.0.0-next.35(@solidjs/web@packages+web)(@testing-library/jest-dom@6.9.1)(solid-js@packages+solid)(vite@7.3.3(@types/node@25.6.0)(lightningcss@1.33.0)(terser@5.49.0))
+        specifier: 3.0.0-next.49
+        version: 3.0.0-next.49(@solidjs/web@packages+web)(@testing-library/jest-dom@6.9.1)(solid-js@packages+solid)(vite@8.1.5(@types/node@25.6.0)(esbuild@0.27.7)(terser@5.49.0))
       '@solidjs/web':
         specifier: workspace:*
         version: link:../../packages/web
@@ -307,14 +307,14 @@ importers:
         specifier: ^6.0.2
         version: 6.0.2
       vite:
-        specifier: ^7.0.0
-        version: 7.3.3(@types/node@25.6.0)(lightningcss@1.33.0)(terser@5.49.0)
+        specifier: ^8.0.0
+        version: 8.1.5(@types/node@25.6.0)(esbuild@0.27.7)(terser@5.49.0)
 
   examples/todos:
     devDependencies:
       '@solidjs/vite-plugin':
-        specifier: 3.0.0-next.35
-        version: 3.0.0-next.35(@solidjs/web@packages+web)(@testing-library/jest-dom@6.9.1)(solid-js@packages+solid)(vite@7.3.3(@types/node@25.6.0)(lightningcss@1.33.0)(terser@5.49.0))
+        specifier: 3.0.0-next.49
+        version: 3.0.0-next.49(@solidjs/web@packages+web)(@testing-library/jest-dom@6.9.1)(solid-js@packages+solid)(vite@8.1.5(@types/node@25.6.0)(esbuild@0.27.7)(terser@5.49.0))
       '@solidjs/web':
         specifier: workspace:*
         version: link:../../packages/web
@@ -328,11 +328,14 @@ importers:
         specifier: ^6.0.2
         version: 6.0.2
       vite:
-        specifier: ^7.0.0
-        version: 7.3.3(@types/node@25.6.0)(lightningcss@1.33.0)(terser@5.49.0)
+        specifier: ^8.0.0
+        version: 8.1.5(@types/node@25.6.0)(esbuild@0.27.7)(terser@5.49.0)
 
   examples/todos-server:
     dependencies:
+      '@solidjs/router':
+        specifier: 2.0.0-next.38
+        version: 2.0.0-next.38(@solidjs/web@packages+web)(solid-js@packages+solid)
       '@solidjs/web':
         specifier: workspace:*
         version: link:../../packages/web
@@ -344,8 +347,8 @@ importers:
         version: 1.17.5
     devDependencies:
       '@solidjs/vite-plugin':
-        specifier: 3.0.0-next.35
-        version: 3.0.0-next.35(@solidjs/web@packages+web)(@testing-library/jest-dom@6.9.1)(solid-js@packages+solid)(vite@8.1.5(@types/node@25.6.0)(esbuild@0.27.7)(terser@5.49.0))
+        specifier: 3.0.0-next.49
+        version: 3.0.0-next.49(@solidjs/web@packages+web)(@testing-library/jest-dom@6.9.1)(solid-js@packages+solid)(vite@8.1.5(@types/node@25.6.0)(esbuild@0.27.7)(terser@5.49.0))
       vite:
         specifier: ^8.0.0
         version: 8.1.5(@types/node@25.6.0)(esbuild@0.27.7)(terser@5.49.0)
@@ -2364,8 +2367,8 @@ packages:
     cpu: [x64]
     os: [win32]
 
-  '@solidjs/router@2.0.0-next.29':
-    resolution: {integrity: sha512-MyYoVYL3wCvU57poYki2dMfJGrGOfKSYg/pWgh76m9mproX/Dt+X/Ufw4ie3/9D3/IRrEbus0IqNaBaLgbriOA==}
+  '@solidjs/router@2.0.0-next.38':
+    resolution: {integrity: sha512-MGDqgWqSLthgYQKFB0lYoxSwG0RKKPKQu1G8qXhSFw5zKGUCuGpHHzPZQiiY3BBVFBhlFsbFoQpuIPAcC0FbmA==}
     peerDependencies:
       '@solidjs/web': workspace:*
       filesystem-routing: '>=0.4.0'
@@ -2389,6 +2392,21 @@ packages:
       '@testing-library/jest-dom':
         optional: true
 
+  '@solidjs/vite-plugin@3.0.0-next.49':
+    resolution: {integrity: sha512-s50Tz24Nh061/lTSvG6VyVIAraQ4gYnnwjUCe2XfDAHY2jD85vYIckJiH1XV4ZnF4I79PaOsSoa7HhzZGO99+w==}
+    engines: {node: '>=22.12.0'}
+    peerDependencies:
+      '@solidjs/start-devtools': ^1.0.0-next.2
+      '@solidjs/web': workspace:*
+      '@testing-library/jest-dom': ^5.16.6 || ^5.17.0 || ^6.0.0 || ^7.0.0
+      solid-js: workspace:*
+      vite: ^8.0.0 || ^9.0.0
+    peerDependenciesMeta:
+      '@solidjs/start-devtools':
+        optional: true
+      '@testing-library/jest-dom':
+        optional: true
+
   '@standard-schema/spec@1.1.0':
     resolution: {integrity: sha512-l2aFy5jALhniG5HgqrD6jXLi/rUWrKvqN/qJx6yoJsgKhblVd+iqqU4RCXavm/jPityDo5TCvKMnpjKnOriy0w==}
 
@@ -6012,12 +6030,12 @@ snapshots:
   '@rollup/rollup-win32-x64-msvc@4.59.0':
     optional: true
 
-  '@solidjs/router@2.0.0-next.29(@solidjs/web@packages+web)(solid-js@packages+solid)':
+  '@solidjs/router@2.0.0-next.38(@solidjs/web@packages+web)(solid-js@packages+solid)':
     dependencies:
       '@solidjs/web': link:packages/web
       solid-js: link:packages/solid
 
-  '@solidjs/vite-plugin@3.0.0-next.35(@solidjs/web@packages+web)(@testing-library/jest-dom@6.9.1)(solid-js@packages+solid)(vite@7.3.3(@types/node@25.6.0)(lightningcss@1.33.0)(terser@5.49.0))':
+  '@solidjs/vite-plugin@3.0.0-next.35(@solidjs/web@packages+web)(@testing-library/jest-dom@6.9.1)(vite@8.1.5(@types/node@25.6.0)(esbuild@0.27.7)(terser@5.49.0))':
     dependencies:
       '@ampproject/remapping': 2.3.0
       '@babel/core': 7.29.0
@@ -6026,15 +6044,14 @@ snapshots:
       '@solidjs/web': link:packages/web
       '@types/babel__core': 7.20.5
       merge-anything: 5.1.7
-      solid-js: link:packages/solid
-      vite: 7.3.3(@types/node@25.6.0)(lightningcss@1.33.0)(terser@5.49.0)
-      vitefu: 1.1.3(vite@7.3.3(@types/node@25.6.0)(lightningcss@1.33.0)(terser@5.49.0))
+      vite: 8.1.5(@types/node@25.6.0)(esbuild@0.27.7)(terser@5.49.0)
+      vitefu: 1.1.3(vite@8.1.5(@types/node@25.6.0)(esbuild@0.27.7)(terser@5.49.0))
     optionalDependencies:
       '@testing-library/jest-dom': 6.9.1
     transitivePeerDependencies:
       - supports-color
 
-  '@solidjs/vite-plugin@3.0.0-next.35(@solidjs/web@packages+web)(@testing-library/jest-dom@6.9.1)(solid-js@packages+solid)(vite@8.1.5(@types/node@25.6.0)(esbuild@0.27.7)(terser@5.49.0))':
+  '@solidjs/vite-plugin@3.0.0-next.49(@solidjs/web@packages+web)(@testing-library/jest-dom@6.9.1)(solid-js@packages+solid)(vite@8.1.5(@types/node@25.6.0)(esbuild@0.27.7)(terser@5.49.0))':
     dependencies:
       '@ampproject/remapping': 2.3.0
       '@babel/core': 7.29.0
@@ -7608,10 +7625,6 @@ snapshots:
       fsevents: 2.3.3
       terser: 5.49.0
 
-  vitefu@1.1.3(vite@7.3.3(@types/node@25.6.0)(lightningcss@1.33.0)(terser@5.49.0)):
-    optionalDependencies:
-      vite: 7.3.3(@types/node@25.6.0)(lightningcss@1.33.0)(terser@5.49.0)
-
   vitefu@1.1.3(vite@8.1.5(@types/node@25.6.0)(esbuild@0.27.7)(terser@5.49.0)):
     optionalDependencies:
       vite: 8.1.5(@types/node@25.6.0)(esbuild@0.27.7)(terser@5.49.0)