toiljs 0.0.11 → 0.0.12

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

@@ -1,39 +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>
-    );
-}
+// 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/index.tsx

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

@@ -1,18 +1,16 @@
-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>
-    );
-}
+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/gallery/@modal/(.)photo/[id].tsx

@@ -1,23 +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>
-    );
-}
+// 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

@@ -1,42 +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>
-    );
-}
+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/photo/[id].tsx

@@ -1,18 +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>
-    );
-}
+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/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>
+    );
+}