toiljs 0.0.10 → 0.0.11

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

@@ -0,0 +1,67 @@
+// Mutations: a `loader` reads, an action writes, then revalidation refetches the loader so the UI
+// reflects the new state with no manual refetch. Here a module-level counter stands in for a server.
+let serverCount = 0;
+async function wait(ms: number): Promise<void> {
+    return new Promise((resolve) => setTimeout(resolve, ms));
+}
+
+export const metadata: Toil.Metadata = {
+    title: 'Actions and forms',
+    description: 'useAction and <Form> mutations with pending state and revalidation.',
+};
+
+export const loader = async () => {
+    await wait(150);
+    return { count: serverCount };
+};
+
+export default function ActionsDemo() {
+    const { count } = Toil.useLoaderData(loader);
+
+    // useAction: run a mutation, track pending/error, then revalidate this route's loader on success.
+    const increment = Toil.useAction(
+        async (by: number) => {
+            await wait(400);
+            serverCount += by;
+            return serverCount;
+        },
+        { revalidate: true },
+    );
+
+    return (
+        <main>
+            <h1>Actions and forms</h1>
+            <p>
+                Server count (from the loader): <strong>{count}</strong>
+            </p>
+
+            <p>
+                <button type="button" disabled={increment.pending} onClick={() => void increment.run(1)}>
+                    {increment.pending ? 'Saving' : 'Increment via useAction'}
+                </button>
+                {increment.error ? <span style={{ color: 'crimson' }}> failed</span> : null}
+            </p>
+
+            {/* The declarative form: submits to an action, revalidates on success, exposes pending. */}
+            <Toil.Form
+                action={async (form) => {
+                    await wait(400);
+                    serverCount += Number(form.get('by') || 0);
+                }}
+                revalidate>
+                {({ pending }) => (
+                    <>
+                        <input name="by" type="number" defaultValue={5} disabled={pending} />
+                        <button type="submit" disabled={pending}>
+                            {pending ? 'Saving' : 'Add via <Form>'}
+                        </button>
+                    </>
+                )}
+            </Toil.Form>
+
+            <p>
+                <Toil.Link href="/features">Back to features</Toil.Link>
+            </p>
+        </main>
+    );
+}

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

@@ -0,0 +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>
+    );
+}

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

@@ -0,0 +1,27 @@
+import { useState } from 'react';
+
+export const metadata: Toil.Metadata = { title: 'Error boundary' };
+
+// When a route throws during render, the nearest `error.tsx` catches it and renders instead of a
+// blank screen. Click the button to flip into a throwing render and watch error.tsx take over.
+export default function ErrorDemo() {
+    const [boom, setBoom] = useState(false);
+    if (boom) throw new Error('Kaboom from features/error, caught by error.tsx');
+    return (
+        <main>
+            <h1>Error boundary</h1>
+            <p>
+                A thrown render is caught by <code>error.tsx</code> in this folder, scoped to this
+                segment so the rest of the app keeps working.
+            </p>
+            <p>
+                <button type="button" onClick={() => setBoom(true)}>
+                    Throw an error
+                </button>
+            </p>
+            <p>
+                <Toil.Link href="/features">Back to features</Toil.Link>
+            </p>
+        </main>
+    );
+}

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

@@ -0,0 +1,38 @@
+import { useState } from 'react';
+
+// The imperative head API, for when the title or tags depend on component state rather than a static
+// export. `useTitle` / `useHead` apply for the component's lifetime and revert on unmount; `<Toil.Head>`
+// is the declarative form. They compose with (and can override) the route `metadata`.
+export default function HeadDemo() {
+    const [count, setCount] = useState(0);
+
+    // Live title: the tab updates every render as `count` changes.
+    Toil.useTitle(`Clicked ${count} times`);
+
+    // Add a meta tag and a canonical link for this page only.
+    Toil.useHead({
+        meta: [{ name: 'description', content: `Imperative head demo, clicked ${count} times.` }],
+        link: [{ rel: 'canonical', href: 'https://toil.example/features/head' }],
+    });
+
+    return (
+        <main>
+            <h1>Imperative head</h1>
+            <p>
+                The tab title is driven by component state via <code>Toil.useTitle</code>. Click the
+                button and watch it change, then leave the page and the title reverts.
+            </p>
+            <p>
+                <button type="button" onClick={() => setCount((c) => c + 1)}>
+                    Clicked {count} times
+                </button>
+            </p>
+            {/* Declarative equivalent, the same merge rules apply. */}
+            <Toil.Head meta={[{ property: 'og:title', content: `Clicked ${count} times` }]} />
+            <p>
+                <Toil.Link href="/features/seo">Compare with route metadata</Toil.Link>{' '}
+                <Toil.Link href="/features">Back to features</Toil.Link>
+            </p>
+        </main>
+    );
+}

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

@@ -0,0 +1,75 @@
+// The feature hub: one place that links to a live demo of every ToilJS capability. Its own tab
+// title comes from the `metadata` export below (rendered as "Features | ToilJS" via the layout
+// template) and is baked into build/client/features/index.html at build time.
+export const metadata: Toil.Metadata = {
+    title: 'Features',
+    description: 'Live demos of every ToilJS feature: routing, data, head/SEO, components, realtime, and binary IO.',
+    openGraph: { title: 'Every ToilJS feature, demoed', type: 'website' },
+};
+
+const groups: { heading: string; items: { href: Toil.Href; label: string; note: string }[] }[] = [
+    {
+        heading: 'Routing',
+        items: [
+            { href: '/blog/42', label: 'Dynamic route', note: 'blog/[id].tsx, /blog/42' },
+            { href: '/docs/getting/started', label: 'Catch-all', note: 'docs/[...slug].tsx' },
+            { href: '/files', label: 'Optional catch-all', note: 'files/[[...slug]].tsx, matches /files and /files/a/b' },
+            { href: '/privacy', label: 'Route group', note: '(legal)/privacy.tsx, no URL segment' },
+            { href: '/gallery', label: 'Parallel + intercepting', note: '@modal/(.)photo/[id], a real modal route' },
+            { href: '/features/template', label: 'Templates', note: 'template.tsx remounts on every navigation' },
+            { href: '/features/error', label: 'Error boundary', note: 'error.tsx catches a thrown route' },
+        ],
+    },
+    {
+        heading: 'Data',
+        items: [
+            { href: '/loader-demo', label: 'Loader + revalidate', note: 'data before render, cached, refetchable' },
+            { href: '/features/actions', label: 'Actions + Form', note: 'useAction / <Form>, pending state, revalidate' },
+        ],
+    },
+    {
+        heading: 'Head and SEO',
+        items: [
+            { href: '/features/seo', label: 'Route metadata', note: 'export const metadata, title override' },
+            { href: '/features/head', label: 'Imperative head', note: 'useTitle / useHead / <Head>' },
+        ],
+    },
+    {
+        heading: 'Components and runtime',
+        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' },
+        ],
+    },
+];
+
+export default function Features() {
+    return (
+        <main>
+            <h1>Every feature, live</h1>
+            <p>
+                Each link is a working demo served from <code>client/routes/</code>. Watch the tab
+                title change as you navigate, that is the per-route <code>metadata</code> at work.
+            </p>
+            {groups.map((g) => (
+                <section key={g.heading} style={{ marginTop: 24 }}>
+                    <h2 style={{ fontSize: '1rem', opacity: 0.7 }}>{g.heading}</h2>
+                    <ul style={{ display: 'grid', gap: 8, listStyle: 'none', padding: 0 }}>
+                        {g.items.map((it) => (
+                            <li key={it.href}>
+                                <Toil.Link href={it.href} style={{ fontWeight: 600 }}>
+                                    {it.label}
+                                </Toil.Link>
+                                <span style={{ opacity: 0.6 }}> , {it.note}</span>
+                            </li>
+                        ))}
+                    </ul>
+                </section>
+            ))}
+            <p style={{ marginTop: 24 }}>
+                <Toil.Link href="/">Back home</Toil.Link>
+            </p>
+        </main>
+    );
+}

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

@@ -0,0 +1,32 @@
+export const metadata: Toil.Metadata = {
+    title: 'Realtime',
+    description: 'A typed WebSocket channel to the server with connect, reconnect, and message decoding.',
+};
+
+// Toil.useChannel opens a WebSocket to the server (default path /_toil), tracks `connected`, collects
+// `messages`, and exposes `send`. It reconnects automatically. With no server socket running the demo
+// simply shows "disconnected", the API is the same once the server handles the channel.
+export default function RealtimeDemo() {
+    const chat = Toil.useChannel({ path: '/_toil' });
+    return (
+        <main>
+            <h1>Realtime</h1>
+            <p>
+                Connection: <strong>{chat.connected ? 'connected' : 'disconnected'}</strong>, messages
+                received: <strong>{chat.messages.length}</strong>.
+            </p>
+            <p>
+                <button type="button" onClick={() => chat.send('ping')}>
+                    Send ping
+                </button>
+            </p>
+            <p style={{ opacity: 0.6 }}>
+                <code>const chat = Toil.useChannel({'{'} path: '/_toil' {'}'})</code>, connect, reconnect,
+                and decoding are handled for you.
+            </p>
+            <p>
+                <Toil.Link href="/features">Back to features</Toil.Link>
+            </p>
+        </main>
+    );
+}

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

@@ -0,0 +1,31 @@
+import { useState } from 'react';
+
+export const metadata: Toil.Metadata = {
+    title: 'Script',
+    description: 'Load third-party scripts with a strategy, deduplicated so they never run twice.',
+};
+
+// Toil.Script injects an external or inline script once (deduped by src/id), with a load strategy.
+// `onReady` fires when it has loaded. Here we load a tiny public script and report when it is ready.
+export default function ScriptDemo() {
+    const [ready, setReady] = useState(false);
+    return (
+        <main>
+            <h1>Script</h1>
+            <p>
+                <code>Toil.Script</code> loads external scripts with a <code>strategy</code>{' '}
+                (<code>afterInteractive</code>, <code>lazyOnload</code>, <code>beforeInteractive</code>)
+                and dedupes them, so the same script never runs twice across navigations.
+            </p>
+            <Toil.Script
+                src="https://cdn.jsdelivr.net/npm/canvas-confetti@1.9.3/dist/confetti.browser.min.js"
+                strategy="afterInteractive"
+                onReady={() => setReady(true)}
+            />
+            <p>Status: {ready ? 'script ready' : 'loading'}</p>
+            <p>
+                <Toil.Link href="/features">Back to features</Toil.Link>
+            </p>
+        </main>
+    );
+}

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

@@ -0,0 +1,39 @@
+// Route metadata: the declarative way to set this page's <title>, description, OpenGraph, and more.
+// The router applies it before paint and the build bakes it into static HTML for crawlers.
+//
+// This route sets its OWN `titleTemplate: '%s'`, which overrides the layout's "%s | ToilJS" template,
+// so the tab reads exactly "useReducer | React Hooks" with no site suffix. Drop the titleTemplate
+// line and the same title renders as "useReducer | React Hooks | ToilJS".
+export const metadata: Toil.Metadata = {
+    title: 'useReducer | React Hooks',
+    titleTemplate: '%s',
+    description: 'Manage complex state transitions with a reducer function using the useReducer hook.',
+    keywords: ['react', 'hooks', 'useReducer', 'state'],
+    canonical: 'https://toil.example/features/seo',
+    openGraph: {
+        title: 'useReducer | React Hooks',
+        description: 'Manage complex state transitions with a reducer.',
+        type: 'website',
+    },
+};
+
+export default function SeoDemo() {
+    return (
+        <main>
+            <h1>Route metadata</h1>
+            <p>
+                The browser tab now reads <strong>useReducer | React Hooks</strong>, set entirely by
+                the <code>metadata</code> export in <code>client/routes/features/seo.tsx</code>, with
+                no <code>useEffect</code> and no title suffix.
+            </p>
+            <p>
+                It also emitted <code>&lt;meta name="description"&gt;</code>, keywords, a canonical
+                link, and the <code>og:*</code> tags, all from that one object.
+            </p>
+            <p>
+                <Toil.Link href="/features/head">Prefer the imperative API?</Toil.Link>{' '}
+                <Toil.Link href="/features">Back to features</Toil.Link>
+            </p>
+        </main>
+    );
+}

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

@@ -0,0 +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>
+    );
+}

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

@@ -0,0 +1,20 @@
+export const metadata: Toil.Metadata = { title: 'Templates' };
+
+export default function TemplateDemo() {
+    return (
+        <main>
+            <h1>Templates</h1>
+            <p>
+                The line above is rendered by <code>template.tsx</code>. Bounce between these two links
+                and watch the mount number climb, the template remounts on every navigation.
+            </p>
+            <p>
+                <Toil.Link href="/features/template">This page</Toil.Link>{' '}
+                <Toil.Link href="/features/template/b">Sibling page</Toil.Link>
+            </p>
+            <p>
+                <Toil.Link href="/features">Back to features</Toil.Link>
+            </p>
+        </main>
+    );
+}

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

@@ -0,0 +1,18 @@
+import { useState, type ReactNode } from 'react';
+
+// A template wraps a segment like a layout, but RE-MOUNTS on every navigation within it (a layout
+// persists). This counter increments each time the template mounts, so navigating between the two
+// child links below bumps it, proving the remount. Swap this file for `layout.tsx` and the number
+// would hold steady instead.
+let mounts = 0;
+export default function PlaygroundTemplate({ children }: { children?: ReactNode }) {
+    const [mountId] = useState(() => ++mounts);
+    return (
+        <div>
+            <p style={{ opacity: 0.6 }}>
+                template mount #{mountId} (it increments on every navigation here)
+            </p>
+            {children}
+        </div>
+    );
+}

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

@@ -0,0 +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>
+    );
+}

package/examples/basic/client/routes/gallery/@modal/(.)photo/[id].tsx

@@ -0,0 +1,23 @@
+// Intercepting route: `(.)photo/[id]` inside the `@modal` slot catches a soft navigation to
+// /gallery/photo/:id and renders here instead, as an overlay, while the gallery stays mounted behind
+// it. On a hard reload the interception does not apply and the full photo/[id].tsx page renders.
+export default function PhotoModal() {
+    const { id } = Toil.useParams();
+    return (
+        <div
+            style={{
+                position: 'fixed',
+                inset: 0,
+                background: 'rgba(0,0,0,0.6)',
+                display: 'grid',
+                placeItems: 'center',
+                zIndex: 50,
+            }}>
+            <div style={{ background: 'var(--bg, #0b0f14)', padding: 24, borderRadius: 12, minWidth: 240 }}>
+                <h2>Photo {id}</h2>
+                <p>This is the intercepted modal view (soft navigation).</p>
+                <Toil.Link href="/gallery">Close</Toil.Link>
+            </div>
+        </div>
+    );
+}

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

@@ -0,0 +1,42 @@
+export const metadata: Toil.Metadata = {
+    title: 'Gallery',
+    description: 'Parallel routes and intercepting routes: a photo opens as a modal on soft nav.',
+};
+
+const photos = [1, 2, 3, 4];
+
+// Clicking a photo soft-navigates to /gallery/photo/:id. The intercepting route @modal/(.)photo/[id]
+// catches that on soft nav and shows it as a modal over this grid. A hard reload of the same URL
+// renders the full page (photo/[id].tsx) instead, deep links still work.
+export default function Gallery() {
+    return (
+        <main>
+            <h1>Gallery</h1>
+            <p>
+                Click a photo, it opens as a modal (intercepting route). Reload that URL and you get
+                the full page. Same URL, two presentations.
+            </p>
+            <div style={{ display: 'flex', gap: 12, flexWrap: 'wrap' }}>
+                {photos.map((id) => (
+                    <Toil.Link
+                        key={id}
+                        href={`/gallery/photo/${id}`}
+                        style={{
+                            width: 88,
+                            height: 88,
+                            display: 'grid',
+                            placeItems: 'center',
+                            border: '1px solid currentColor',
+                            borderRadius: 8,
+                            fontWeight: 700,
+                        }}>
+                        {id}
+                    </Toil.Link>
+                ))}
+            </div>
+            <p style={{ marginTop: 16 }}>
+                <Toil.Link href="/features">Back to features</Toil.Link>
+            </p>
+        </main>
+    );
+}

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

@@ -0,0 +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>
+    );
+}

package/examples/basic/client/routes/gallery/photo/[id].tsx

@@ -0,0 +1,18 @@
+export const generateMetadata: Toil.GenerateMetadata = ({ params }) => ({
+    title: `Photo ${params.id}`,
+});
+
+// The full page for a photo, shown on a hard load or deep link to /gallery/photo/:id.
+export default function PhotoPage() {
+    const { id } = Toil.useParams();
+    return (
+        <main>
+            <h1>Photo {id}</h1>
+            <p>
+                Full page at <code>gallery/photo/[id].tsx</code>. Reached directly (reload or deep
+                link), not intercepted.
+            </p>
+            <Toil.Link href="/gallery">Back to gallery</Toil.Link>
+        </main>
+    );
+}

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

@@ -1,3 +1,12 @@
+// 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" />
@@ -42,9 +51,9 @@ 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} />
+                <img src="/images/logo.svg" className="hero-logo-glow" alt="" aria-hidden="true" width={96} height={96} />
                 <Toil.Image
-                    src="images/logo.svg"
+                    src="/images/logo.svg"
                     className="hero-logo-img"
                     alt="ToilJS"
                     width={96}

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

@@ -25,7 +25,7 @@ export default function LoaderDemo() {
             <h1>Loader demo</h1>
             <p>
                 Data loaded before render (no <code>useEffect</code>): <code>{data.loadedAt}</code>
-                {data.q !== null ? ` · q=${data.q}` : ''}
+                {data.q !== null ? `, q=${data.q}` : ''}
             </p>
             <p>
                 <button type="button" onClick={() => { router.revalidate(); }}>
@@ -33,13 +33,15 @@ export default function LoaderDemo() {
                 </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')); }}>
+                `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'}
+                            {pending ? 'Saving' : 'Save & revalidate'}
                         </button>
                     </>
                 )}

package/examples/basic/client/toil.tsx

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

package/package.json

@@ -1,9 +1,9 @@
 {
     "name": "toiljs",
     "type": "module",
-    "version": "0.0.10",
+    "version": "0.0.11",
     "author": "Dacely",
-    "description": "todo",
+    "description": "Full-stack TypeScript framework: a file-based React app with a toilscript-compiled WebAssembly server.",
     "engines": {
         "node": ">=24.0.0"
     },
@@ -136,6 +136,7 @@
         "eslint": "^10.4.1",
         "jsdom": "^29.1.1",
         "micromatch": "^4.0.8",
+        "playwright": "^1.60.0",
         "prettier": "^3.8.3",
         "react": "^19.2.6",
         "react-dom": "^19.2.6",

package/src/cli/create.ts

@@ -269,10 +269,10 @@ function minimalClient(name: string, features: StyleFeatures): Record<string, st
             ) + '\n',
         'client/public/images/.gitkeep': '# Place images and other static assets here; served at /images/*.\n',
         'client/toil.tsx':
-            "import { routes, layout, notFound, globalError } from 'toiljs/routes';\n\n" +
+            "import { routes, layout, notFound, globalError, slots } from 'toiljs/routes';\n\n" +
             styleImportLines(features).join('\n') +
             '\n\n' +
-            'Toil.mount(routes, layout, notFound, globalError);\n',
+            'Toil.mount(routes, layout, notFound, globalError, slots);\n',
         [`client/${styleEntry(features.preprocessor)}`]: DEFAULT_STYLE_CONTENT,
         'client/components/.gitkeep': '# Place shared React components here.\n',
         'client/layout.tsx': `import { type ReactNode } from 'react';