diff --git a/documentation/plans/examples-grid-plan.md b/documentation/plans/examples-grid-plan.md
index dfd15ff97..09224a97a 100644
--- a/documentation/plans/examples-grid-plan.md
+++ b/documentation/plans/examples-grid-plan.md
@@ -96,6 +96,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
 
@@ -127,15 +133,32 @@ owning it (`chat`).
 
 ## Per-example disposition
 
-### `hackernews` — bottom-left, reads. KEEP; collapse → binding slot, layout, README. Blocked on G1, G2
+### `hackernews` — bottom-left, reads. KEEP; collapse → `<details>`, server routes, layout, README. Built 2026-09-29
 
 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, the loading boundary, and a navigation dim
+(`useIsRouting()`) that both twins share. 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 +178,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. KEEP; layout only. 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,23 +207,48 @@ 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. KEEP; authoring layout + README. 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. KEEP; README + small cleanups. 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
 
@@ -206,6 +274,21 @@ 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.
 
+**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. REBUILD (own plan)
 
 Plan: `documentation/plans/chat-flagship.md` (to write first). Realistic
@@ -261,7 +344,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 +437,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,8 +451,9 @@ 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.
@@ -371,12 +468,14 @@ examples that are already right carry the most value per hour._
 
 1. G2 (binding-slot execution), design then code.
 2. G1 (text positions), design then code.
-3. `hackernews` in the reviewed shape, with `hackernews-spa`'s layout.
+3. `hackernews` in the reviewed shape, with `hackernews-spa`'s layout
+   (built 2026-09-29).
 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.
+   binding slot with one position — not the Q4 wrap. Revised and built
+   2026-09-30 (see the section above).
 6. `chat-flagship.md`, then `chat`.
 7. `board-flagship.md`, then `board`.
 8. Retire `room`.
diff --git a/documentation/server-components/server-components-principles.md b/documentation/server-components/server-components-principles.md
index c3405b143..2d2919670 100644
--- a/documentation/server-components/server-components-principles.md
+++ b/documentation/server-components/server-components-principles.md
@@ -3106,7 +3106,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
@@ -4366,7 +4366,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:
@@ -4403,7 +4409,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/package.json b/examples/chat/package.json
index 893924791..b72f55c13 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.47",
     "vite": "^8.0.0"
   }
 }
diff --git a/examples/effect/package.json b/examples/effect/package.json
index a4bbe784b..43681a314 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.47",
     "@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 eaec23fdc..5e5b4564b 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, dimmed, 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 a4796bf25..a7504dee7 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.34",
     "@solidjs/web": "workspace:*",
     "solid-js": "workspace:*"
   },
   "devDependencies": {
-    "@solidjs/vite-plugin": "3.0.0-next.35",
+    "@solidjs/vite-plugin": "3.0.0-next.47",
     "vite": "^8.0.0"
   }
 }
diff --git a/examples/hackernews-spa/src/app.css b/examples/hackernews-spa/src/app.css
index bb5325b72..a75807c01 100644
--- a/examples/hackernews-spa/src/app.css
+++ b/examples/hackernews-spa/src/app.css
@@ -76,6 +76,16 @@ a {
   position: relative;
 }
 
+.page {
+  transition: opacity 0.2s;
+}
+
+/* The delay keeps a navigation that preloading already made fast from flickering. */
+.page.routing {
+  opacity: 0.55;
+  transition-delay: 0.15s;
+}
+
 @media (max-width: 860px) {
   .header .inner {
     padding: 15px 30px;
@@ -236,7 +246,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 +272,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 c83cab353..a35fbf779 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, useIsRouting } from "@solidjs/router";
 import { Loading } from "solid-js";
 import Nav from "~/components/nav";
 import Stories, { preload as preloadStories } from "~/routes/stories";
@@ -13,15 +13,16 @@ 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`.
 const Router = createRouter({
   routes: [
     defineRoute({
-      path: ["/", "/top", "/new", "/show", "/ask", "/job"],
+      path: "/:type?",
+      matchFilters: { type: ["top", "new", "show", "ask", "job"] },
       component: Stories,
       preload: preloadStories
     }),
@@ -33,12 +34,21 @@ const Router = createRouter({
 export default function App() {
   return (
     <Router>
-      {props => (
-        <>
-          <Nav />
-          <Loading fallback={<div class="news-list-nav">Loading...</div>}>{props.children}</Loading>
-        </>
-      )}
+      {props => {
+        // A navigation keeps the current page up, dimmed, until the next one
+        // is ready, instead of blanking it.
+        const isRouting = useIsRouting();
+        return (
+          <>
+            <Nav />
+            <div class={["page", { routing: isRouting() }]}>
+              <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 564c9664e..d66f9cde6 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 32375785e..000000000
--- 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 83e358cd3..000000000
--- 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 e9ad2530e..dae5da6bb 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 f841aff7d..4142af807 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 43dc53527..608caa4af 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 ea3f130fb..f07ca5a28 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 7e2ceb863..4239674c4 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 11f02fe2a..c3957e75c 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 a4a346dd5..707b01168 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,34 @@ 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 inside the
+router's `query`, which gives the call cache identity and preloading, 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 = query(async ({ params }: ServerRouteArgs<RouteParams<"/stories/:id">>) => {
+  "use server";
+  const story = await hn.getStory(params.id);
+  return () => <div class="item-view">…</div>;
+}, "story");
+
+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)):
+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.
 
-```tsx
-const View = dynamic(() => storyView(props.params.id));
-return <View toggle={p => <Toggle>{p.children}</Toggle>} />;
-```
+## The collapse is HTML
 
-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.
+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 +57,19 @@ 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,
+so most navigations land at once. When one has to wait (click the big thread
+without hovering, or tab to a link and press Enter), the current page stays up
+and dims until the next is ready, instead of going blank. That's
+`useIsRouting()` in [src/app.tsx](./src/app.tsx), the same in both twins.
 
 **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 +81,19 @@ 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 (inside `query`) as a server route. The feeds also export their
+  `?page` search schema, and the thread's file holds the recursive `Comment`.
+- [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, the navigation dim, 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 8ea8893e4..0cb44e52b 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.34",
     "@solidjs/web": "workspace:*",
     "solid-js": "workspace:*"
   },
   "devDependencies": {
-    "@solidjs/vite-plugin": "3.0.0-next.35",
+    "@solidjs/vite-plugin": "3.0.0-next.47",
     "vite": "^8.0.0"
   }
 }
diff --git a/examples/hackernews/src/app.css b/examples/hackernews/src/app.css
index bb5325b72..a75807c01 100644
--- a/examples/hackernews/src/app.css
+++ b/examples/hackernews/src/app.css
@@ -76,6 +76,16 @@ a {
   position: relative;
 }
 
+.page {
+  transition: opacity 0.2s;
+}
+
+/* The delay keeps a navigation that preloading already made fast from flickering. */
+.page.routing {
+  opacity: 0.55;
+  transition-delay: 0.15s;
+}
+
 @media (max-width: 860px) {
   .header .inner {
     padding: 15px 30px;
@@ -236,7 +246,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 +272,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 44c5a0152..2a158000c 100644
--- a/examples/hackernews/src/app.tsx
+++ b/examples/hackernews/src/app.tsx
@@ -2,54 +2,89 @@
 // ../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
+// Note there is no server-component API in this file. A `"use server"` call
+// mounts as a route (`serverRouteComponent`) or through `dynamic()`; the
 // transport install lives in the generated entry.
-import { createRouter, defineRoute } from "@solidjs/router";
+import { createRouter, defineRoute, useIsRouting } 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 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.
 const Router = createRouter({
   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 = dynamic(() => getNav());
   return (
     <Router>
-      {props => (
-        <>
-          <Loading fallback={<div class="news-list-nav">Loading...</div>}>
+      {props => {
+        // A navigation keeps the current page up, dimmed, until the next one
+        // is ready, instead of blanking it.
+        const isRouting = useIsRouting();
+        return (
+          <>
             <Nav />
-          </Loading>
-          <Loading fallback={<div class="news-list-nav">Loading...</div>}>{props.children}</Loading>
-        </>
-      )}
+            <div class={["page", { routing: isRouting() }]}>
+              <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 32375785e..000000000
--- 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 d85d8b909..000000000
--- 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 e5195a39b..000000000
--- 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 7f811ed04..93237a51a 100644
--- a/examples/hackernews/src/routes/stories.tsx
+++ b/examples/hackernews/src/routes/stories.tsx
@@ -1,25 +1,96 @@
-import { type RoutePreloadFuncArgs, type RouteSectionProps } from "@solidjs/router";
-import { dynamic } from "@solidjs/web";
-import { getStories } from "~/lib/api";
+import {
+  query,
+  serverRouteComponent,
+  type RouteParams,
+  type ServerRouteArgs,
+  type StandardSchemaV1
+} from "@solidjs/router";
+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 = query(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 () => (
+    <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>
   );
-  return <View />;
-}
+}, "stories");
+
+// 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. `query` gives the call cache identity, so both read one entry.
+export default serverRouteComponent(getStories);
diff --git a/examples/hackernews/src/routes/story.tsx b/examples/hackernews/src/routes/story.tsx
index 94c3fd478..e93782d9b 100644
--- a/examples/hackernews/src/routes/story.tsx
+++ b/examples/hackernews/src/routes/story.tsx
@@ -1,21 +1,70 @@
-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 {
+  query,
+  serverRouteComponent,
+  type RouteParams,
+  type ServerRouteArgs
+} from "@solidjs/router";
+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 = query(async ({ params }: ServerRouteArgs<RouteParams<"/stories/:id">>) => {
+  "use server";
+  const story = await hn.getStory(params.id);
+  return () => (
+    <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>
+  );
+}, "story");
 
-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 3e75e36dd..e6ab8fd7c 100644
--- a/examples/hackernews/src/routes/user.tsx
+++ b/examples/hackernews/src/routes/user.tsx
@@ -1,14 +1,35 @@
-import { type RouteParams, type RoutePreloadFuncArgs, type RouteProps } from "@solidjs/router";
-import { dynamic } from "@solidjs/web";
-import { getUser } from "~/lib/api";
+import {
+  query,
+  serverRouteComponent,
+  type RouteParams,
+  type ServerRouteArgs
+} from "@solidjs/router";
+import * as hn from "~/server/hn";
 
-type Path = "/users/:id";
+const getUser = query(async ({ params }: ServerRouteArgs<RouteParams<"/users/:id">>) => {
+  "use server";
+  const user = await hn.getUser(params.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>
+  );
+}, "user");
 
-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-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 ea3f130fb..f07ca5a28 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 7e2ceb863..4239674c4 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 11f02fe2a..c3957e75c 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/package.json b/examples/migrating-element/package.json
index 968fe4f7b..a9de5bc77 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.47",
     "@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 ff9c02e8a..5f3311503 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 bd796ec5f..dfdab26b6 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.34",
     "@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.47",
     "vite": "^8.0.0"
   }
 }
diff --git a/examples/notes/src/app.tsx b/examples/notes/src/app.tsx
index 1512ea1e3..94c15ec5b 100644
--- a/examples/notes/src/app.tsx
+++ b/examples/notes/src/app.tsx
@@ -1,30 +1,16 @@
-// 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 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 => {
@@ -32,18 +18,35 @@ export default function App() {
         // place when a mutation's single-flight response includes it.
         const NoteList = dynamic(() => 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 477d68b01..cdcd71681 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 755ee01d7..0a4a6f05d 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 000000000..c2c098709
--- /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 5402479a4..3f97dcb04 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 f81cb92de..000000000
--- 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 abeb1aae7..000000000
--- 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 1f0149eb0..000000000
--- 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 000000000..5e5af7dbf
--- /dev/null
+++ b/examples/notes/src/router.tsx
@@ -0,0 +1,123 @@
+// 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, 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"));
+
+export const Router = createRouter({
+  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 f67744d37..000000000
--- 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 df7dd9e01..963e43d5f 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 65248c811..26b3067dd 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 6f3d30a92..ef3ff93e8 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 e0ee74175..000000000
--- 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 d62981988..000000000
--- 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 3cff7f017..000000000
--- 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 702cba727..000000000
--- 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 000000000..75f988399
--- /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 11f02fe2a..c3957e75c 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 66cd04dab..490d7b11d 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.47",
     "@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/package.json b/examples/room/package.json
index 1bf953fdf..a092e0e64 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.34",
     "@solidjs/web": "workspace:*",
     "solid-js": "workspace:*"
   },
   "devDependencies": {
-    "@solidjs/vite-plugin": "3.0.0-next.35",
+    "@solidjs/vite-plugin": "3.0.0-next.47",
     "@vitejs/plugin-basic-ssl": "^2.3.0",
     "vite": "^8.0.0"
   }
diff --git a/examples/sierpinski/package.json b/examples/sierpinski/package.json
index b796bdd94..940b34666 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.47",
     "@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 7f15c0ace..c7e6f253b 100644
--- a/examples/todos-server/README.md
+++ b/examples/todos-server/README.md
@@ -1,15 +1,20 @@
 # 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.
-
-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
+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.
+
+What JavaScript adds is the optimism a form cannot give — and some it
+cannot express at all. A toggle shows its result before the server answers;
+toggle-all checks every row, clear-completed hides them, and "N items left"
+counts through both. The client binds those values onto the server's own
+elements through **binding slots**, and reads the server's answers —
+including its failures — through `useSubmissions`.
+
+Same deliberately unreliable store as the SPA (400 ms saves, ~33% of them
+fail), so the optimistic UI, the per-row errors and the retry affordances
 get exercised.
 
 ```sh
@@ -17,105 +22,82 @@ 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 action={toggleTodo.with(t.id)} method="post">
+  <button class="toggle" name="completed" value={row.toggleTo} aria-pressed={row.pressed} />
+</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.
+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.
+
+## Errors are answers
+
+A failed save returns `{ error }` rather than throwing, so the failure is
+typed from the store ([src/server/db.ts](./src/server/db.ts)) to the
+client. The router records it as a submission; `useSubmissions(action)`
+lists them, and `submission.retry()` runs the same call again. 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 error renders on the server too.
+
+Adding is not optimistic: the server has not rendered a row for a todo it
+has not stored. The header ([src/app.tsx](./src/app.tsx)) marks the form
+busy while the add is in flight, clears the input on success, and keeps
+the text with the error and a retry on failure.
 
-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.
+## Binding slots
 
-The client's fill receives the args as reactive props and returns the
-**object** the template reads ([src/app.tsx](./src/app.tsx)):
+A slot the server calls returns **bindings**: an object whose properties
+the server template reads at positions — an attribute, a class, a handler,
+a text child. The list calls `props.row(...)` once per todo and
+`props.list(...)` once, with the data the client needs to decide:
 
 ```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={…} />
+const row = props.row({ $key: t.id, id: t.id, completed: t.completed, filter });
+
+<li $key={t.id} class={row.rowClass} hidden={row.hidden}>
 ```
 
-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.
+One rule: a slot property is a JSX attribute value, whole, or a text
+child, and nothing else. `class={row.rowClass}` binds;
+``class={`todo ${row.rowClass}`}`` or `if (row.hidden)` in the server
+component does not — the server has no value to compute with, so the
+decision belongs in the fill, which returns the decided value.
+
+The client's **fills** ([src/routes/todos.tsx](./src/routes/todos.tsx))
+receive the args as reactive props and return the object. A fill runs once
+per occurrence, as a component body does, so values are getters and
+handlers are plain closures. On the server each read marks its position;
+at document render the fill runs inline, so the document already carries
+`class="todo completed"` and `aria-pressed="true"` before JavaScript, and
+on hydration the fill binds to the same nodes. A response morphing the
+list keeps the positions a fill owns.
 
 ## 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.)
+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 has asked the server
+to do and not yet seen land, in a `createOptimisticStore`. Each action's
+`onSubmit` writes it inside the action's transition, so it releases in the
+frame the response's markup lands — a success shows no seam, a failure
+shows the server's value again.
+
+- toggle: the row shows `intent[id].completed ?? completed`, and under a
+  filter the row hides as soon as it no longer matches
+- remove: `hidden` on the server's `<li>` until the response drops the row
+- toggle-all and clear-completed: the list's fill writes intent for every
+  row it was given — the cross-element optimism no single form can express
+- the count, the toggle-all state and the clear button: the list's fill
+  computes them from its rows and the intent
diff --git a/examples/todos-server/package.json b/examples/todos-server/package.json
index 7c362608f..4ba49859e 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.1",
   "private": true,
   "author": "Ryan Carniato",
@@ -13,12 +13,13 @@
     "typecheck": "tsc --noEmit"
   },
   "dependencies": {
+    "@solidjs/router": "2.0.0-next.34",
     "@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.47",
     "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 000000000..9f0549cf0
--- /dev/null
+++ b/examples/todos-server/src/actions.ts
@@ -0,0 +1,44 @@
+// 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, and the optimistic writes release in the
+// same frame the new markup lands. A failed save answers `{ error }` rather
+// than throwing, so the failure is typed where the client reads it.
+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";
+
+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";
+  return db.toggleTodo(id, completedOf(form));
+});
+
+export const removeTodo = action(async (id: string) => {
+  "use server";
+  return db.removeTodo(id);
+});
+
+export const toggleAll = action(async (form: FormData) => {
+  "use server";
+  return db.toggleAll(completedOf(form));
+});
+
+export const clearCompleted = action(async () => {
+  "use server";
+  return db.clearCompleted();
+});
diff --git a/examples/todos-server/src/app.css b/examples/todos-server/src/app.css
index 249c846af..437e2934c 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");
 }
 
@@ -413,6 +398,25 @@ html .clear-completed:active {
   display: none;
 }
 
+.header form[aria-busy] .new-todo {
+  color: #949494;
+}
+
+.add-error,
+.list-error {
+  margin: 0;
+  padding: 10px 15px;
+  font-size: 15px;
+  color: #c91524;
+  border-top: 1px solid #e6e6e6;
+}
+
+.add-error button,
+.list-error button {
+  text-decoration: underline;
+  cursor: pointer;
+}
+
 .app-error {
   margin: 130px auto;
   padding: 24px;
diff --git a/examples/todos-server/src/app.tsx b/examples/todos-server/src/app.tsx
index 806af43bd..c8f932023 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 is not optimistic: a todo the server has not rendered has no markup
+// to bind to, so the header waits for the answer — the form is `aria-busy`
+// while it saves, the input clears when it 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 e80aca0c7..000000000
--- 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 66b11d66b..000000000
--- 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 000000000..7814db4b9
--- /dev/null
+++ b/examples/todos-server/src/router.tsx
@@ -0,0 +1,17 @@
+// 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 } from "@solidjs/router";
+import Todos from "~/routes/todos";
+import { getTodoList, parseFilter } from "~/todo-list";
+
+export const Router = createRouter({
+  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 000000000..d362ef64e
--- /dev/null
+++ b/examples/todos-server/src/routes/todos.tsx
@@ -0,0 +1,160 @@
+// The client's half of the list. 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. What it holds
+// is INTENT — what it has asked the server to do and not yet seen land —
+// and it reads the server's answers where the router keeps them.
+//
+//   Optimistic  `intent`, written in each action's `onSubmit`, inside the
+//               action's transition: it releases in the frame the
+//               response's markup lands, so a success shows no seam and a
+//               failure shows the server's value again.
+//   Answers     `useSubmissions(action)`: a failed save's `{ error }`, kept
+//               until the next attempt at the same thing settles. The same
+//               list is seeded from the flash cookie when a form posted
+//               without JavaScript, so the errors render on the server too.
+//   Truth       the fills' args: the server's rows as of the last response.
+//
+// The fills are the only place the three meet, and each runs once per
+// occurrence, as a component body does: values are getters over the args
+// and the stores, handlers are plain closures.
+import { useSubmissions, type RouteProps, type Submission } from "@solidjs/router";
+import { createOptimisticStore } from "solid-js";
+import { dynamic } from "@solidjs/web";
+import { clearCompleted, completedOf, removeTodo, toggleAll, toggleTodo } from "~/actions";
+import {
+  getTodoList,
+  parseFilter,
+  type ListArgs,
+  type ListBindings,
+  type RowArgs,
+  type RowBindings
+} from "~/todo-list";
+
+type Intent = { completed?: boolean; removed?: boolean };
+type Answer = Submission<any[], { error: string } | undefined>;
+
+const failedFor = (subs: Answer[], id: string) =>
+  subs.find(s => s.input[0] === id && s.result?.error);
+
+/** 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. */
+const supersede =
+  (subs: Answer[], same: (a: Answer, b: Answer) => boolean = () => true) =>
+  (settled: Answer) => {
+    for (const s of [...subs]) if (s !== settled && same(s, settled)) s.clear();
+  };
+const sameRow = (a: Answer, b: Answer) => a.input[0] === b.input[0];
+
+export default function Todos(props: RouteProps<"/">) {
+  const List = dynamic(() => getTodoList(parseFilter(props.location.query.filter)));
+
+  const [intent, setIntent] = createOptimisticStore<Record<string, Intent>>({});
+  const want = (s: Record<string, Intent>, id: string, change: Intent) => {
+    s[id] = { ...s[id], ...change };
+  };
+  const done = (id: string, completed: boolean) => intent[id]?.completed ?? completed;
+
+  const toggles = useSubmissions(toggleTodo) as Answer[];
+  const removals = useSubmissions(removeTodo) as Answer[];
+  const bulk = {
+    "Couldn't mark all": useSubmissions(toggleAll) as Answer[],
+    "Couldn't clear completed": useSubmissions(clearCompleted) as Answer[]
+  };
+
+  toggleTodo
+    .onSubmit((id, form) => setIntent(s => want(s, id, { completed: completedOf(form) })))
+    .onSettled(supersede(toggles, sameRow));
+  removeTodo
+    .onSubmit(id => setIntent(s => want(s, id, { removed: true })))
+    .onSettled(supersede(removals, sameRow));
+  // The list shows one bulk outcome: the latest, whichever action it was.
+  for (const subs of Object.values(bulk)) {
+    toggleAll.onSettled(supersede(subs));
+    clearCompleted.onSettled(supersede(subs));
+  }
+
+  const rowFor = (p: RowArgs): RowBindings => {
+    const pending = () => intent[p.id] !== undefined;
+    const failure = () =>
+      pending() ? undefined : (failedFor(removals, p.id) ?? failedFor(toggles, p.id));
+    const shown = () => done(p.id, p.completed);
+    return {
+      get rowClass() {
+        return { todo: true, completed: shown(), pending: pending(), errored: !!failure() };
+      },
+      get hidden() {
+        return (
+          !!intent[p.id]?.removed || (p.filter !== "all" && shown() !== (p.filter === "completed"))
+        );
+      },
+      get pressed() {
+        return shown() ? "true" : "false";
+      },
+      get toggleTo() {
+        return shown() ? "false" : "true";
+      },
+      get error() {
+        const f = failure();
+        return f && `${f.result!.error} — click to retry`;
+      },
+      onRetry: () => failure()?.retry()
+    };
+  };
+
+  const listFor = (p: ListArgs): ListBindings => {
+    // The optimism no single form can express: one click, every row. It
+    // lives here because the list's args are the rows it applies to.
+    toggleAll.onSubmit(form =>
+      setIntent(s => {
+        for (const t of p.todos) want(s, t.id, { completed: completedOf(form) });
+      })
+    );
+    clearCompleted.onSubmit(() =>
+      setIntent(s => {
+        for (const t of p.todos)
+          if (s[t.id]?.completed ?? t.completed) want(s, t.id, { removed: true });
+      })
+    );
+
+    const live = () => p.todos.filter(t => !intent[t.id]?.removed);
+    const remaining = () => live().filter(t => !done(t.id, t.completed)).length;
+    const allDone = () => live().length > 0 && remaining() === 0;
+    const failure = () => {
+      for (const [label, subs] of Object.entries(bulk)) {
+        const s = subs.find(s => s.result?.error);
+        if (s) return { label, s };
+      }
+    };
+    return {
+      get empty() {
+        return live().length === 0;
+      },
+      get allDone() {
+        return allDone() ? "true" : "false";
+      },
+      get toggleAllTo() {
+        return allDone() ? "false" : "true";
+      },
+      get noneDone() {
+        return remaining() === live().length;
+      },
+      get remaining() {
+        return remaining();
+      },
+      get itemsLeft() {
+        return remaining() === 1 ? "item left" : "items left";
+      },
+      get noError() {
+        return !failure();
+      },
+      get error() {
+        const f = failure();
+        return f && `${f.label}: ${f.s.result!.error}.`;
+      },
+      onRetry: () => failure()?.s.retry()
+    };
+  };
+
+  return <List row={rowFor} list={listFor} />;
+}
diff --git a/examples/todos-server/src/server-config.ts b/examples/todos-server/src/server-config.ts
new file mode 100644
index 000000000..82646750f
--- /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 000000000..703c54c5f
--- /dev/null
+++ b/examples/todos-server/src/server/db.ts
@@ -0,0 +1,63 @@
+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 optimistic UI, the per-row errors and the retry affordances get
+// exercised. A failure is an answer, not an exception — the mutations return
+// `{ error }`, which types the failure all the way to `useSubmissions` on 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 69c60ef69..000000000
--- 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 000000000..78b792b94
--- /dev/null
+++ b/examples/todos-server/src/todo-list.tsx
@@ -0,0 +1,145 @@
+// TodoMVC's list as a server component. Compare with the SPA twin's app.tsx:
+// the markup is the same, the rows are server data (titles, ids, the stored
+// `completed`), and every control is a form that posts a mutation. Nothing
+// here needs JavaScript to work.
+//
+// What JavaScript adds is optimism the browser cannot give on its own: a
+// click that shows its result before the server answers, and — the part a
+// form cannot express at all — clicks that change OTHER elements: toggle-all
+// checks every row, clear-completed hides them, and "N items left" counts
+// through both. The client owns those values and binds them onto these
+// elements through BINDING SLOTS: `props.row(...)` and `props.list(...)` are
+// called with the element's data and read as objects, their properties
+// bound at positions — an attribute, a class, a handler, a text child. The
+// server writes each position's first value in the document and never
+// branches on one (a stand-in is always truthy); a response morphing this
+// list keeps the positions the client owns.
+import { query } from "@solidjs/router";
+import type { BindingSlot } from "@solidjs/web/frames";
+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";
+
+/** What a row's fill is called with: the row as the server has it. */
+export type RowArgs = { id: string; completed: boolean; filter: Filter };
+
+/** What the client decides about a row. */
+export interface RowBindings {
+  rowClass: Record<string, boolean>;
+  hidden: boolean;
+  pressed: "true" | "false";
+  /** The `completed` value the row's toggle submits: the opposite of what it shows. */
+  toggleTo: "true" | "false";
+  error: string | undefined;
+  onRetry: () => void;
+}
+
+/** What the list's fill is called with: every todo, before the filter. */
+export type ListArgs = { todos: { id: string; completed: boolean }[] };
+
+/** What the client decides about the list as a whole. */
+export interface ListBindings {
+  empty: boolean;
+  allDone: "true" | "false";
+  toggleAllTo: "true" | "false";
+  noneDone: boolean;
+  remaining: number;
+  itemsLeft: string;
+  noError: boolean;
+  error: string | undefined;
+  onRetry: () => void;
+}
+
+export interface TodoListProps {
+  row: BindingSlot<RowArgs, RowBindings>;
+  list: BindingSlot<ListArgs, ListBindings>;
+}
+
+// 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. The rows carry it in their args: a toggle under "Active"
+// hides its row before the response takes it out.
+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"));
+
+  return (props: TodoListProps) => {
+    const list = props.list({ todos: todos.map(({ id, completed }) => ({ id, completed })) });
+    return (
+      <>
+        <section class="main" hidden={list.empty}>
+          <form action={toggleAll} method="post">
+            <button
+              class="toggle-all"
+              name="completed"
+              value={list.toggleAllTo}
+              aria-pressed={list.allDone}
+            >
+              Mark all as complete
+            </button>
+          </form>
+          <ul class="todo-list">
+            {shown.map(t => {
+              // `$key` on the call is the occurrence's identity, on the <li>
+              // its morph identity: a response keeps both for the same todo.
+              const row = props.row({ $key: t.id, id: t.id, completed: t.completed, filter });
+              return (
+                <li $key={t.id} class={row.rowClass} hidden={row.hidden}>
+                  <div class="view">
+                    <form action={toggleTodo.with(t.id)} method="post">
+                      <button
+                        class="toggle"
+                        name="completed"
+                        value={row.toggleTo}
+                        aria-pressed={row.pressed}
+                        aria-label={`Toggle ${t.title}`}
+                      />
+                    </form>
+                    <label>{t.title}</label>
+                    <button class="retry" title={row.error} onClick={row.onRetry} />
+                    <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={list.empty}>
+          <span class="todo-count">
+            <strong>{list.remaining}</strong> {list.itemsLeft}
+          </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 action={clearCompleted} method="post" hidden={list.noneDone}>
+            <button class="clear-completed">Clear completed</button>
+          </form>
+        </footer>
+        <p class="list-error" hidden={list.noError}>
+          {list.error} <button onClick={list.onRetry}>Retry</button>
+        </p>
+      </>
+    );
+  };
+}, "todos");
diff --git a/examples/todos-server/src/todo-row.tsx b/examples/todos-server/src/todo-row.tsx
deleted file mode 100644
index 1d797b4d9..000000000
--- 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 eb73a8f35..000000000
--- 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 11f02fe2a..c3957e75c 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 2be0a74d9..da164e1b1 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 81fa3f864..e62d088cc 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 0cd2f3729..92a54f065 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.47",
     "@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 ad153c3f6..b52f44b02 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 ed94062e4..133a3a62d 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 000000000..64982f033
--- /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:slot:frame-occlusion-doc/list:item#a\"]=($R[12]={id:\"a\",expandedChildren:$R[13]={$frame:\"frame-occlusion-doc/list.item#a.expandedChildren\"},children:$R[14]={$frame:\"frame-occlusion-doc/list.item#a.children\"}});_$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[\"sc:slot:frame-occlusion-doc/list:item#b\"]=($R[15]={id:\"b\",expandedChildren:$R[16]={$frame:\"frame-occlusion-doc/list.item#b.expandedChildren\"},children:$R[17]={$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 000000000..fd79e30e0
--- /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 000000000..5cd59ed9b
--- /dev/null
+++ b/packages/web/test/hydration/frame-occlusion-document.spec.tsx
@@ -0,0 +1,112 @@
+/**
+ * @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 { 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);
+    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 a5760faa3..f27a7696b 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 });
@@ -793,6 +810,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"><!--_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"><!--_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 000000000..82bf1997c
--- /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 f2bd3cd75..2e140e793 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.47
+        version: 3.0.0-next.47(@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.47
+        version: 3.0.0-next.47(@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.34
+        version: 2.0.0-next.34(@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.47
+        version: 3.0.0-next.47(@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.34
+        version: 2.0.0-next.34(@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.47
+        version: 3.0.0-next.47(@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.47
+        version: 3.0.0-next.47(@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.34
+        version: 2.0.0-next.34(@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.47
+        version: 3.0.0-next.47(@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.47
+        version: 3.0.0-next.47(@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.34
+        version: 2.0.0-next.34(@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.47
+        version: 3.0.0-next.47(@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.47
+        version: 3.0.0-next.47(@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.47
+        version: 3.0.0-next.47(@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.34
+        version: 2.0.0-next.34(@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.47
+        version: 3.0.0-next.47(@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)
@@ -2361,8 +2364,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.34':
+    resolution: {integrity: sha512-XRmCQUOPpz6EYp6MyDqtC4KdToXayk/hYv0/jFdSjnmUDjYAi9l6HpTMxADnz1Sv1kX8Jn6DVbsDJTrxC+fU5Q==}
     peerDependencies:
       '@solidjs/web': workspace:*
       filesystem-routing: '>=0.4.0'
@@ -2386,6 +2389,21 @@ packages:
       '@testing-library/jest-dom':
         optional: true
 
+  '@solidjs/vite-plugin@3.0.0-next.47':
+    resolution: {integrity: sha512-vcsZbXkTCt2RalJmUPp25iz+7KYGriP9w54BLf5uIJ0xDf5woTN92WdlDCh0udZV/Zb2xw2qrWQA977QeuScJw==}
+    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==}
 
@@ -6009,12 +6027,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.34(@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
@@ -6023,15 +6041,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.47(@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
@@ -7605,10 +7622,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)