toiljs 0.0.10 → 0.0.12

package/examples/basic/client/routes/get-started.tsx

@@ -1,84 +1,157 @@
-export default function GetStarted() {
-    return (
-        <div className="gs-page">
-
-            {/* Hero */}
-            <div className="gs-hero">
-                <h1 className="gs-title">Get Started</h1>
-                <p className="gs-desc">Everything you need to build your first ToilJS app.</p>
-            </div>
-
-
-            {/* Info grid */}
-            <section className="gs-section">
-                <h2 className="gs-section-title">Project Structure</h2>
-                <div className="gs-grid">
-
-                    <div className="gs-card gs-card--accent1">
-                        <div className="gs-card-icon">
-                            <svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><path d="M22 19a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h5l2 3h9a2 2 0 0 1 2 2z"/></svg>
-                        </div>
-                        <h3>File-based Routing</h3>
-                        <p>Every <code>.tsx</code> file in <code>client/routes/</code> becomes a route. No config required.</p>
-                        <pre><code>{`index.tsx     →  /
-about.tsx     →  /about
-[id].tsx      →  /:id
-[...slug].tsx →  /*`}</code></pre>
-                    </div>
-
-                    <div className="gs-card gs-card--accent2">
-                        <div className="gs-card-icon">
-                            <svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><rect x="2" y="3" width="20" height="14" rx="2"/><path d="M8 21h8M12 17v4"/></svg>
-                        </div>
-                        <h3>Public Folder</h3>
-                        <p>Files in <code>public/</code> are copied as-is to the build root. Reference them with an absolute path.</p>
-                        <pre><code>{`public/images/logo.svg
-→  /images/logo.svg`}</code></pre>
-                    </div>
-
-                    <div className="gs-card gs-card--accent3">
-                        <div className="gs-card-icon">
-                            <svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><rect x="3" y="3" width="18" height="18" rx="2"/><path d="M3 9h18M9 21V9"/></svg>
-                        </div>
-                        <h3>Layout</h3>
-                        <p><code>client/layout.tsx</code> wraps every page. Use it for your nav, footer, providers, and global styles.</p>
-                    </div>
-
-                    <div className="gs-card gs-card--accent4">
-                        <div className="gs-card-icon">
-                            <svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><polygon points="13 2 3 14 12 14 11 22 21 10 12 10 13 2"/></svg>
-                        </div>
-                        <h3>Entry Point</h3>
-                        <p><code>client/toil.tsx</code> is the app entry. Import global CSS and call <code>Toil.mount()</code>, runs once on startup.</p>
-                    </div>
-
-                </div>
-            </section>
-
-            {/* Navigation section */}
-            <section className="gs-section">
-                <h2 className="gs-section-title">Navigation</h2>
-                <div className="gs-card gs-card--flat">
-                    <div className="gs-card-icon">
-                        <svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><path d="M10 13a5 5 0 0 0 7.54.54l3-3a5 5 0 0 0-7.07-7.07l-1.72 1.71"/><path d="M14 11a5 5 0 0 0-7.54-.54l-3 3a5 5 0 0 0 7.07 7.07l1.71-1.71"/></svg>
-                    </div>
-                    <h3>Use <code>{'<Toil.Link>'}</code> for client-side navigation</h3>
-                    <p>Avoids full page reloads and keeps transitions instant. Use a regular <code>{'<a>'}</code> only for external links.</p>
-                    <pre><code>{`// ✅ Internal navigation
-<Toil.Link href="/about">About</Toil.Link>
-
-// ✅ External link
-<a href="https://toil.org" target="_blank">Docs</a>`}</code></pre>
-                </div>
-            </section>
-
-            <div className="gs-actions">
-                <Toil.Link href="/" className="btn btn-secondary">← Back home</Toil.Link>
-                <a href="https://toil.org/docs" target="_blank" rel="noopener noreferrer" className="btn btn-primary">
-                    Read the Docs
-                </a>
-            </div>
-
-        </div>
-    );
-}
+export default function GetStarted() {
+    return (
+        <div className="gs-page">
+            {/* Hero */}
+            <div className="gs-hero">
+                <h1 className="gs-title">Get Started</h1>
+                <p className="gs-desc">Everything you need to build your first ToilJS app.</p>
+            </div>
+
+            {/* Info grid */}
+            <section className="gs-section">
+                <h2 className="gs-section-title">Project Structure</h2>
+                <div className="gs-grid">
+                    <div className="gs-card gs-card--accent1">
+                        <div className="gs-card-icon">
+                            <svg
+                                width="22"
+                                height="22"
+                                viewBox="0 0 24 24"
+                                fill="none"
+                                stroke="currentColor"
+                                strokeWidth="2"
+                                strokeLinecap="round"
+                                strokeLinejoin="round">
+                                <path d="M22 19a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h5l2 3h9a2 2 0 0 1 2 2z" />
+                            </svg>
+                        </div>
+                        <h3>File-based Routing</h3>
+                        <p>
+                            Every <code>.tsx</code> file in <code>client/routes/</code> becomes a route. No config
+                            required.
+                        </p>
+                        <pre>
+                            <code>{`index.tsx     →  /
+about.tsx     →  /about
+[id].tsx      →  /:id
+[...slug].tsx →  /*`}</code>
+                        </pre>
+                    </div>
+
+                    <div className="gs-card gs-card--accent2">
+                        <div className="gs-card-icon">
+                            <svg
+                                width="22"
+                                height="22"
+                                viewBox="0 0 24 24"
+                                fill="none"
+                                stroke="currentColor"
+                                strokeWidth="2"
+                                strokeLinecap="round"
+                                strokeLinejoin="round">
+                                <rect x="2" y="3" width="20" height="14" rx="2" />
+                                <path d="M8 21h8M12 17v4" />
+                            </svg>
+                        </div>
+                        <h3>Public Folder</h3>
+                        <p>
+                            Files in <code>public/</code> are copied as-is to the build root. Reference them with an
+                            absolute path.
+                        </p>
+                        <pre>
+                            <code>{`public/images/logo.svg
+→  /images/logo.svg`}</code>
+                        </pre>
+                    </div>
+
+                    <div className="gs-card gs-card--accent3">
+                        <div className="gs-card-icon">
+                            <svg
+                                width="22"
+                                height="22"
+                                viewBox="0 0 24 24"
+                                fill="none"
+                                stroke="currentColor"
+                                strokeWidth="2"
+                                strokeLinecap="round"
+                                strokeLinejoin="round">
+                                <rect x="3" y="3" width="18" height="18" rx="2" />
+                                <path d="M3 9h18M9 21V9" />
+                            </svg>
+                        </div>
+                        <h3>Layout</h3>
+                        <p>
+                            <code>client/layout.tsx</code> wraps every page. Use it for your nav, footer, providers, and
+                            global styles.
+                        </p>
+                    </div>
+
+                    <div className="gs-card gs-card--accent4">
+                        <div className="gs-card-icon">
+                            <svg
+                                width="22"
+                                height="22"
+                                viewBox="0 0 24 24"
+                                fill="none"
+                                stroke="currentColor"
+                                strokeWidth="2"
+                                strokeLinecap="round"
+                                strokeLinejoin="round">
+                                <polygon points="13 2 3 14 12 14 11 22 21 10 12 10 13 2" />
+                            </svg>
+                        </div>
+                        <h3>Entry Point</h3>
+                        <p>
+                            <code>client/toil.tsx</code> is the app entry. Import global CSS and call{' '}
+                            <code>Toil.mount()</code>, runs once on startup.
+                        </p>
+                    </div>
+                </div>
+            </section>
+
+            {/* Navigation section */}
+            <section className="gs-section">
+                <h2 className="gs-section-title">Navigation</h2>
+                <div className="gs-card gs-card--flat">
+                    <div className="gs-card-icon">
+                        <svg
+                            width="22"
+                            height="22"
+                            viewBox="0 0 24 24"
+                            fill="none"
+                            stroke="currentColor"
+                            strokeWidth="2"
+                            strokeLinecap="round"
+                            strokeLinejoin="round">
+                            <path d="M10 13a5 5 0 0 0 7.54.54l3-3a5 5 0 0 0-7.07-7.07l-1.72 1.71" />
+                            <path d="M14 11a5 5 0 0 0-7.54-.54l-3 3a5 5 0 0 0 7.07 7.07l1.71-1.71" />
+                        </svg>
+                    </div>
+                    <h3>
+                        Use <code>{'<Toil.Link>'}</code> for client-side navigation
+                    </h3>
+                    <p>
+                        Avoids full page reloads and keeps transitions instant. Use a regular <code>{'<a>'}</code> only
+                        for external links.
+                    </p>
+                    <pre>
+                        <code>{`// ✅ Internal navigation
+<Toil.Link href="/about">About</Toil.Link>
+
+// ✅ External link
+<a href="https://toil.org" target="_blank">Docs</a>`}</code>
+                    </pre>
+                </div>
+            </section>
+
+            <div className="gs-actions">
+                <Toil.Link href="/" className="btn btn-secondary">
+                    ← Back home
+                </Toil.Link>
+                <a href="https://toil.org/docs" target="_blank" rel="noopener noreferrer" className="btn btn-primary">
+                    Read the Docs
+                </a>
+            </div>
+        </div>
+    );
+}

package/examples/basic/client/routes/index.tsx

@@ -1,87 +1,137 @@
-const GitHubIcon = () => (
-    <svg width="18" height="18" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true">
-        <path d="M12 2C6.477 2 2 6.477 2 12c0 4.418 2.865 8.166 6.839 9.489.5.092.682-.217.682-.482 0-.237-.009-.868-.013-1.703-2.782.604-3.369-1.341-3.369-1.341-.454-1.154-1.11-1.462-1.11-1.462-.908-.62.069-.608.069-.608 1.003.07 1.531 1.03 1.531 1.03.892 1.529 2.341 1.087 2.91.832.092-.647.35-1.088.636-1.338-2.22-.253-4.555-1.11-4.555-4.943 0-1.091.39-1.984 1.029-2.683-.103-.253-.446-1.27.098-2.647 0 0 .84-.269 2.75 1.025A9.578 9.578 0 0 1 12 6.836a9.59 9.59 0 0 1 2.504.337c1.909-1.294 2.747-1.025 2.747-1.025.546 1.377.202 2.394.1 2.647.64.699 1.028 1.592 1.028 2.683 0 3.842-2.339 4.687-4.566 4.935.359.309.678.919.678 1.852 0 1.336-.012 2.415-.012 2.743 0 .267.18.579.688.481C19.138 20.163 22 16.418 22 12c0-5.523-4.477-10-10-10z" />
-    </svg>
-);
-
-const icons = {
-    hmr: (
-        <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
-            <polygon points="13 2 3 14 12 14 11 22 21 10 12 10 13 2" />
-        </svg>
-    ),
-    routing: (
-        <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
-            <path d="M22 19a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h5l2 3h9a2 2 0 0 1 2 2z" />
-        </svg>
-    ),
-    typescript: (
-        <svg width="16" height="16" viewBox="0 0 24 24" fill="currentColor">
-            <rect x="2" y="2" width="20" height="20" rx="3" fill="currentColor" />
-            <path d="M13.5 12H15.5V18H17V12H19V10.5H13.5V12Z" fill="var(--bg)" />
-            <path d="M11 10.5C9.07 10.5 7.5 12.07 7.5 14C7.5 15.45 8.38 16.69 9.65 17.23L7.5 18H11C12.93 18 14.5 16.43 14.5 14.5C14.5 13.26 13.86 12.17 12.9 11.55C12.42 11.22 11.73 10.5 11 10.5ZM11 12C12.1 12 13 12.9 13 14C13 15.1 12.1 16 11 16H9.72C9.28 15.57 9 14.81 9 14C9 12.9 9.9 12 11 12Z" fill="var(--bg)" />
-        </svg>
-    ),
-    builds: (
-        <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
-            <path d="M21 16V8a2 2 0 0 0-1-1.73l-7-4a2 2 0 0 0-2 0l-7 4A2 2 0 0 0 3 8v8a2 2 0 0 0 1 1.73l7 4a2 2 0 0 0 2 0l7-4A2 2 0 0 0 21 16z" />
-            <polyline points="3.27 6.96 12 12.01 20.73 6.96" />
-            <line x1="12" y1="22.08" x2="12" y2="12" />
-        </svg>
-    ),
-};
-
-const features = [
-    { icon: icons.hmr,        label: 'Instant HMR' },
-    { icon: icons.routing,    label: 'File Routing' },
-    { icon: icons.typescript, label: 'TypeScript' },
-    { icon: icons.builds,     label: 'Optimized Builds' },
-];
-
-export default function Home() {
-    return (
-        <section className="hero">
-            <div className="hero-logo">
-                <img src="images/logo.svg" className="hero-logo-glow" alt="" aria-hidden="true" width={96} height={96} />
-                <Toil.Image
-                    src="images/logo.svg"
-                    className="hero-logo-img"
-                    alt="ToilJS"
-                    width={96}
-                    height={96}
-                    priority
-                />
-            </div>
-
-            <h1 className="hero-title">ToilJS</h1>
-
-            <p className="hero-tagline">
-                Next-gen React.<br />
-                <span>Zero config.</span>
-            </p>
-
-            <p className="hero-desc">
-                File-based routing, blazing-fast HMR, and full TypeScript.
-                <br />All powered by Vite.
-            </p>
-
-            <ul className="features">
-                {features.map(f => (
-                    <li key={f.label} className="feature-badge">
-                        {f.icon}{f.label}
-                    </li>
-                ))}
-            </ul>
-
-            <div className="hero-cta">
-                <Toil.Link href="/get-started" className="btn btn-primary">
-                    Get Started
-                </Toil.Link>
-                <a className="btn btn-secondary" href="https://github.com/btc-vision/toiljs" target="_blank" rel="noopener noreferrer">
-                        <GitHubIcon />
-                        GitHub
-                    </a>
-            </div>
-        </section>
-    );
-}
+// The home page sets its own title with an absolute template (`%s`), so the tab reads exactly this
+// rather than being suffixed by the layout's "%s | ToilJS".
+export const metadata: Toil.Metadata = {
+    title: 'ToilJS, the modern React framework',
+    titleTemplate: '%s',
+    description: 'File-based routing, instant HMR, build-time SEO, and a WebAssembly backend. Zero config.',
+    openGraph: { title: 'ToilJS', type: 'website' }
+};
+
+const GitHubIcon = () => (
+    <svg width="18" height="18" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true">
+        <path d="M12 2C6.477 2 2 6.477 2 12c0 4.418 2.865 8.166 6.839 9.489.5.092.682-.217.682-.482 0-.237-.009-.868-.013-1.703-2.782.604-3.369-1.341-3.369-1.341-.454-1.154-1.11-1.462-1.11-1.462-.908-.62.069-.608.069-.608 1.003.07 1.531 1.03 1.531 1.03.892 1.529 2.341 1.087 2.91.832.092-.647.35-1.088.636-1.338-2.22-.253-4.555-1.11-4.555-4.943 0-1.091.39-1.984 1.029-2.683-.103-.253-.446-1.27.098-2.647 0 0 .84-.269 2.75 1.025A9.578 9.578 0 0 1 12 6.836a9.59 9.59 0 0 1 2.504.337c1.909-1.294 2.747-1.025 2.747-1.025.546 1.377.202 2.394.1 2.647.64.699 1.028 1.592 1.028 2.683 0 3.842-2.339 4.687-4.566 4.935.359.309.678.919.678 1.852 0 1.336-.012 2.415-.012 2.743 0 .267.18.579.688.481C19.138 20.163 22 16.418 22 12c0-5.523-4.477-10-10-10z" />
+    </svg>
+);
+
+const icons = {
+    hmr: (
+        <svg
+            width="16"
+            height="16"
+            viewBox="0 0 24 24"
+            fill="none"
+            stroke="currentColor"
+            strokeWidth="2"
+            strokeLinecap="round"
+            strokeLinejoin="round">
+            <polygon points="13 2 3 14 12 14 11 22 21 10 12 10 13 2" />
+        </svg>
+    ),
+    routing: (
+        <svg
+            width="16"
+            height="16"
+            viewBox="0 0 24 24"
+            fill="none"
+            stroke="currentColor"
+            strokeWidth="2"
+            strokeLinecap="round"
+            strokeLinejoin="round">
+            <path d="M22 19a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h5l2 3h9a2 2 0 0 1 2 2z" />
+        </svg>
+    ),
+    typescript: (
+        <svg width="16" height="16" viewBox="0 0 24 24" fill="currentColor">
+            <rect x="2" y="2" width="20" height="20" rx="3" fill="currentColor" />
+            <path d="M13.5 12H15.5V18H17V12H19V10.5H13.5V12Z" fill="var(--bg)" />
+            <path
+                d="M11 10.5C9.07 10.5 7.5 12.07 7.5 14C7.5 15.45 8.38 16.69 9.65 17.23L7.5 18H11C12.93 18 14.5 16.43 14.5 14.5C14.5 13.26 13.86 12.17 12.9 11.55C12.42 11.22 11.73 10.5 11 10.5ZM11 12C12.1 12 13 12.9 13 14C13 15.1 12.1 16 11 16H9.72C9.28 15.57 9 14.81 9 14C9 12.9 9.9 12 11 12Z"
+                fill="var(--bg)"
+            />
+        </svg>
+    ),
+    builds: (
+        <svg
+            width="16"
+            height="16"
+            viewBox="0 0 24 24"
+            fill="none"
+            stroke="currentColor"
+            strokeWidth="2"
+            strokeLinecap="round"
+            strokeLinejoin="round">
+            <path d="M21 16V8a2 2 0 0 0-1-1.73l-7-4a2 2 0 0 0-2 0l-7 4A2 2 0 0 0 3 8v8a2 2 0 0 0 1 1.73l7 4a2 2 0 0 0 2 0l7-4A2 2 0 0 0 21 16z" />
+            <polyline points="3.27 6.96 12 12.01 20.73 6.96" />
+            <line x1="12" y1="22.08" x2="12" y2="12" />
+        </svg>
+    )
+};
+
+const features = [
+    { icon: icons.hmr, label: 'Instant HMR' },
+    { icon: icons.routing, label: 'File Routing' },
+    { icon: icons.typescript, label: 'TypeScript' },
+    { icon: icons.builds, label: 'Optimized Builds' }
+];
+
+export default function Home() {
+    return (
+        <section className="hero">
+            <div className="hero-logo">
+                <img
+                    src="/images/logo.svg"
+                    className="hero-logo-glow"
+                    alt=""
+                    aria-hidden="true"
+                    width={96}
+                    height={96}
+                />
+                <Toil.Image
+                    src="/images/logo.svg"
+                    className="hero-logo-img"
+                    alt="ToilJS"
+                    width={96}
+                    height={96}
+                    priority
+                />
+            </div>
+
+            <h1 className="hero-title">ToilJS</h1>
+
+            <p className="hero-tagline">
+                Next-gen React.
+                <br />
+                <span>Zero config.</span>
+            </p>
+
+            <p className="hero-desc">
+                File-based routing, blazing-fast HMR, and full TypeScript.
+                <br />
+                All powered by Vite.
+            </p>
+
+            <ul className="features">
+                {features.map((f) => (
+                    <li key={f.label} className="feature-badge">
+                        {f.icon}
+                        {f.label}
+                    </li>
+                ))}
+            </ul>
+
+            <div className="hero-cta">
+                <Toil.Link href="/get-started" className="btn btn-primary">
+                    Get Started
+                </Toil.Link>
+                <a
+                    className="btn btn-secondary"
+                    href="https://github.com/btc-vision/toiljs"
+                    target="_blank"
+                    rel="noopener noreferrer">
+                    <GitHubIcon />
+                    GitHub
+                </a>
+            </div>
+        </section>
+    );
+}

package/examples/basic/client/routes/loader-demo/index.tsx

@@ -1,50 +1,59 @@
-async function wait(ms: number): Promise<void> {
-    return new Promise((resolve) => setTimeout(resolve, ms));
-}
-
-export const loader = async ({ searchParams }: Toil.LoaderArgs) => {
-    await wait(2000);
-    return { loadedAt: new Date().toISOString(), q: searchParams.get('q') };
-};
-
-// Cache this route's data for 10s: revisiting within 10s is instant (no 2s wait); after that it
-// refetches on navigation. Use `false` to cache forever, or omit for the default (refetch every nav).
-export const revalidate: Toil.Revalidate = 10;
-
-// Dynamic metadata derived from the loader's data (vs the static `metadata` export on /about).
-export const generateMetadata: Toil.GenerateMetadata<Awaited<ReturnType<typeof loader>>> = ({
-    data,
-}) => ({ title: `Loader demo, loaded ${data.loadedAt}` });
-
-export default function LoaderDemo() {
-    // Pass the loader to infer the data type from its return, no generics, no restating the shape.
-    const data = Toil.useLoaderData(loader);
-    const router = Toil.useRouter();
-    return (
-        <main>
-            <h1>Loader demo</h1>
-            <p>
-                Data loaded before render (no <code>useEffect</code>): <code>{data.loadedAt}</code>
-                {data.q !== null ? ` · q=${data.q}` : ''}
-            </p>
-            <p>
-                <button type="button" onClick={() => { router.revalidate(); }}>
-                    Revalidate (refetch)
-                </button>
-            </p>
-            {/* The write half: an action runs on submit, then revalidates this route's loader so
-                `loadedAt` above updates, read → write → revalidate, no manual refetch. */}
-            <Toil.Form action={async (form) => { await wait(500); console.log('saved', form.get('note')); }}>
-                {({ pending }) => (
-                    <>
-                        <input name="note" placeholder="Leave a note" disabled={pending} />
-                        <button type="submit" disabled={pending}>
-                            {pending ? 'Saving…' : 'Save & revalidate'}
-                        </button>
-                    </>
-                )}
-            </Toil.Form>
-            <Toil.Link href="/">Back home</Toil.Link>
-        </main>
-    );
-}
+async function wait(ms: number): Promise<void> {
+    return new Promise((resolve) => setTimeout(resolve, ms));
+}
+
+export const loader = async ({ searchParams }: Toil.LoaderArgs) => {
+    await wait(2000);
+    return { loadedAt: new Date().toISOString(), q: searchParams.get('q') };
+};
+
+// Cache this route's data for 10s: revisiting within 10s is instant (no 2s wait); after that it
+// refetches on navigation. Use `false` to cache forever, or omit for the default (refetch every nav).
+export const revalidate: Toil.Revalidate = 10;
+
+// Dynamic metadata derived from the loader's data (vs the static `metadata` export on /about).
+export const generateMetadata: Toil.GenerateMetadata<Awaited<ReturnType<typeof loader>>> = ({ data }) => ({
+    title: `Loader demo, loaded ${data.loadedAt}`
+});
+
+export default function LoaderDemo() {
+    // Pass the loader to infer the data type from its return, no generics, no restating the shape.
+    const data = Toil.useLoaderData(loader);
+    const router = Toil.useRouter();
+    return (
+        <main>
+            <h1>Loader demo</h1>
+            <p>
+                Data loaded before render (no <code>useEffect</code>): <code>{data.loadedAt}</code>
+                {data.q !== null ? `, q=${data.q}` : ''}
+            </p>
+            <p>
+                <button
+                    type="button"
+                    onClick={() => {
+                        router.revalidate();
+                    }}>
+                    Revalidate (refetch)
+                </button>
+            </p>
+            {/* The write half: an action runs on submit, then revalidates this route's loader so
+                `loadedAt` above updates, read, write, revalidate, no manual refetch. */}
+            <Toil.Form
+                action={async (form) => {
+                    await wait(500);
+                    console.log('saved', form.get('note'));
+                }}
+                revalidate>
+                {({ pending }) => (
+                    <>
+                        <input name="note" placeholder="Leave a note" disabled={pending} />
+                        <button type="submit" disabled={pending}>
+                            {pending ? 'Saving' : 'Save & revalidate'}
+                        </button>
+                    </>
+                )}
+            </Toil.Form>
+            <Toil.Link href="/">Back home</Toil.Link>
+        </main>
+    );
+}