toiljs 0.0.4 → 0.0.6

package/examples/basic/client/components/Footer.tsx

@@ -0,0 +1,8 @@
+export default function Footer() {
+    return (
+        <footer className="footer">
+            Built with ToilJS · Powered by Dacely
+        </footer>
+    );
+}
+

package/examples/basic/client/components/HoneycombBackground.tsx

@@ -0,0 +1,162 @@
+import { useRef, useEffect } from 'react';
+
+const HEX_R = 34;
+const GAP = 3;
+const DRAW_R = HEX_R - GAP;
+const GLOW_DIST = 140;
+
+function tracePath(ctx: CanvasRenderingContext2D, cx: number, cy: number, r: number) {
+    ctx.beginPath();
+
+    for (let i = 0; i < 6; i++) {
+        const a = (Math.PI / 3) * i - Math.PI / 6;
+        const x = cx + r * Math.cos(a);
+        const y = cy + r * Math.sin(a);
+
+        if (i === 0) {
+            ctx.moveTo(x, y);
+        } else {
+            ctx.lineTo(x, y);
+        }
+    }
+
+    ctx.closePath();
+}
+
+function buildGrid(w: number, h: number): Array<{ x: number; y: number }> {
+    const colW = Math.sqrt(3) * HEX_R;
+
+    const rowH = HEX_R * 1.5;
+    const cols = Math.ceil(w / colW) + 2;
+    const rows = Math.ceil(h / rowH) + 2;
+    const hexes: Array<{ x: number; y: number }> = [];
+
+    for (let row = -1; row < rows; row++) {
+        for (let col = -1; col < cols; col++) {
+            hexes.push({
+                x: col * colW + (row % 2 !== 0 ? colW / 2 : 0),
+                y: row * rowH,
+            });
+        }
+    }
+
+    return hexes;
+}
+
+export default function HoneycombBackground() {
+    const canvasRef = useRef<HTMLCanvasElement>(null);
+    const mouse = useRef({ x: -9999, y: -9999 });
+
+    useEffect(() => {
+        const canvas = canvasRef.current;
+
+        if (!canvas) return;
+
+        const ctx = canvas.getContext('2d');
+
+        if (!ctx) return;
+
+        const dpr = window.devicePixelRatio || 1;
+        let hexes: Array<{ x: number; y: number }> = [];
+        let raf: number;
+
+        function resize() {
+            if (!canvas || !ctx) return;
+
+            const w = window.innerWidth;
+            const h = window.innerHeight;
+            canvas.width = w * dpr;
+            canvas.height = h * dpr;
+            canvas.style.width = `${w}px`;
+            canvas.style.height = `${h}px`;
+            ctx.setTransform(dpr, 0, 0, dpr, 0, 0);
+            hexes = buildGrid(w, h);
+        }
+
+        function draw() {
+            if (!ctx) return;
+
+            const w = window.innerWidth;
+            const h = window.innerHeight;
+            ctx.clearRect(0, 0, w, h);
+
+            const mx = mouse.current.x;
+            const my = mouse.current.y;
+
+            for (const { x, y } of hexes) {
+                const dist = Math.hypot(x - mx, y - my);
+                const t = Math.max(0, 1 - dist / GLOW_DIST);
+                const ease = t * t * (3 - 2 * t);
+
+                tracePath(ctx, x, y, DRAW_R);
+
+                ctx.fillStyle = 'rgba(255,255,255,0.018)';
+                ctx.fill();
+
+                if (ease > 0) {
+                    ctx.fillStyle = `rgba(72,148,255,${ease * 0.025})`;
+                    ctx.fill();
+                }
+
+                ctx.strokeStyle = 'rgba(255,255,255,0.055)';
+                ctx.lineWidth = 1;
+                ctx.stroke();
+
+                if (ease > 0) {
+                    ctx.save();
+                    ctx.shadowColor = `rgba(72,148,255,${ease * 0.2})`;
+                    ctx.shadowBlur = 8 * ease;
+                    ctx.strokeStyle = `rgba(120,180,255,${ease * 0.2})`;
+                    ctx.lineWidth = 1 + ease * 0.4;
+                    ctx.stroke();
+                    ctx.restore();
+                }
+            }
+
+            raf = requestAnimationFrame(draw);
+        }
+
+        resize();
+        draw();
+
+        const onResize = () => {
+            cancelAnimationFrame(raf);
+            resize();
+            draw();
+        };
+
+        const onMove = (e: MouseEvent) => {
+            mouse.current = { x: e.clientX, y: e.clientY };
+        };
+
+        const onLeave = () => {
+            mouse.current = { x: -9999, y: -9999 };
+        };
+
+        window.addEventListener('resize', onResize);
+        window.addEventListener('mousemove', onMove);
+        document.addEventListener('mouseleave', onLeave);
+
+        return () => {
+            cancelAnimationFrame(raf);
+            window.removeEventListener('resize', onResize);
+            window.removeEventListener('mousemove', onMove);
+            document.removeEventListener('mouseleave', onLeave);
+        };
+    }, []);
+
+    return (
+        <canvas
+            ref={canvasRef}
+            style={{
+                position: 'fixed',
+                inset: 0,
+                width: '100%',
+                height: '100%',
+                pointerEvents: 'none',
+                zIndex: 0,
+            }}
+        />
+    );
+}
+

package/examples/basic/client/layout.tsx

@@ -1,36 +1,53 @@
 import { type ReactNode } from 'react';
+import Footer from './components/Footer';
+import HoneycombBackground from './components/HoneycombBackground';
 
-import { Link } from 'toiljs/client';
-
-const styles = `
-  :root { color-scheme: dark; }
-  body { margin: 0; background: #080D11; color: #F5F6FA; font-family: system-ui, -apple-system, sans-serif; line-height: 1.6; }
-  a { color: #2563FF; text-decoration: none; }
-  a:hover { color: #22E3AB; }
-  code { background: #11161f; color: #22E3AB; padding: 0.1rem 0.4rem; border-radius: 4px; font-size: 0.9em; }
-  h1 { background: linear-gradient(90deg, #2563FF, #7C3AED, #22E3AB); -webkit-background-clip: text; background-clip: text; color: transparent; }
-`;
+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>
+);
 
 export default function Layout({ children }: { children?: ReactNode }) {
     return (
-        <div style={{ maxWidth: 680, margin: '0 auto', padding: '3rem 1.5rem' }}>
-            <style>{styles}</style>
-            <header
-                style={{
-                    display: 'flex',
-                    gap: '1rem',
-                    alignItems: 'baseline',
-                    borderBottom: '1px solid #1b2330',
-                    paddingBottom: '0.75rem',
-                    marginBottom: '1.5rem',
-                }}>
-                <strong style={{ color: '#2563FF', fontSize: '1.1rem' }}>Toil</strong>
-                <nav style={{ display: 'flex', gap: '1rem' }}>
-                    <Link href="/">home</Link>
-                    <Link href="/about">about</Link>
+        <div className="app">
+            <HoneycombBackground />
+            <Toil.Head
+                titleTemplate="%s By Dacely"
+                title="ToilJS"
+                meta={[{ name: 'description', content: 'The most performant React framework.' }]}
+            />
+            <header className="nav">
+                <Toil.Link href="/" className="nav-logo">
+                    <img src="images/logo.svg" alt="ToilJS" width={28} height={28} />
+                    <span>ToilJS</span>
+                </Toil.Link>
+
+                <nav className="nav-center">
+                    <Toil.NavLink href="/" end className="nav-center-link">
+                        Home
+                    </Toil.NavLink>
+                    <Toil.NavLink href="/get-started" className="nav-center-link">
+                        Get Started
+                    </Toil.NavLink>
+                </nav>
+
+                <nav className="nav-links">
+                    <Toil.Link href="https://toil.org/docs">Docs</Toil.Link>
+                    <a
+                        href="https://github.com/btc-vision/toiljs"
+                        target="_blank"
+                        rel="noopener noreferrer"
+                        className="nav-github">
+                        <GitHubIcon />
+                        GitHub
+                    </a>
                 </nav>
             </header>
-            {children}
+
+            <main className="content">{children}</main>
+
+            <Footer />
         </div>
     );
 }

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

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

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

@@ -0,0 +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"/>
+</svg>

package/examples/basic/client/public/index.html

@@ -0,0 +1,16 @@
+<!doctype html>
+<html lang="en">
+    <head>
+        <meta charset="utf-8" />
+        <meta name="viewport" content="width=device-width, initial-scale=1" />
+        <meta name="theme-color" content="#080D11" />
+        <link rel="icon" type="image/x-icon" href="/favicon.ico" />
+        <title>ToilJS By Dacely</title>
+        <link rel="preconnect" href="https://fonts.googleapis.com" />
+        <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
+        <link href="https://fonts.googleapis.com/css2?family=Montserrat:wght@700;800;900&display=swap" rel="stylesheet" />
+    </head>
+    <body>
+        <div id="root"></div>
+    </body>
+</html>

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

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

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

@@ -1,5 +1,3 @@
-import { Link } from 'toiljs/client';
-
 export default function About() {
     return (
         <main>
@@ -7,7 +5,7 @@ export default function About() {
             <p>
                 This page is served by <code>client/routes/about.tsx</code>.
             </p>
-            <Link href="/">Back home</Link>
+            <Toil.Link href="/">Back home</Toil.Link>
         </main>
     );
 }

package/examples/basic/client/routes/blog/[id].tsx

@@ -1,14 +1,12 @@
-import { Link, useParams } from 'toiljs/client';
-
 export default function BlogPost() {
-    const { id } = useParams();
+    const { id } = Toil.useParams();
     return (
         <main>
             <h1>Blog post {id}</h1>
             <p>
                 Dynamic route from <code>client/routes/blog/[id].tsx</code>.
             </p>
-            <Link href="/">Back home</Link>
+            <Toil.Link href="/">Back home</Toil.Link>
         </main>
     );
 }

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

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

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

@@ -0,0 +1,84 @@
+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,13 +1,80 @@
-import { Link } from 'toiljs/client';
+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 (
-        <main>
-            <h1>Welcome to Toil</h1>
-            <p>File-based routing, bundled by Vite, zero config.</p>
-            <p>
-                <Link href="/about">About</Link> · <Link href="/blog/42">Blog post 42</Link>
+        <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-img" alt="ToilJS" width={96} height={96} />
+            </div>
+
+            <h1 className="hero-title">ToilJS</h1>
+
+            <p className="hero-tagline">
+                Next-gen React.<br />
+                <span>Zero config.</span>
             </p>
-        </main>
+
+            <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/io.tsx

@@ -1,7 +1,3 @@
-import { Link } from 'toiljs/client';
-
-// Note: BinaryWriter / BinaryReader / FastMap / FastSet are NATIVE globals in a toil app —
-// no import needed. They're injected at runtime and typed via the generated .toil/toil-env.d.ts.
 export default function IoDemo() {
     const writer = new BinaryWriter();
     writer.writeU32(42);
@@ -19,10 +15,10 @@ export default function IoDemo() {
         <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}.
+                <code>new BinaryWriter()</code> with no import — round-tripped {n} and &quot;{s}&quot; through{' '}
+                {bytes.length} bytes; FastSet size {seen.size}.
             </p>
-            <Link href="/">Back home</Link>
+            <Toil.Link href="/">Back home</Toil.Link>
         </main>
     );
 }