docs: fix code examples and docs from review feedback

1. Fix handlers → handler (singular) in app.route() example
2. Fix app.onError() missing path argument
3. Fix css shown inside RouteConfig → top-level export
4. Fix variable shadowing (page shadows page() import)
5. Fix ctx.redirect() in page component → move to handler
6-8. Add missing HttpError and define imports in examples
9. Add config and info to PageProps reference table
10. Add RouteData, Lazy, MaybeLazy, ResolvedBuildConfig to API reference
11. Clarify layout nesting order in architecture docs
12. Add note explaining useSignal in server-rendered route for signals

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>

Author: bartlomieju

docs/latest/advanced/api-reference.md

@@ -43,6 +43,8 @@ import { App, createDefine, HttpError, page, staticFiles } from "fresh";
 | `ListenOptions`                       | Options for `app.listen()`.                                                          |
 | `Island`                              | Island component type.                                                               |
 | `Method`                              | HTTP method union type.                                                              |
+| `RouteData`                           | Data type returned by route handlers via `page()`.                                   |
+| `Lazy` / `MaybeLazy`                  | Utility types for lazily-loaded routes and middleware.                               |
 | `CORSOptions`                         | Options for `cors()`.                                                                |
 | `CsrfOptions`                         | Options for `csrf()`.                                                                |
 | `CSPOptions`                          | Options for `csp()`.                                                                 |
@@ -86,7 +88,8 @@ import { Builder } from "fresh/dev";
 
 **Types:**
 
-| Export                                                   | Description                  |
-| -------------------------------------------------------- | ---------------------------- |
-| `BuildOptions`                                           | Options for `new Builder()`. |
-| `OnTransformArgs` / `OnTransformOptions` / `TransformFn` | Build plugin hook types.     |
+| Export                                                   | Description                   |
+| -------------------------------------------------------- | ----------------------------- |
+| `BuildOptions`                                           | Options for `new Builder()`.  |
+| `ResolvedBuildConfig`                                    | Resolved build configuration. |
+| `OnTransformArgs` / `OnTransformOptions` / `TransformFn` | Build plugin hook types.      |

docs/latest/concepts/app.md

@@ -283,7 +283,7 @@ Register a route with a component and optional handlers for data loading.
 ```tsx
 app.route("/about", {
   component: (ctx) => <h1>About {ctx.data.name}</h1>,
-  handlers: {
+  handler: {
     GET(ctx) {
       return page({ name: "Fresh" });
     },
@@ -317,8 +317,8 @@ app.onError("*", (ctx) => {
 Setting a route with a component:
 
 ```tsx
-app.onError((ctx) => {
-  return ctx.render(<h1>Oops! Something went wrong.</h1>);
+app.onError("*", {
+  component: (ctx) => <h1>Oops! {String(ctx.error)}</h1>,
 });
 ```
 

docs/latest/concepts/architecture.md

@@ -119,8 +119,9 @@ at `routes/blog/post.tsx` inherits layouts from:
 1. `routes/_layout.tsx` (root layout)
 2. `routes/blog/_layout.tsx` (section layout)
 
-The innermost layout wraps the page component, and each outer layout wraps the
-next. The app wrapper (`_app.tsx`) wraps everything.
+Layouts nest from the outside in: the root layout is outermost, each deeper
+layout wraps closer to the page, and the innermost layout directly wraps the
+page component. The app wrapper (`_app.tsx`) wraps everything.
 
 ### Build and deploy
 

docs/latest/concepts/data-fetching.md

@@ -13,7 +13,7 @@ A handler fetches data and returns it with `page()`. The page component receives
 it in `props.data`:
 
 ```tsx routes/projects/[id].tsx
-import { page } from "fresh";
+import { HttpError, page } from "fresh";
 import { define } from "@/utils.ts";
 
 interface Data {
@@ -60,6 +60,7 @@ For simpler cases, you can fetch data directly in an async component without a
 separate handler:
 
 ```tsx routes/projects/[id].tsx
+import { HttpError } from "fresh";
 import { define } from "@/utils.ts";
 
 export default define.page(async (ctx) => {
@@ -96,12 +97,19 @@ export default define.middleware(async (ctx) => {
 ```
 
 ```tsx routes/dashboard.tsx
+import { page } from "fresh";
 import { define } from "@/utils.ts";
 
+export const handler = define.handlers({
+  GET(ctx) {
+    if (!ctx.state.user) {
+      return ctx.redirect("/login");
+    }
+    return page();
+  },
+});
+
 export default define.page((ctx) => {
-  if (!ctx.state.user) {
-    return ctx.redirect("/login");
-  }
   return <h1>Welcome, {ctx.state.user.name}</h1>;
 });
 ```
@@ -117,7 +125,9 @@ Page components receive these properties:
 | `params`    | `Record<string, string>` | Route parameters (e.g. `:id`)             |
 | `req`       | `Request`                | The original HTTP request                 |
 | `state`     | `State`                  | Shared state set by middleware            |
+| `config`    | `ResolvedFreshConfig`    | The resolved Fresh configuration          |
 | `route`     | `string \| null`         | The matched route pattern                 |
+| `info`      | `Deno.ServeHandlerInfo`  | Server connection info                    |
 | `error`     | `unknown \| null`        | Caught error (on error pages)             |
 | `isPartial` | `boolean`                | Whether this is a partial request         |
 | `Component` | `FunctionComponent`      | Child component (in layouts)              |

docs/latest/concepts/file-routing.md

@@ -93,14 +93,11 @@ export const config: RouteConfig = {
 // ...
 ```
 
-You can also load additional CSS files for a specific route:
+You can also load additional CSS files for a specific route by exporting a `css`
+array. This is a top-level export, separate from `config`:
 
 ```ts routes/dashboard.tsx
-import { RouteConfig } from "fresh";
-
-export const config: RouteConfig = {
-  css: ["./assets/dashboard.css"],
-};
+export const css = ["./assets/dashboard.css"];
 ```
 
 ## Route Groups

docs/latest/concepts/signals.md

@@ -82,6 +82,12 @@ Both sliders share the same signal — moving one updates the other. When the sa
 signal object is passed to multiple islands, Fresh preserves the reference so
 they stay synchronized.
 
+> [!NOTE]
+> Using `useSignal` in a route component (not an island) is intentional here.
+> The signal is created during server rendering, serialized into the HTML, and
+> reconstructed as a live signal on the client. This is how Fresh shares
+> reactive state between multiple islands on the same page.
+
 ## Shared state across islands
 
 For state that needs to be shared between unrelated islands, create a signal in

docs/latest/examples/common-patterns.md

@@ -52,6 +52,7 @@ export default function handler(ctx) {
 Return different formats based on the `Accept` header:
 
 ```ts routes/api/users/[id].ts
+import { HttpError } from "fresh";
 import { define } from "@/utils.ts";
 
 export const handlers = define.handlers({
@@ -105,13 +106,14 @@ session example.
 Access URL search params from the context:
 
 ```ts routes/search.tsx
+import { page } from "fresh";
 import { define } from "@/utils.ts";
 
 export const handlers = define.handlers({
   GET(ctx) {
     const query = ctx.url.searchParams.get("q") ?? "";
-    const page = Number(ctx.url.searchParams.get("page") ?? "1");
-    const results = search(query, page);
+    const pageNum = Number(ctx.url.searchParams.get("page") ?? "1");
+    const results = search(query, pageNum);
     return page({ query, results });
   },
 });
@@ -145,6 +147,8 @@ return page(data, {
 Return a streaming response from a handler:
 
 ```ts routes/api/stream.ts
+import { define } from "@/utils.ts";
+
 export const handlers = define.handlers({
   GET() {
     const body = new ReadableStream({