create-rivet 0.1.0-alpha.0 → 0.1.0-alpha.1

package/README.md

@@ -1,6 +1,6 @@
 # create-rivet
 
-Create a [Rivet](https://github.com/rivetjs/rivet) app.
+Create a [Rivet](https://github.com/N1XUS/rivetjs) app.
 
 ```sh
 npm create rivet@latest my-app
@@ -43,4 +43,4 @@ With npm, options go after `--`.
 
 ## Nx monorepos
 
-The same templates as Nx projects, with cached `build` / `test` / `check` targets: [`@rivetjs/nx`](https://github.com/rivetjs/rivet/tree/main/libs/nx) (`npx create-nx-workspace@latest my-org --preset=@rivetjs/nx`, or `npx nx add @rivetjs/nx` in an existing workspace).
+The same templates as Nx projects, with cached `build` / `test` / `check` targets: [`@rivetjs/nx`](https://github.com/N1XUS/rivetjs/tree/main/libs/nx) (`npx create-nx-workspace@latest my-org --preset=@rivetjs/nx`, or `npx nx add @rivetjs/nx` in an existing workspace).

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "create-rivet",
-  "version": "0.1.0-alpha.0",
+  "version": "0.1.0-alpha.1",
   "license": "MIT",
   "type": "module",
   "description": "Create a Rivet app: npm create rivet@latest",

package/templates/starter-minimal/.agents/skills/rivet-add-route/SKILL.md

@@ -1,23 +1,23 @@
 ---
 name: rivet-add-route
-description: "Add a page or endpoint to a Rivet app with file routes, server data (serverLoad), actions, head and layouts. Use when the user asks for a new page, URL, route, endpoint or loader in a Rivet project."
+description: "Add a page or endpoint to a Rivet app with file routes, server data (load(…)), actions, head and layouts. Use when the user asks for a new page, URL, route, endpoint or loader in a Rivet project."
 ---
 
 <!-- Generated by libs/mcp/ai/sync.ts from libs/mcp/ai/skills/add-route.md in the Rivet repository: edit the source there and run the script. In an app created from a starter this file is yours to edit. -->
 
 # Add a route to a Rivet app
 
-1. Pick the file under `src/routes/` (URL = path): `about.tsx` → `/about`, `blog/[slug].tsx` → `/blog/:slug`, `docs/[[lang]]/x.tsx` (optional param), `files/[...path].tsx` (rest), `(group)/p.tsx` → `/p` (shares the group's `_layout.tsx`), `api/time.ts` → endpoint (`export const onGet = () => Response.json(…)`). `_layout.tsx` wraps its folder; `_404.tsx` / `_error.tsx` handle misses / errors. Look up details with `get_doc("docs:/guides/routing/file-routes/")`.
-2. Write the page. Server code lives in `server…` exports (stripped from the browser build):
+1. Pick the file under `src/routes/` (URL = path): `about.tsx` → `/about`, `blog/[slug].tsx` → `/blog/:slug`, `docs/[[lang]]/x.tsx` (optional param), `files/[...path].tsx` (rest), `(group)/p.tsx` → `/p` (shares the group's `_layout.tsx`), `api/time.ts` → endpoint (`export const GET = onGet(() => Response.json(…))`, `onGet` from `@rivetjs/router`). `_layout.tsx` wraps its folder; `_404.tsx` / `_error.tsx` handle misses / errors. Look up details with `get_doc("docs:/guides/routing/file-routes/")`.
+2. Write the page. Server code lives in exports wrapped in a `@rivetjs/router` call — `load(…)`, `actions(…)`, `guard(…)`, `onGet(…)` … (stripped from the browser build):
 
 ```tsx
-import { notFound, type PageProps, type RequestEvent } from "@rivetjs/router";
+import { notFound, type PageProps, type RequestEvent, load } from "@rivetjs/router";
 
-export const serverLoad = async ({ params }: RequestEvent<"blog/[slug]">) => {
+export const loader = load(async ({ params }: RequestEvent<"blog/[slug]">) => {
   const post = await findPost(params.slug); // server-only: database, files, secrets
   if (!post) throw notFound();
   return { post };
-};
+});
 
 export const head = { title: "Post" };
 
@@ -27,9 +27,9 @@ export default function Post({ data }: PageProps<"blog/[slug]">) {
 ```
 
 - Page props `data`, `params`, `url` are plain values; in `_layout.tsx` (`LayoutProps`) they are accessors: `data()`, `params()`, `url()`, plus `children`.
-- Mutations: `export const serverActions = { name: async ({ request }) => … }` + `<form method="post" action="?/name">`; with validation use `@rivetjs/forms` (`action(def, fn)` from `@rivetjs/forms/server`).
-- Access checks: `serverGuard` (throw / return `redirect()`, `deny()`, `notFound()`).
-- Static mode (`rivetRouter({ mode: "static" })`): `serverLoad` runs at build time; dynamic `[param]` pages list their params in `serverEntries`.
+- Mutations: `export const forms = actions({ name: async ({ request }) => … })` + `<form method="post" action="?/name">`; with validation use `@rivetjs/forms` (`action(def, fn)` from `@rivetjs/forms/server`).
+- Access checks: `guard(…)` (throw / return `redirect()`, `deny()`, `notFound()`).
+- Static mode (`rivetRouter({ mode: "static" })`): `load(…)` runs at build time; dynamic `[param]` pages list their params in `entries(…)`.
 - Server-only helpers go in `*.server.ts` files (browser code cannot import them: RV3008).
 
 3. Link to it: plain `<a href="/blog/hello">` (client navigation), or typed `<Link to="/blog/hello">` from `@rivetjs/router/link`; programmatic `navigate()` from `@rivetjs/router/client`.

package/templates/starter-minimal/.agents/skills/rivet-form-in-drawer/SKILL.md

@@ -24,16 +24,17 @@ export const customerForm = defineForm({ name: "customer", schema: z.object({ na
 import type { LivePageProps } from "@rivetjs/router";
 import { actionResult } from "@rivetjs/router/client";
 import { action, invalid } from "@rivetjs/forms/server";
+import { load, actions } from "@rivetjs/router";
 
 export const live = true; // data is an accessor, refreshed in place after a submit: signals (open drawer, input, focus) survive
-export const serverLoad = ({ url }: { url: URL }) => ({ customers: [...customers], creating: url.searchParams.has("new") });
-export const serverActions = {
+export const loader = load(({ url }: { url: URL }) => ({ customers: [...customers], creating: url.searchParams.has("new") }));
+export const forms = actions({
   customer: action(customerForm, (value) => {
     if (customers.some((c) => c.email === value.email)) return invalid({ email: "Already a customer" });
     customers.push({ id: customers.length + 1, ...value });
   }),
-};
-export default function Customers({ data }: LivePageProps<typeof serverLoad>) {
+});
+export default function Customers({ data }: LivePageProps<typeof loader>) {
   /* … */
 }
 ```
@@ -58,5 +59,5 @@ export default function Customers({ data }: LivePageProps<typeof serverLoad>) {
 
 `onSubmit` resolves true once the server accepted the form and the page data is fresh: close the drawer then. Errors stay in the open drawer. Imports: `createForm, defaultValue, describedBy, fieldId, formId, isInvalid, onSubmit, submitting` from `@rivetjs/forms`, `FieldError` from `@rivetjs/forms/components`.
 
-5. A layout `serverLoad` re-runs too (counts in headers update).
+5. A layout `load(…)` re-runs too (counts in headers update).
 6. Check: `check_code` on the page, `npm run check`, then try it with JavaScript disabled (plain POST, 400 re-render with the drawer open).

package/templates/starter-minimal/.agents/skills/rivet-port-react-component/SKILL.md

@@ -23,7 +23,7 @@ Map each construct (full table: `get_doc("docs:/start/coming-from-other-framewor
 | `style="…"` strings                                     | `style={{ color: c() }}` or `style:color={c()}`                                                                                     |
 | `function Badge({ count })`                             | `function Badge(props: { count: number })` + `props.count` (props are live; destructuring reads once)                               |
 | `React.lazy`, `<Suspense>`                              | `lazyComponent`, `Async`, `Suspense` (`@rivetjs/runtime/dom`)                                                                       |
-| Next.js `getServerSideProps`, Remix `loader` / `action` | `export const serverLoad` / `serverActions` in the route file                                                                       |
+| Next.js `getServerSideProps`, Remix `loader` / `action` | `export const loader = load(…)` / `actions(…)` in the route file                                                                    |
 | `useRouter().push`, `useSearchParams`                   | `navigate()`, `useSearchParams()` from `@rivetjs/router/client`                                                                     |
 | icon components / inline SVG                            | `<Icon icon={Check} />` from `@rivetjs/kit/icon` + `import { Check } from "lucide"`                                                 |
 

package/templates/starter-minimal/.claude/skills/rivet-add-route/SKILL.md

@@ -1,23 +1,23 @@
 ---
 name: rivet-add-route
-description: "Add a page or endpoint to a Rivet app with file routes, server data (serverLoad), actions, head and layouts. Use when the user asks for a new page, URL, route, endpoint or loader in a Rivet project."
+description: "Add a page or endpoint to a Rivet app with file routes, server data (load(…)), actions, head and layouts. Use when the user asks for a new page, URL, route, endpoint or loader in a Rivet project."
 ---
 
 <!-- Generated by libs/mcp/ai/sync.ts from libs/mcp/ai/skills/add-route.md in the Rivet repository: edit the source there and run the script. In an app created from a starter this file is yours to edit. -->
 
 # Add a route to a Rivet app
 
-1. Pick the file under `src/routes/` (URL = path): `about.tsx` → `/about`, `blog/[slug].tsx` → `/blog/:slug`, `docs/[[lang]]/x.tsx` (optional param), `files/[...path].tsx` (rest), `(group)/p.tsx` → `/p` (shares the group's `_layout.tsx`), `api/time.ts` → endpoint (`export const onGet = () => Response.json(…)`). `_layout.tsx` wraps its folder; `_404.tsx` / `_error.tsx` handle misses / errors. Look up details with `get_doc("docs:/guides/routing/file-routes/")`.
-2. Write the page. Server code lives in `server…` exports (stripped from the browser build):
+1. Pick the file under `src/routes/` (URL = path): `about.tsx` → `/about`, `blog/[slug].tsx` → `/blog/:slug`, `docs/[[lang]]/x.tsx` (optional param), `files/[...path].tsx` (rest), `(group)/p.tsx` → `/p` (shares the group's `_layout.tsx`), `api/time.ts` → endpoint (`export const GET = onGet(() => Response.json(…))`, `onGet` from `@rivetjs/router`). `_layout.tsx` wraps its folder; `_404.tsx` / `_error.tsx` handle misses / errors. Look up details with `get_doc("docs:/guides/routing/file-routes/")`.
+2. Write the page. Server code lives in exports wrapped in a `@rivetjs/router` call — `load(…)`, `actions(…)`, `guard(…)`, `onGet(…)` … (stripped from the browser build):
 
 ```tsx
-import { notFound, type PageProps, type RequestEvent } from "@rivetjs/router";
+import { notFound, type PageProps, type RequestEvent, load } from "@rivetjs/router";
 
-export const serverLoad = async ({ params }: RequestEvent<"blog/[slug]">) => {
+export const loader = load(async ({ params }: RequestEvent<"blog/[slug]">) => {
   const post = await findPost(params.slug); // server-only: database, files, secrets
   if (!post) throw notFound();
   return { post };
-};
+});
 
 export const head = { title: "Post" };
 
@@ -27,9 +27,9 @@ export default function Post({ data }: PageProps<"blog/[slug]">) {
 ```
 
 - Page props `data`, `params`, `url` are plain values; in `_layout.tsx` (`LayoutProps`) they are accessors: `data()`, `params()`, `url()`, plus `children`.
-- Mutations: `export const serverActions = { name: async ({ request }) => … }` + `<form method="post" action="?/name">`; with validation use `@rivetjs/forms` (`action(def, fn)` from `@rivetjs/forms/server`).
-- Access checks: `serverGuard` (throw / return `redirect()`, `deny()`, `notFound()`).
-- Static mode (`rivetRouter({ mode: "static" })`): `serverLoad` runs at build time; dynamic `[param]` pages list their params in `serverEntries`.
+- Mutations: `export const forms = actions({ name: async ({ request }) => … })` + `<form method="post" action="?/name">`; with validation use `@rivetjs/forms` (`action(def, fn)` from `@rivetjs/forms/server`).
+- Access checks: `guard(…)` (throw / return `redirect()`, `deny()`, `notFound()`).
+- Static mode (`rivetRouter({ mode: "static" })`): `load(…)` runs at build time; dynamic `[param]` pages list their params in `entries(…)`.
 - Server-only helpers go in `*.server.ts` files (browser code cannot import them: RV3008).
 
 3. Link to it: plain `<a href="/blog/hello">` (client navigation), or typed `<Link to="/blog/hello">` from `@rivetjs/router/link`; programmatic `navigate()` from `@rivetjs/router/client`.

package/templates/starter-minimal/.claude/skills/rivet-form-in-drawer/SKILL.md

@@ -24,16 +24,17 @@ export const customerForm = defineForm({ name: "customer", schema: z.object({ na
 import type { LivePageProps } from "@rivetjs/router";
 import { actionResult } from "@rivetjs/router/client";
 import { action, invalid } from "@rivetjs/forms/server";
+import { load, actions } from "@rivetjs/router";
 
 export const live = true; // data is an accessor, refreshed in place after a submit: signals (open drawer, input, focus) survive
-export const serverLoad = ({ url }: { url: URL }) => ({ customers: [...customers], creating: url.searchParams.has("new") });
-export const serverActions = {
+export const loader = load(({ url }: { url: URL }) => ({ customers: [...customers], creating: url.searchParams.has("new") }));
+export const forms = actions({
   customer: action(customerForm, (value) => {
     if (customers.some((c) => c.email === value.email)) return invalid({ email: "Already a customer" });
     customers.push({ id: customers.length + 1, ...value });
   }),
-};
-export default function Customers({ data }: LivePageProps<typeof serverLoad>) {
+});
+export default function Customers({ data }: LivePageProps<typeof loader>) {
   /* … */
 }
 ```
@@ -58,5 +59,5 @@ export default function Customers({ data }: LivePageProps<typeof serverLoad>) {
 
 `onSubmit` resolves true once the server accepted the form and the page data is fresh: close the drawer then. Errors stay in the open drawer. Imports: `createForm, defaultValue, describedBy, fieldId, formId, isInvalid, onSubmit, submitting` from `@rivetjs/forms`, `FieldError` from `@rivetjs/forms/components`.
 
-5. A layout `serverLoad` re-runs too (counts in headers update).
+5. A layout `load(…)` re-runs too (counts in headers update).
 6. Check: `check_code` on the page, `npm run check`, then try it with JavaScript disabled (plain POST, 400 re-render with the drawer open).

package/templates/starter-minimal/.claude/skills/rivet-port-react-component/SKILL.md

@@ -23,7 +23,7 @@ Map each construct (full table: `get_doc("docs:/start/coming-from-other-framewor
 | `style="…"` strings                                     | `style={{ color: c() }}` or `style:color={c()}`                                                                                     |
 | `function Badge({ count })`                             | `function Badge(props: { count: number })` + `props.count` (props are live; destructuring reads once)                               |
 | `React.lazy`, `<Suspense>`                              | `lazyComponent`, `Async`, `Suspense` (`@rivetjs/runtime/dom`)                                                                       |
-| Next.js `getServerSideProps`, Remix `loader` / `action` | `export const serverLoad` / `serverActions` in the route file                                                                       |
+| Next.js `getServerSideProps`, Remix `loader` / `action` | `export const loader = load(…)` / `actions(…)` in the route file                                                                    |
 | `useRouter().push`, `useSearchParams`                   | `navigate()`, `useSearchParams()` from `@rivetjs/router/client`                                                                     |
 | icon components / inline SVG                            | `<Icon icon={Check} />` from `@rivetjs/kit/icon` + `import { Check } from "lucide"`                                                 |
 

package/templates/starter-minimal/.cursor/rules/rivet-add-route.mdc

@@ -1,5 +1,5 @@
 ---
-description: "Add a page or endpoint to a Rivet app with file routes, server data (serverLoad), actions, head and layouts. Use when the user asks for a new page, URL, route, endpoint or loader in a Rivet project."
+description: "Add a page or endpoint to a Rivet app with file routes, server data (load(…)), actions, head and layouts. Use when the user asks for a new page, URL, route, endpoint or loader in a Rivet project."
 globs:
 alwaysApply: false
 ---
@@ -8,17 +8,17 @@ alwaysApply: false
 
 # Add a route to a Rivet app
 
-1. Pick the file under `src/routes/` (URL = path): `about.tsx` → `/about`, `blog/[slug].tsx` → `/blog/:slug`, `docs/[[lang]]/x.tsx` (optional param), `files/[...path].tsx` (rest), `(group)/p.tsx` → `/p` (shares the group's `_layout.tsx`), `api/time.ts` → endpoint (`export const onGet = () => Response.json(…)`). `_layout.tsx` wraps its folder; `_404.tsx` / `_error.tsx` handle misses / errors. Look up details with `get_doc("docs:/guides/routing/file-routes/")`.
-2. Write the page. Server code lives in `server…` exports (stripped from the browser build):
+1. Pick the file under `src/routes/` (URL = path): `about.tsx` → `/about`, `blog/[slug].tsx` → `/blog/:slug`, `docs/[[lang]]/x.tsx` (optional param), `files/[...path].tsx` (rest), `(group)/p.tsx` → `/p` (shares the group's `_layout.tsx`), `api/time.ts` → endpoint (`export const GET = onGet(() => Response.json(…))`, `onGet` from `@rivetjs/router`). `_layout.tsx` wraps its folder; `_404.tsx` / `_error.tsx` handle misses / errors. Look up details with `get_doc("docs:/guides/routing/file-routes/")`.
+2. Write the page. Server code lives in exports wrapped in a `@rivetjs/router` call — `load(…)`, `actions(…)`, `guard(…)`, `onGet(…)` … (stripped from the browser build):
 
 ```tsx
-import { notFound, type PageProps, type RequestEvent } from "@rivetjs/router";
+import { notFound, type PageProps, type RequestEvent, load } from "@rivetjs/router";
 
-export const serverLoad = async ({ params }: RequestEvent<"blog/[slug]">) => {
+export const loader = load(async ({ params }: RequestEvent<"blog/[slug]">) => {
   const post = await findPost(params.slug); // server-only: database, files, secrets
   if (!post) throw notFound();
   return { post };
-};
+});
 
 export const head = { title: "Post" };
 
@@ -28,9 +28,9 @@ export default function Post({ data }: PageProps<"blog/[slug]">) {
 ```
 
 - Page props `data`, `params`, `url` are plain values; in `_layout.tsx` (`LayoutProps`) they are accessors: `data()`, `params()`, `url()`, plus `children`.
-- Mutations: `export const serverActions = { name: async ({ request }) => … }` + `<form method="post" action="?/name">`; with validation use `@rivetjs/forms` (`action(def, fn)` from `@rivetjs/forms/server`).
-- Access checks: `serverGuard` (throw / return `redirect()`, `deny()`, `notFound()`).
-- Static mode (`rivetRouter({ mode: "static" })`): `serverLoad` runs at build time; dynamic `[param]` pages list their params in `serverEntries`.
+- Mutations: `export const forms = actions({ name: async ({ request }) => … })` + `<form method="post" action="?/name">`; with validation use `@rivetjs/forms` (`action(def, fn)` from `@rivetjs/forms/server`).
+- Access checks: `guard(…)` (throw / return `redirect()`, `deny()`, `notFound()`).
+- Static mode (`rivetRouter({ mode: "static" })`): `load(…)` runs at build time; dynamic `[param]` pages list their params in `entries(…)`.
 - Server-only helpers go in `*.server.ts` files (browser code cannot import them: RV3008).
 
 3. Link to it: plain `<a href="/blog/hello">` (client navigation), or typed `<Link to="/blog/hello">` from `@rivetjs/router/link`; programmatic `navigate()` from `@rivetjs/router/client`.

package/templates/starter-minimal/.cursor/rules/rivet-form-in-drawer.mdc

@@ -25,16 +25,17 @@ export const customerForm = defineForm({ name: "customer", schema: z.object({ na
 import type { LivePageProps } from "@rivetjs/router";
 import { actionResult } from "@rivetjs/router/client";
 import { action, invalid } from "@rivetjs/forms/server";
+import { load, actions } from "@rivetjs/router";
 
 export const live = true; // data is an accessor, refreshed in place after a submit: signals (open drawer, input, focus) survive
-export const serverLoad = ({ url }: { url: URL }) => ({ customers: [...customers], creating: url.searchParams.has("new") });
-export const serverActions = {
+export const loader = load(({ url }: { url: URL }) => ({ customers: [...customers], creating: url.searchParams.has("new") }));
+export const forms = actions({
   customer: action(customerForm, (value) => {
     if (customers.some((c) => c.email === value.email)) return invalid({ email: "Already a customer" });
     customers.push({ id: customers.length + 1, ...value });
   }),
-};
-export default function Customers({ data }: LivePageProps<typeof serverLoad>) {
+});
+export default function Customers({ data }: LivePageProps<typeof loader>) {
   /* … */
 }
 ```
@@ -59,5 +60,5 @@ export default function Customers({ data }: LivePageProps<typeof serverLoad>) {
 
 `onSubmit` resolves true once the server accepted the form and the page data is fresh: close the drawer then. Errors stay in the open drawer. Imports: `createForm, defaultValue, describedBy, fieldId, formId, isInvalid, onSubmit, submitting` from `@rivetjs/forms`, `FieldError` from `@rivetjs/forms/components`.
 
-5. A layout `serverLoad` re-runs too (counts in headers update).
+5. A layout `load(…)` re-runs too (counts in headers update).
 6. Check: `check_code` on the page, `npm run check`, then try it with JavaScript disabled (plain POST, 400 re-render with the drawer open).

package/templates/starter-minimal/.cursor/rules/rivet-port-react-component.mdc

@@ -24,7 +24,7 @@ Map each construct (full table: `get_doc("docs:/start/coming-from-other-framewor
 | `style="…"` strings                                     | `style={{ color: c() }}` or `style:color={c()}`                                                                                     |
 | `function Badge({ count })`                             | `function Badge(props: { count: number })` + `props.count` (props are live; destructuring reads once)                               |
 | `React.lazy`, `<Suspense>`                              | `lazyComponent`, `Async`, `Suspense` (`@rivetjs/runtime/dom`)                                                                       |
-| Next.js `getServerSideProps`, Remix `loader` / `action` | `export const serverLoad` / `serverActions` in the route file                                                                       |
+| Next.js `getServerSideProps`, Remix `loader` / `action` | `export const loader = load(…)` / `actions(…)` in the route file                                                                       |
 | `useRouter().push`, `useSearchParams`                   | `navigate()`, `useSearchParams()` from `@rivetjs/router/client`                                                                     |
 | icon components / inline SVG                            | `<Icon icon={Check} />` from `@rivetjs/kit/icon` + `import { Check } from "lucide"`                                                 |
 

package/templates/starter-minimal/.cursor/rules/rivet.mdc

@@ -19,7 +19,7 @@ This project uses Rivet, a compiled, resumable JSX framework. It is NOT React an
 - Captures must serialize: handlers are inline arrows or local consts. Functions stored by name in objects / arrays and imported functions (npm exports too) resume by reference; functions in objects built at module level or returned by library code / hooks do not. Class instances: data classes of the module, classes with `[serialize]` / `static [revive]`, package classes registered with `registerClass`. Library objects (`new Intl.NumberFormat`, SDK clients, charts) → create them in the handler or `reconstruct(() => new Intl.NumberFormat())` (`import { reconstruct } from "@rivetjs/runtime/dom"`). No `.bind` inside an object literal (inline in a prop or a local `const` of it is fine).
 - Render props and item renderers are functions (`{(item) => …}`, `({ close }) => …`).
 - Import `@rivetjs/runtime/dom` only from `.tsx` files, never from `.ts`.
-- Routes: `src/routes/**.tsx`; `_layout.tsx`, `[param]`, `_404.tsx`; page exports `serverLoad`, `serverActions`, `head`, `live`; page `data` is a value, layout `data()` / `params()` / `url()` are accessors; `export const live = true` makes page `data` an accessor updated in place (forms in drawers).
+- Routes: `src/routes/**.tsx`; `_layout.tsx`, `[param]`, `_404.tsx`; page exports `load(…)`, `actions(…)`, `head`, `live`; page `data` is a value, layout `data()` / `params()` / `url()` are accessors; `export const live = true` makes page `data` an accessor updated in place (forms in drawers).
 - Forms: `@rivetjs/forms` (`defineForm`, `createForm`, `onSubmit`, `FieldError`; server `action` / `invalid` from `@rivetjs/forms/server`).
 - i18n: `t("key", { param })` from `@rivetjs/i18n`, compile-time; key a string literal.
 - Icons: `<Icon icon={Check} />` from `@rivetjs/kit/icon` with lucide (`import { Check } from "lucide"`). Never inline SVG paths, never Unicode glyphs as icons.

package/templates/starter-minimal/.github/copilot-instructions.md

@@ -13,7 +13,7 @@ This project uses Rivet, a compiled, resumable JSX framework. It is NOT React an
 - Captures must serialize: handlers are inline arrows or local consts. Functions stored by name in objects / arrays and imported functions (npm exports too) resume by reference; functions in objects built at module level or returned by library code / hooks do not. Class instances: data classes of the module, classes with `[serialize]` / `static [revive]`, package classes registered with `registerClass`. Library objects (`new Intl.NumberFormat`, SDK clients, charts) → create them in the handler or `reconstruct(() => new Intl.NumberFormat())` (`import { reconstruct } from "@rivetjs/runtime/dom"`). No `.bind` inside an object literal (inline in a prop or a local `const` of it is fine).
 - Render props and item renderers are functions (`{(item) => …}`, `({ close }) => …`).
 - Import `@rivetjs/runtime/dom` only from `.tsx` files, never from `.ts`.
-- Routes: `src/routes/**.tsx`; `_layout.tsx`, `[param]`, `_404.tsx`; page exports `serverLoad`, `serverActions`, `head`, `live`; page `data` is a value, layout `data()` / `params()` / `url()` are accessors; `export const live = true` makes page `data` an accessor updated in place (forms in drawers).
+- Routes: `src/routes/**.tsx`; `_layout.tsx`, `[param]`, `_404.tsx`; page exports `load(…)`, `actions(…)`, `head`, `live`; page `data` is a value, layout `data()` / `params()` / `url()` are accessors; `export const live = true` makes page `data` an accessor updated in place (forms in drawers).
 - Forms: `@rivetjs/forms` (`defineForm`, `createForm`, `onSubmit`, `FieldError`; server `action` / `invalid` from `@rivetjs/forms/server`).
 - i18n: `t("key", { param })` from `@rivetjs/i18n`, compile-time; key a string literal.
 - Icons: `<Icon icon={Check} />` from `@rivetjs/kit/icon` with lucide (`import { Check } from "lucide"`). Never inline SVG paths, never Unicode glyphs as icons.

package/templates/starter-minimal/AGENTS.md

@@ -106,7 +106,7 @@ import { For, Show, Switch, Match } from "@rivetjs/runtime/dom";
 
 - `For`: `by` key is required; `item` and `index` are **accessors** (`todo()`, `index()`). Use for lists that change. `.map()` is fine for fixed data (loader data, constants).
 - Conditionals: `cond() && <p />`, ternary, or `Show`. Always read the signal (`cond()`, not `cond`).
-- Other helpers: `Async`, `Suspense`, `ErrorBoundary`, `Dynamic`, `Portal`, `Provider`, `lazyComponent`, `clientOnly`.
+- Other helpers: `Async`, `resource` (async data as a signal: `const user = resource(() => id(), (id, info) => load(id, info.signal))`; keep it in one `const` in the component, not destructured; fetchers may be passed by name; read inside `Suspense` so the server waits), `Suspense`, `ErrorBoundary`, `Dynamic`, `Portal`, `Provider`, `lazyComponent`, `clientOnly`.
 - A function child `{() => …}` re-runs when the signals its body reads change.
 
 ### Refs
@@ -140,8 +140,8 @@ const theme = useContext(ThemeContext); // import { useContext } from "@rivetjs/
 
 Everything a handler, effect, computed or binding uses from its component (its **captures**) is written into the HTML. It must be serializable.
 
-- OK: primitives, plain objects/arrays, `Date`, `URL`, `URLSearchParams`, `Map`, `Set`, `RegExp`, typed arrays, `ArrayBuffer`, `DataView`, `Error`, signals, `computed`, and functions Rivet compiled: inline arrows, local `const` functions, inline callback props, functions in object literals, returned functions, inline functions written into a value a handler uses (`api.inc = () => …`, `signal(() => …)`, `[() => …]`), local functions stored by name into such a value (`api.open = open`, `list.push(open)`), module-level or imported functions used by name inside a component (called by a handler, passed as a prop, kept in a local const, put in an object / array / call argument).
-- Not OK: class instances (`new Intl.NumberFormat()`, `new Api()` → RV2003; a data class declared in the component module resumes — no `#private` field, no base other than a data class of that module, no decorator, no `window` / `document` read while constructing, else RV2102; `reconstruct(() => new Api(…))` from `@rivetjs/runtime/dom` builds it in the browser on first read (no value in the page); a resource holder resumes with `[serialize]()` + `static [revive](data)`, a package class with `registerClass(Cls, { id, serialize, revive })` from `@rivetjs/runtime/resume-format`), `Promise`, `WeakMap`, `Symbol`, `Error`, `.bind(...)` written inside an object literal (RV2014; inline in a prop / handler or a local `const inc = add.bind(null, 2)` of a compiled function used by name is OK; `.bind(ctx)` of a `this` function stays RV2007), methods / getters, functions using `this`, functions created at runtime by libraries (`memoize(fn)`), module-level / imported functions put into objects only outside a component (module level, hooks, helpers).
+- OK: primitives, plain objects/arrays, `Date`, `URL`, `URLSearchParams`, `Map`, `Set`, `RegExp`, typed arrays, `ArrayBuffer`, `DataView`, `Error`, `bigint`, signals, `computed`, and functions Rivet compiled: inline arrows, local `const` functions, inline callback props, functions in object literals, returned functions, inline functions written into a value a handler uses (`api.inc = () => …`, `signal(() => …)`, `[() => …]`), local functions stored by name into such a value (`api.open = open`, `list.push(open)`), module-level or imported functions used by name inside a component (called by a handler, passed as a prop, kept in a local const, put in an object / array / call argument).
+- Not OK: class instances (`new Intl.NumberFormat()`, `new Api()` → RV2003; a data class declared in the component module resumes — no `#private` field, no base other than a data class of that module, no decorator, no `window` / `document` read while constructing, else RV2102; `reconstruct(() => new Api(…))` from `@rivetjs/runtime/dom` builds it in the browser on first read (no value in the page); a resource holder resumes with `[serialize]()` + `static [revive](data)`, a package class with `registerClass(Cls, { id, serialize, revive })` from `@rivetjs/runtime/resume-format`), `Promise`, `WeakMap`, `Symbol`, `.bind(...)` written inside an object literal (RV2014; inline in a prop / handler or a local `const inc = add.bind(null, 2)` of a compiled function used by name is OK; `.bind(ctx)` of a `this` function stays RV2007), methods / getters, functions using `this`, functions created at runtime by libraries (`memoize(fn)`), module-level / imported functions put into objects only outside a component (module level, hooks, helpers).
 
 ```tsx
 // Avoid: captures a class instance
@@ -175,32 +175,32 @@ src/
     docs/[[lang]]/x.tsx  optional param
     files/[...path].tsx  rest param
     (marketing)/p.tsx    /p (group: no segment, shares a layout)
-    api/time.ts          endpoint (exports onGet/onPost…, returns Response)
+    api/time.ts          endpoint (exports onGet(…)/onPost(…)…, returns Response)
     _404.tsx  _error.tsx
 ```
 
-- Files/folders starting with `_` (except `_layout`, `_404`, `_error`), `.`, `*.test.*`, `*.d.ts` are ignored. `*.server.ts` = server-only module (cannot be imported by browser code, RV3008).
+- Files/folders starting with `_` (except `_layout`, `_404`, `_error`), `.`, `*.test.*`, `*.d.ts` are ignored. `*.server.ts` = server-only module: browser code cannot use it (RV3008 in a route module's browser part); a page that imports one itself becomes a document route (full page load), a component, layout or error page that reaches one fails the build (RV3011).
 - `.rivet/` is generated (route types `routes.d.ts`, editor manifest): never edit; `rivet sync` regenerates it.
 
 ### Page module exports
 
 ```tsx
-import { redirect, notFound, type PageProps, type RequestEvent } from "@rivetjs/router";
+import { redirect, notFound, type PageProps, type RequestEvent, load, actions } from "@rivetjs/router";
 
-export const serverLoad = async ({ params }: RequestEvent<"blog/[slug]">) => {
+export const loader = load(async ({ params }: RequestEvent<"blog/[slug]">) => {
   const post = await findPost(params.slug);
   if (!post) throw notFound();
   return { post };
-};
+});
 
-export const serverActions = {
+export const forms = actions({
   // <form method="post" action="?/comment">
   comment: async ({ request }: RequestEvent<"blog/[slug]">) => {
     const text = String((await request.formData()).get("text") ?? "");
     await saveComment(text);
     return redirect("/blog", 303);
   },
-};
+});
 
 export const head = { title: "Post" }; // or ({ data, params, url }) => Head
 
@@ -209,7 +209,7 @@ export default function Post({ data, params }: PageProps<"blog/[slug]">) {
 }
 ```
 
-- Server exports: `serverLoad`, `serverActions`, `serverGuard` (throw/return `redirect()`, `deny()`, `notFound()`, `error()`), `serverHeaders`, `serverEntries` (prerender params), `prerender`, `onRequest` / `onGet` / `onPost` …. The compiler strips them (and code only they use) from the browser build.
+- Server exports: `load(…)`, `actions(…)`, `guard(…)` (throw/return `redirect()`, `deny()`, `notFound()`, `error()`), `headers(…)`, `entries(…)` (prerender params), `prerender`, `onRequest(…)` / `onGet(…)` / `onPost(…)` …. `load(fn, { defer: true })` = the page streams without waiting: `data` is a `Deferred` handle, render it only through `<Async load={() => data}>` (layouts: `data()`) or `resource(() => data)`, never `data.field`; it cannot set headers / cookies. The compiler strips them (and code only they use) from the browser build.
 - `event`: `request`, `url`, `params`, `locals`, `signal`, `cookies`, `setHeader`.
 - Page props: `{ data, params, url }` — plain values. Layout props (`LayoutProps`): `data()`, `params()`, `url()` are **accessors**, plus `children`.
 
@@ -217,7 +217,7 @@ export default function Post({ data, params }: PageProps<"blog/[slug]">) {
 // Avoid in a layout
 <header>{data.user}</header>;
 // Prefer
-export default function Layout({ data, children }: LayoutProps<typeof serverLoad>) {
+export default function Layout({ data, children }: LayoutProps<typeof loader>) {
   return (
     <>
       <header>{data().user}</header>
@@ -229,7 +229,7 @@ export default function Layout({ data, children }: LayoutProps<typeof serverLoad
 
 ### Live pages
 
-- `export const live = true` + `LivePageProps<typeof serverLoad>`: `data` becomes an accessor (`data().customers`). Same-URL revalidation (a `@rivetjs/forms` submit, `invalidate()`, search-param change) updates `data` in place: the page is not re-rendered, signals (an open drawer, typed input, focus) survive. Use it for forms in drawers / dialogs.
+- `export const live = true` + `LivePageProps<typeof loader>`: `data` becomes an accessor (`data().customers`). Same-URL revalidation (a `@rivetjs/forms` submit, `invalidate()`, search-param change) updates `data` in place: the page is not re-rendered, signals (an open drawer, typed input, focus) survive. Use it for forms in drawers / dialogs.
 - Don't copy `data()` into a signal (it never updates). Render lists with `<For each={data().items} by={…}>`.
 
 ### Links and navigation
@@ -242,7 +242,7 @@ export default function Layout({ data, children }: LayoutProps<typeof serverLoad
 ### Modes (`vite.config.ts`)
 
 - `rivetRouter()` = `mode: "server"` (render per request; `npm run build` → `dist/server`, `npm start`).
-- `rivetRouter({ mode: "static" })` = prerender to HTML files (`prerender.js` / `prerenderBuild`). `serverLoad` runs at build time. A page with nothing to resume (no handlers, signals in markup, client effects, forms) ships zero JS and its links load documents; `clientRouter: true` keeps in-place navigation on every page.
+- `rivetRouter({ mode: "static" })` = prerender to HTML files (`prerender.js` / `prerenderBuild`). `load(…)` runs at build time. A page with nothing to resume (no handlers, signals in markup, client effects, forms) ships zero JS and its links load documents; `clientRouter: true` keeps in-place navigation on every page.
 - `mode: "csr"` = SPA, no server code.
 
 ### Forms (`@rivetjs/forms`)
@@ -260,12 +260,13 @@ import { action, invalid } from "@rivetjs/forms/server";
 import { actionResult } from "@rivetjs/router/client";
 import { createForm, fieldId, formId, onInput, onBlur, onSubmit, defaultValue, isInvalid, describedBy } from "@rivetjs/forms";
 import { FieldError, ErrorSummary } from "@rivetjs/forms/components";
+import { actions } from "@rivetjs/router";
 
-export const serverActions = {
+export const forms = actions({
   contact: action(contactForm, async (value) => {
     /* typed, valid */
   }),
-};
+});
 
 export default function Contact() {
   const form = createForm(contactForm, { result: actionResult() });
@@ -403,36 +404,39 @@ import { Select } from "@rivetjs/ui/select";
 - Where: Vite (terminal + overlay) as `[RV1016] src/x.tsx:12:8: message`; `rivet-check` as `file:line:col - error RV1016: message`; editor via the TS plugin. The MCP tool `explain_diagnostic("RV1016")` gives the meaning, the mechanical fix and an Avoid / Prefer pair; `check_code` returns the fix and the fixed source for a whole file.
 - Ranges: 1xxx JSX / attributes, 2xxx resume, 3xxx imports / helpers / route modules, 4xxx i18n, 5xxx styles, 6xxx slots, 7xxx config, 9xxx internal.
 
-| Code            | Meaning                                                                                     | Fix                                                     |
-| --------------- | ------------------------------------------------------------------------------------------- | ------------------------------------------------------- |
-| RV1000          | Parse error                                                                                 | fix syntax                                              |
-| RV1005          | HTML nesting the parser would repair (`<div>` in `<p>`)                                     | valid nesting                                           |
-| RV1012          | Unknown native event (`onclick`, `onTransitionend`)                                         | `on` + PascalCase                                       |
-| RV1015          | Handler is a literal, not a function                                                        | pass a function                                         |
-| RV1016          | Handler expression reads state when it binds                                                | wrap in an arrow                                        |
-| RV1101          | Unsafe / unsupported attribute or URL (`innerHTML`, `javascript:`)                          | remove; build-time assets                               |
-| RV1102          | Invalid `preload` value                                                                     | `eager` / `idle` / `visible` / `intent` / `interaction` |
-| RV2001          | Browser global read during server rendering                                                 | handler / `clientEffect` / `clientEvent` / `clientOnly` |
-| RV2002          | Ref callback must assign a local                                                            | `ref={(el) => (local = el)}` or `ref()`                 |
-| RV2003          | Captured class instance                                                                     | pass data; inside handler; `reconstruct(…)`             |
-| RV2102          | Captured instance of a module class that is not a data class (`#private`, base, resource)   | inside handler; `reconstruct(…)`; plain fields          |
-| RV2006          | JSX inside handler / effect / computed                                                      | JSX in component + signal                               |
-| RV2007          | Resumable code captures `this`                                                              | `event.currentTarget`                                   |
-| RV2009          | Two module references share a browser name                                                  | rename one import                                       |
-| RV2011          | Mutually recursive functions split by an early exit                                         | move them together before the exit                      |
-| RV2012–RV2014   | (warning; error on a provable function) `.bind` that may not resume                         | `const g = f.bind(t, …)`; arrow for other callees       |
-| RV2015          | (warning) component returns a function that cannot resume (anon default / wrapper / `let`)  | `export function Name(props) { return () => …; }`       |
-| RV2101          | (warning) captured value not serializable (type-aware)                                      | as RV2003                                               |
-| RV3003 / RV3004 | Structural helper namespace import / alias                                                  | `import { For } from "@rivetjs/runtime/dom"`            |
-| RV3006          | `clientOnly` erasure shape                                                                  | inline `() => import("…")`                              |
-| RV3007          | Route module server export shape (`export *` in a route)                                    | declare server exports directly                         |
-| RV3008          | Server-only code reached from browser code                                                  | keep in `serverLoad` / `*.server.ts`                    |
-| RV3101          | (warning) Link matches no route                                                             | fix the path                                            |
-| RV4001–4004     | i18n key / param / argument / tag errors                                                    | see section 5                                           |
-| RV5001–5003     | ``css`…` `` syntax / usage; invalid or unsafe class / style (style string, two class attrs) | style object, one `class`                               |
-| RV6001–6004     | Slot errors (`<slot>`, `r:name`, `r:slot`)                                                  | see JSX reference, slots                                |
-| RV7101 / RV7102 | `.rivet/editor.json` missing / stale                                                        | `rivet sync`                                            |
-| RV9000 / RV9001 | Unclassified / internal compiler error                                                      | report it                                               |
+| Code            | Meaning                                                                                                                  | Fix                                                                       |
+| --------------- | ------------------------------------------------------------------------------------------------------------------------ | ------------------------------------------------------------------------- |
+| RV1000          | Parse error                                                                                                              | fix syntax                                                                |
+| RV1005          | HTML nesting the parser would repair (`<div>` in `<p>`)                                                                  | valid nesting                                                             |
+| RV1012          | Unknown native event (`onclick`, `onTransitionend`)                                                                      | `on` + PascalCase                                                         |
+| RV1015          | Handler is a literal, not a function                                                                                     | pass a function                                                           |
+| RV1016          | Handler expression reads state when it binds                                                                             | wrap in an arrow                                                          |
+| RV1101          | Unsafe / unsupported attribute or URL (`innerHTML`, `javascript:`)                                                       | remove; build-time assets                                                 |
+| RV1102          | Invalid `preload` value                                                                                                  | `eager` / `idle` / `visible` / `intent` / `interaction`                   |
+| RV2001          | Browser global read during server rendering                                                                              | handler / `clientEffect` / `clientEvent` / `clientOnly`                   |
+| RV2002          | Ref callback must assign a local                                                                                         | `ref={(el) => (local = el)}` or `ref()`                                   |
+| RV2003          | Captured class instance                                                                                                  | pass data; inside handler; `reconstruct(…)`                               |
+| RV2102          | Captured instance of a module class that is not a data class (`#private`, base, resource)                                | inside handler; `reconstruct(…)`; plain fields                            |
+| RV2006          | JSX inside handler / effect / computed                                                                                   | JSX in component + signal                                                 |
+| RV2007          | Resumable code captures `this`                                                                                           | `event.currentTarget`                                                     |
+| RV2009          | Two module references share a browser name                                                                               | rename one import                                                         |
+| RV2011          | Mutually recursive functions split by an early exit                                                                      | move them together before the exit                                        |
+| RV2012–RV2014   | (warning; error on a provable function) `.bind` that may not resume                                                      | `const g = f.bind(t, …)`; arrow for other callees                         |
+| RV2015          | (warning) component returns a function that cannot resume (anon default / wrapper / `let`)                               | `export function Name(props) { return () => …; }`                         |
+| RV2016          | (warning) `resource()` that cannot resume (destructured, `let`, not a `const` initializer)                               | one `const user = resource(…)`; quick fix                                 |
+| RV2101          | (warning) captured value not serializable (type-aware)                                                                   | as RV2003                                                                 |
+| RV2103 / RV2104 | `resume: { model: "derived" }` only: `Date.now()` / `Math.random()` while rendering / (warning) signal created in a loop | keyed `signal(Date.now())` or `clientEffect`; one signal outside the loop |
+| RV3003 / RV3004 | Structural helper namespace import / alias                                                                               | `import { For } from "@rivetjs/runtime/dom"`                              |
+| RV3006          | `clientOnly` erasure shape                                                                                               | inline `() => import("…")`                                                |
+| RV3007          | Route module server export shape (`export *` in a route)                                                                 | declare server exports directly                                           |
+| RV3008          | Server-only code reached from browser code                                                                               | keep in `load(…)` / `*.server.ts`                                         |
+| RV3011          | Server-only module reached from a component, layout or error page (router build)                                         | pass it as props from the page's `load(…)`                                |
+| RV3101          | (warning) Link matches no route                                                                                          | fix the path                                                              |
+| RV4001–4004     | i18n key / param / argument / tag errors                                                                                 | see section 5                                                             |
+| RV5001–5003     | ``css`…` `` syntax / usage; invalid or unsafe class / style (style string, two class attrs)                              | style object, one `class`                                                 |
+| RV6001–6004     | Slot errors (`<slot>`, `r:name`, `r:slot`)                                                                               | see JSX reference, slots                                                  |
+| RV7101 / RV7102 | `.rivet/editor.json` missing / stale                                                                                     | `rivet sync`                                                              |
+| RV9000 / RV9001 | Unclassified / internal compiler error                                                                                   | report it                                                                 |
 
 - Not a code: render-time `… is not serializable` (see section 3).