toiljs 0.0.15 → 0.0.19

package/examples/basic/client/layout.tsx

@@ -1,25 +1,25 @@
-import { type ReactNode } from 'react';
-import Footer from './components/Footer';
-import Header from './components/Header';
-import HoneycombBackground from './components/HoneycombBackground';
-
-export default function Layout({ children }: { children?: ReactNode }) {
-    return (
-        <div className="app">
-            <HoneycombBackground />
-            {/* Site-wide head defaults. `titleTemplate` wraps each route's own title (a route metadata
-                title of "About" renders as "About | ToilJS"); a route opts out by setting its own
-                `titleTemplate: '%s'`. `title` is the fallback for routes that set none. */}
-            <Toil.Head
-                titleTemplate="%s | ToilJS"
-                title="ToilJS"
-                meta={[{ name: 'description', content: 'The most performant React framework.' }]}
-            />
-            <Header />
-
-            <main className="content">{children}</main>
-
-            <Footer />
-        </div>
-    );
-}
+import { type ReactNode } from 'react';
+import Footer from './components/Footer';
+import Header from './components/Header';
+import HoneycombBackground from './components/HoneycombBackground';
+
+export default function Layout({ children }: { children?: ReactNode }) {
+    return (
+        <div className="app">
+            <HoneycombBackground />
+            {/* Site-wide head defaults. `titleTemplate` wraps each route's own title (a route metadata
+                title of "About" renders as "About | ToilJS"); a route opts out by setting its own
+                `titleTemplate: '%s'`. `title` is the fallback for routes that set none. */}
+            <Toil.Head
+                titleTemplate="%s | ToilJS"
+                title="ToilJS"
+                meta={[{ name: 'description', content: 'The most performant React framework.' }]}
+            />
+            <Header />
+
+            <main className="content">{children}</main>
+
+            <Footer />
+        </div>
+    );
+}

package/examples/basic/client/public/images/.gitkeep

@@ -1 +1 @@
-# Place images and other static assets here; served at /images/*.
+# Place images and other static assets here; served at /images/*.

package/examples/basic/client/public/images/logo.svg

@@ -1,37 +1,37 @@
-<?xml version="1.0" encoding="UTF-8"?>
-<svg id="Layer_1" xmlns="http://www.w3.org/2000/svg" version="1.1" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 500 500">
-  <!-- Generator: Adobe Illustrator 30.4.0, SVG Export Plug-In . SVG Version: 2.1.4 Build 226)  -->
-  <defs>
-    <style>
-      .st0 {
-        fill: #fff;
-      }
-
-      .st1 {
-        fill: url(#linear-gradient1);
-      }
-
-      .st2 {
-        fill: url(#linear-gradient);
-      }
-    </style>
-    <linearGradient id="linear-gradient" x1="43.27" y1="43.27" x2="467.12" y2="467.12" gradientUnits="userSpaceOnUse">
-      <stop offset="0" stop-color="#6990ff"/>
-      <stop offset=".03" stop-color="#6479f9"/>
-      <stop offset=".08" stop-color="#5d57f0"/>
-      <stop offset=".12" stop-color="#583de9"/>
-      <stop offset=".17" stop-color="#542ae3"/>
-      <stop offset=".23" stop-color="#521ee0"/>
-      <stop offset=".28" stop-color="#521be0"/>
-      <stop offset=".66" stop-color="#6900f4"/>
-      <stop offset="1" stop-color="#7f00f6"/>
-    </linearGradient>
-    <linearGradient id="linear-gradient1" x1="149.99" y1="355.49" x2="149.99" y2="0" gradientUnits="userSpaceOnUse">
-      <stop offset=".15" stop-color="#6990ff" stop-opacity=".6"/>
-      <stop offset=".55" stop-color="#531ae1"/>
-    </linearGradient>
-  </defs>
-  <rect class="st2" width="500" height="500" rx="130" ry="130"/>
-  <path class="st1" d="M299.98,0L0,355.49v-225.49C0,58.2,58.2,0,130,0h169.98Z"/>
-  <path class="st0" d="M106.17,111.11h285.24c9.9,0,16.7,9.96,13.09,19.18l-17.98,45.96c-2.11,5.39-7.31,8.94-13.09,8.94h-74.65c-7.76,0-14.06,6.29-14.06,14.06v214.94c0,7.76-6.29,14.06-14.06,14.06h-45.96c-7.76,0-14.06-6.29-14.06-14.06v-217.25c0-7.76-6.29-14.06-14.06-14.06h-73.66c-5.82,0-11.04-3.59-13.12-9.02l-16.76-43.64c-3.54-9.21,3.26-19.1,13.12-19.1Z"/>
+<?xml version="1.0" encoding="UTF-8"?>
+<svg id="Layer_1" xmlns="http://www.w3.org/2000/svg" version="1.1" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 500 500">
+  <!-- Generator: Adobe Illustrator 30.4.0, SVG Export Plug-In . SVG Version: 2.1.4 Build 226)  -->
+  <defs>
+    <style>
+      .st0 {
+        fill: #fff;
+      }
+
+      .st1 {
+        fill: url(#linear-gradient1);
+      }
+
+      .st2 {
+        fill: url(#linear-gradient);
+      }
+    </style>
+    <linearGradient id="linear-gradient" x1="43.27" y1="43.27" x2="467.12" y2="467.12" gradientUnits="userSpaceOnUse">
+      <stop offset="0" stop-color="#6990ff"/>
+      <stop offset=".03" stop-color="#6479f9"/>
+      <stop offset=".08" stop-color="#5d57f0"/>
+      <stop offset=".12" stop-color="#583de9"/>
+      <stop offset=".17" stop-color="#542ae3"/>
+      <stop offset=".23" stop-color="#521ee0"/>
+      <stop offset=".28" stop-color="#521be0"/>
+      <stop offset=".66" stop-color="#6900f4"/>
+      <stop offset="1" stop-color="#7f00f6"/>
+    </linearGradient>
+    <linearGradient id="linear-gradient1" x1="149.99" y1="355.49" x2="149.99" y2="0" gradientUnits="userSpaceOnUse">
+      <stop offset=".15" stop-color="#6990ff" stop-opacity=".6"/>
+      <stop offset=".55" stop-color="#531ae1"/>
+    </linearGradient>
+  </defs>
+  <rect class="st2" width="500" height="500" rx="130" ry="130"/>
+  <path class="st1" d="M299.98,0L0,355.49v-225.49C0,58.2,58.2,0,130,0h169.98Z"/>
+  <path class="st0" d="M106.17,111.11h285.24c9.9,0,16.7,9.96,13.09,19.18l-17.98,45.96c-2.11,5.39-7.31,8.94-13.09,8.94h-74.65c-7.76,0-14.06,6.29-14.06,14.06v214.94c0,7.76-6.29,14.06-14.06,14.06h-45.96c-7.76,0-14.06-6.29-14.06-14.06v-217.25c0-7.76-6.29-14.06-14.06-14.06h-73.66c-5.82,0-11.04-3.59-13.12-9.02l-16.76-43.64c-3.54-9.21,3.26-19.1,13.12-19.1Z"/>
 </svg>

package/examples/basic/client/public/robots.txt

@@ -1,2 +1,2 @@
-User-agent: *
-Allow: /
+User-agent: *
+Allow: /

package/examples/basic/client/routes/docs/[...slug].tsx

@@ -1,12 +1,12 @@
-export default function Docs() {
-    const { slug } = Toil.useParams();
-    return (
-        <main>
-            <h1>Docs</h1>
-            <p>
-                Catch-all route <code>client/routes/docs/[...slug].tsx</code> matched: <code>{slug}</code>
-            </p>
-            <Toil.Link href="/">Back home</Toil.Link>
-        </main>
-    );
-}
+export default function Docs() {
+    const { slug } = Toil.useParams();
+    return (
+        <main>
+            <h1>Docs</h1>
+            <p>
+                Catch-all route <code>client/routes/docs/[...slug].tsx</code> matched: <code>{slug}</code>
+            </p>
+            <Toil.Link href="/">Back home</Toil.Link>
+        </main>
+    );
+}

package/examples/basic/client/routes/features/error/error.tsx

@@ -1,16 +1,16 @@
-// The error boundary for this segment. It receives the thrown error and a `reset` to retry the
-// render. Place an `error.tsx` next to any route to contain failures there.
-export default function FeatureError({ error, reset }: Toil.RouteErrorProps) {
-    return (
-        <main>
-            <h1>Something broke</h1>
-            <p style={{ color: 'crimson' }}>{error instanceof Error ? error.message : String(error)}</p>
-            <p>
-                <button type="button" onClick={reset}>
-                    Try again
-                </button>{' '}
-                <Toil.Link href="/features">Back to features</Toil.Link>
-            </p>
-        </main>
-    );
-}
+// The error boundary for this segment. It receives the thrown error and a `reset` to retry the
+// render. Place an `error.tsx` next to any route to contain failures there.
+export default function FeatureError({ error, reset }: Toil.RouteErrorProps) {
+    return (
+        <main>
+            <h1>Something broke</h1>
+            <p style={{ color: 'crimson' }}>{error instanceof Error ? error.message : String(error)}</p>
+            <p>
+                <button type="button" onClick={reset}>
+                    Try again
+                </button>{' '}
+                <Toil.Link href="/features">Back to features</Toil.Link>
+            </p>
+        </main>
+    );
+}

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

@@ -47,7 +47,7 @@ const groups: { heading: string; items: { href: Toil.Href; label: string; note:
         items: [
             { href: '/features/script', label: 'Script', note: 'Toil.Script with a load strategy' },
             { href: '/features/realtime', label: 'WebSocket channel', note: 'Toil.useChannel against /_toil' },
-            { href: '/io', label: 'Binary IO', note: 'BinaryWriter / BinaryReader / FastSet, no import' }
+            { href: '/io', label: 'Binary IO', note: 'DataWriter / DataReader / FastSet, no import' }
         ]
     }
 ];

package/examples/basic/client/routes/features/template/b.tsx

@@ -1,14 +1,14 @@
-export const metadata: Toil.Metadata = { title: 'Templates, sibling' };
-
-export default function TemplateSibling() {
-    return (
-        <main>
-            <h1>Sibling page</h1>
-            <p>Same template, fresh mount. Navigate back and forth to see the counter increment.</p>
-            <p>
-                <Toil.Link href="/features/template">First page</Toil.Link>{' '}
-                <Toil.Link href="/features">Back to features</Toil.Link>
-            </p>
-        </main>
-    );
-}
+export const metadata: Toil.Metadata = { title: 'Templates, sibling' };
+
+export default function TemplateSibling() {
+    return (
+        <main>
+            <h1>Sibling page</h1>
+            <p>Same template, fresh mount. Navigate back and forth to see the counter increment.</p>
+            <p>
+                <Toil.Link href="/features/template">First page</Toil.Link>{' '}
+                <Toil.Link href="/features">Back to features</Toil.Link>
+            </p>
+        </main>
+    );
+}

package/examples/basic/client/routes/files/[[...slug]].tsx

@@ -1,21 +1,21 @@
-export const metadata: Toil.Metadata = { title: 'Optional catch-all' };
-
-// Optional catch-all: `[[...slug]]` matches the bare `/files` AND any depth below it (`/files/a/b`).
-// `slug` is undefined at the base and a path string when segments are present.
-export default function Files() {
-    const { slug } = Toil.useParams();
-    return (
-        <main>
-            <h1>Optional catch-all</h1>
-            <p>
-                <code>files/[[...slug]].tsx</code> matched. Current slug:{' '}
-                <code>{slug ?? '(none, this is the base /files)'}</code>
-            </p>
-            <p>
-                <Toil.Link href="/files">/files</Toil.Link>{' '}
-                <Toil.Link href="/files/images/logo">/files/images/logo</Toil.Link>{' '}
-                <Toil.Link href="/features">Back to features</Toil.Link>
-            </p>
-        </main>
-    );
-}
+export const metadata: Toil.Metadata = { title: 'Optional catch-all' };
+
+// Optional catch-all: `[[...slug]]` matches the bare `/files` AND any depth below it (`/files/a/b`).
+// `slug` is undefined at the base and a path string when segments are present.
+export default function Files() {
+    const { slug } = Toil.useParams();
+    return (
+        <main>
+            <h1>Optional catch-all</h1>
+            <p>
+                <code>files/[[...slug]].tsx</code> matched. Current slug:{' '}
+                <code>{slug ?? '(none, this is the base /files)'}</code>
+            </p>
+            <p>
+                <Toil.Link href="/files">/files</Toil.Link>{' '}
+                <Toil.Link href="/files/images/logo">/files/images/logo</Toil.Link>{' '}
+                <Toil.Link href="/features">Back to features</Toil.Link>
+            </p>
+        </main>
+    );
+}

package/examples/basic/client/routes/gallery/layout.tsx

@@ -1,13 +1,13 @@
-import { type ReactNode } from 'react';
-
-// This layout renders the normal page content AND a parallel `@modal` slot. The slot stays empty
-// until an intercepting route fills it (see @modal/(.)photo/[id].tsx), at which point a modal appears
-// over the gallery without leaving the page.
-export default function GalleryLayout({ children }: { children?: ReactNode }) {
-    return (
-        <div>
-            {children}
-            <Toil.Slot name="modal" />
-        </div>
-    );
-}
+import { type ReactNode } from 'react';
+
+// This layout renders the normal page content AND a parallel `@modal` slot. The slot stays empty
+// until an intercepting route fills it (see @modal/(.)photo/[id].tsx), at which point a modal appears
+// over the gallery without leaving the page.
+export default function GalleryLayout({ children }: { children?: ReactNode }) {
+    return (
+        <div>
+            {children}
+            <Toil.Slot name="modal" />
+        </div>
+    );
+}

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

@@ -1,24 +1,23 @@
-export default function IoDemo() {
-    const writer = new BinaryWriter();
-    writer.writeU32(42);
-    writer.writeStringWithLength('hello toil');
-    const bytes = writer.getBuffer();
-
-    const reader = new BinaryReader(bytes);
-    const n = reader.readU32();
-    const s = reader.readStringWithLength();
-
-    const seen = new FastSet<bigint>();
-    seen.add(1n).add(2n).add(1n);
-
-    return (
-        <main>
-            <h1>Native IO</h1>
-            <p>
-                <code>new BinaryWriter()</code> with no import, round-tripped {n} and &quot;{s}&quot; through{' '}
-                {bytes.length} bytes; FastSet size {seen.size}.
-            </p>
-            <Toil.Link href="/">Back home</Toil.Link>
-        </main>
-    );
-}
+export default function IoDemo() {
+    const writer = new DataWriter();
+    writer.writeU32(42).writeString('hello toil');
+    const bytes = writer.toBytes();
+
+    const reader = new DataReader(bytes);
+    const n = reader.readU32();
+    const s = reader.readString();
+
+    const seen = new FastSet<bigint>();
+    seen.add(1n).add(2n).add(1n);
+
+    return (
+        <main>
+            <h1>Native IO</h1>
+            <p>
+                <code>new DataWriter()</code> with no import, round-tripped {n} and &quot;{s}&quot; through{' '}
+                {bytes.length} bytes; FastSet size {seen.size}.
+            </p>
+            <Toil.Link href="/">Back home</Toil.Link>
+        </main>
+    );
+}

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

@@ -1,13 +1,13 @@
-// Shown as the Suspense fallback while this route's `loader` runs (and its chunk loads). Because the
-// loader awaits 2s, you'll see this spinner before the page renders with its data.
-export default function LoaderDemoLoading() {
-    return (
-        <main>
-            <div className="loading-bar" />
-            <div className="loading-center">
-                <span className="spinner" aria-hidden="true" />
-                <p>Loading data…</p>
-            </div>
-        </main>
-    );
-}
+// Shown as the Suspense fallback while this route's `loader` runs (and its chunk loads). Because the
+// loader awaits 2s, you'll see this spinner before the page renders with its data.
+export default function LoaderDemoLoading() {
+    return (
+        <main>
+            <div className="loading-bar" />
+            <div className="loading-center">
+                <span className="spinner" aria-hidden="true" />
+                <p>Loading data…</p>
+            </div>
+        </main>
+    );
+}

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

@@ -0,0 +1,74 @@
+// Demo of the generated REST fetch client (see ../../shared/server.ts, emitted by the
+// server build from the `@rest` controllers in server/api.ts). Unlike `Server.<service>`
+// RPC, this is working code: `Server.REST.<controller>.<route>(args)` is a real, typed
+// `fetch`. `args` is `{ params?, body?, query?, headers? }`; a `@data` return is parsed
+// into its typed class, and a route that returns a `Response` hands you the raw fetch
+// `Response` to inspect (status, `.json()`, ...). Needs the server running to respond.
+import { useState } from 'react';
+
+import { NewPlayer, type Player, ScoreDelta } from 'shared/server';
+
+export default function RestDemo() {
+    const [log, setLog] = useState<string[]>([]);
+    const note = (line: string) => setLog((prev) => [line, ...prev].slice(0, 8));
+
+    // POST /players  ->  typed Promise<Player>, body is a @data class.
+    const onCreate = async () => {
+        try {
+            const names = ['Ada', 'Linus', 'Grace', 'Dennis'];
+            const name = names[Math.floor(Math.random() * names.length)];
+            const player = await Server.REST.players.create({ body: new NewPlayer(name) });
+            note(`created #${player.id} ${player.name}`);
+        } catch (err) {
+            note(parseError(err));
+        }
+    };
+
+    // POST /players/:id/score  ->  path param + body; route returns a Response, so we get
+    // the raw fetch Response and parse it ourselves.
+    const onScore = async () => {
+        try {
+            const points = BigInt(1 + Math.floor(Math.random() * 10));
+            const res = await Server.REST.players.addScore({
+                params: { id: 1 },
+                body: new ScoreDelta(points)
+            });
+            if (!res.ok) {
+                note(`addScore -> ${res.status} (create player #1 first)`);
+                return;
+            }
+            const p = (await res.json()) as Player;
+            note(`#${p.id} ${p.name} -> ${p.score}`);
+        } catch (err) {
+            note(parseError(err));
+        }
+    };
+
+    // GET /leaderboard  ->  typed Promise<Standings>, a @data wrapper of Player[].
+    const onBoard = async () => {
+        try {
+            const board = await Server.REST.leaderboard.top();
+            note('leaderboard: ' + board.players.map((p) => `${p.name}(${p.score})`).join(', '));
+        } catch (err) {
+            note(parseError(err));
+        }
+    };
+
+    return (
+        <main>
+            <h1>REST</h1>
+            <p>
+                <code>Server.REST.*</code> is a real, typed <code>fetch</code> client generated from the{' '}
+                <code>@rest</code> controllers. It needs the server running to respond.
+            </p>
+            <button onClick={onCreate}>create player</button> <button onClick={onScore}>award points to #1</button>{' '}
+            <button onClick={onBoard}>leaderboard</button>
+            <ul>
+                {log.map((line, i) => (
+                    <li key={i}>{line}</li>
+                ))}
+            </ul>
+            <Toil.Link href="/">Back home</Toil.Link>
+        </main>
+    );
+}

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

@@ -0,0 +1,43 @@
+// Demo of the generated, typed `Server` RPC surface (see ../../shared/server.ts, emitted
+// by the server build from `@service`/`@remote`). `Server` is global (no import) and typed
+// from the server: `Server.ping(n)` (free `@remote`) and `Server.admin.reset()` (a
+// `@service` method). Transport is not wired yet, so a real call throws; this page shows
+// the typing and reports the stub error via the global `parseError`.
+import { useState } from 'react';
+
+export default function RpcDemo() {
+    const [result, setResult] = useState('not called');
+
+    // Scalar in / scalar out: Server.ping is typed (n: number) => Promise<number>.
+    const onPing = async () => {
+        try {
+            const next = await Server.ping(10);
+            setResult(`ping -> ${next}`);
+        } catch (err) {
+            setResult(parseError(err));
+        }
+    };
+
+    // A @service method: namespaced under its service key.
+    const onReset = async () => {
+        try {
+            await Server.admin.reset();
+            setResult('admin.reset -> store cleared');
+        } catch (err) {
+            setResult(parseError(err));
+        }
+    };
+
+    return (
+        <main>
+            <h1>RPC</h1>
+            <p>
+                <code>Server</code> (RPC) is typed from the server build, no import. Calling throws until the transport
+                lands. For working server calls today, use the REST client.
+            </p>
+            <button onClick={onPing}>Server.ping(10)</button> <button onClick={onReset}>Server.admin.reset()</button>
+            <p>{result}</p>
+            <Toil.Link href="/rest">See the REST demo</Toil.Link> · <Toil.Link href="/">Back home</Toil.Link>
+        </main>
+    );
+}

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

@@ -1,61 +1,61 @@
-import { useState } from 'react';
-
-export const metadata: Toil.Metadata = {
-    title: 'Search',
-    description: 'Search every page by its metadata and jump straight to it.',
-    keywords: ['search', 'find', 'pages', 'metadata']
-};
-
-// A tiny site-wide search box. `usePageSearch` queries the compiler-built index of every page's
-// metadata (title/description/keywords/OpenGraph + static `searchHints` on dynamic routes), returns
-// ranked matches with their route `path`, and `goTo` navigates to whichever one you pick.
-export default function Search() {
-    const [query, setQuery] = useState('');
-    const { results, pages, goTo } = Toil.usePageSearch(query, { includeDynamic: true });
-
-    return (
-        <main>
-            <h1>Search</h1>
-            <p>
-                Type to search across the metadata of all {pages.length} pages, title, description, keywords, and
-                OpenGraph. Indexed at build by <code>client/routes/*</code>.
-            </p>
-
-            <input
-                type="search"
-                value={query}
-                onChange={(e) => {
-                    setQuery(e.target.value);
-                }}
-                placeholder="Search pages… (try “blog”, “features”, “started”)"
-                aria-label="Search pages"
-                autoFocus
-                style={{ width: '100%', padding: '0.6rem 0.8rem', fontSize: '1rem' }}
-            />
-
-            {query.trim() !== '' && (
-                <ul style={{ listStyle: 'none', padding: 0, marginTop: '1rem' }}>
-                    {results.length === 0 && <li>No pages match “{query}”.</li>}
-                    {results.map((r) => (
-                        <li key={r.page.path} style={{ marginBottom: '0.75rem' }}>
-                            <button
-                                type="button"
-                                onClick={() => {
-                                    goTo(r);
-                                }}
-                                disabled={r.page.dynamic}
-                                title={r.page.dynamic ? 'Dynamic route, needs params to open' : undefined}
-                                style={{ textAlign: 'left', cursor: r.page.dynamic ? 'default' : 'pointer' }}>
-                                <strong>{r.page.metadata.title ?? r.page.path}</strong> <code>{r.page.path}</code>
-                                {r.page.metadata.description !== undefined && <div>{r.page.metadata.description}</div>}
-                                <small>
-                                    score {r.score.toFixed(1)} · matched {r.matches.join(', ')}
-                                </small>
-                            </button>
-                        </li>
-                    ))}
-                </ul>
-            )}
-        </main>
-    );
-}
+import { useState } from 'react';
+
+export const metadata: Toil.Metadata = {
+    title: 'Search',
+    description: 'Search every page by its metadata and jump straight to it.',
+    keywords: ['search', 'find', 'pages', 'metadata']
+};
+
+// A tiny site-wide search box. `usePageSearch` queries the compiler-built index of every page's
+// metadata (title/description/keywords/OpenGraph + static `searchHints` on dynamic routes), returns
+// ranked matches with their route `path`, and `goTo` navigates to whichever one you pick.
+export default function Search() {
+    const [query, setQuery] = useState('');
+    const { results, pages, goTo } = Toil.usePageSearch(query, { includeDynamic: true });
+
+    return (
+        <main>
+            <h1>Search</h1>
+            <p>
+                Type to search across the metadata of all {pages.length} pages, title, description, keywords, and
+                OpenGraph. Indexed at build by <code>client/routes/*</code>.
+            </p>
+
+            <input
+                type="search"
+                value={query}
+                onChange={(e) => {
+                    setQuery(e.target.value);
+                }}
+                placeholder="Search pages… (try “blog”, “features”, “started”)"
+                aria-label="Search pages"
+                autoFocus
+                style={{ width: '100%', padding: '0.6rem 0.8rem', fontSize: '1rem' }}
+            />
+
+            {query.trim() !== '' && (
+                <ul style={{ listStyle: 'none', padding: 0, marginTop: '1rem' }}>
+                    {results.length === 0 && <li>No pages match “{query}”.</li>}
+                    {results.map((r) => (
+                        <li key={r.page.path} style={{ marginBottom: '0.75rem' }}>
+                            <button
+                                type="button"
+                                onClick={() => {
+                                    goTo(r);
+                                }}
+                                disabled={r.page.dynamic}
+                                title={r.page.dynamic ? 'Dynamic route, needs params to open' : undefined}
+                                style={{ textAlign: 'left', cursor: r.page.dynamic ? 'default' : 'pointer' }}>
+                                <strong>{r.page.metadata.title ?? r.page.path}</strong> <code>{r.page.path}</code>
+                                {r.page.metadata.description !== undefined && <div>{r.page.metadata.description}</div>}
+                                <small>
+                                    score {r.score.toFixed(1)} · matched {r.matches.join(', ')}
+                                </small>
+                            </button>
+                        </li>
+                    ))}
+                </ul>
+            )}
+        </main>
+    );
+}

package/examples/basic/client/toil.tsx

@@ -1,5 +1,5 @@
-import { routes, layout, notFound, globalError, slots } from 'toiljs/routes';
-
-import './styles/main.css';
-
-Toil.mount(routes, layout, notFound, globalError, slots);
+import { routes, layout, notFound, globalError, slots } from 'toiljs/routes';
+
+import './styles/main.css';
+
+Toil.mount(routes, layout, notFound, globalError, slots);