toiljs 0.0.7 → 0.0.9

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

@@ -4,6 +4,7 @@ const HEX_R = 34;
 const GAP = 3;
 const DRAW_R = HEX_R - GAP;
 const GLOW_DIST = 140;
+const LOGO_SRC = '/images/logo.svg';
 
 function tracePath(ctx: CanvasRenderingContext2D, cx: number, cy: number, r: number) {
     ctx.beginPath();
@@ -43,6 +44,41 @@ function buildGrid(w: number, h: number): Array<{ x: number; y: number }> {
     return hexes;
 }
 
+/** Samples logo colours per hex centre for use in border glow. */
+function buildLogoColors(
+    img: HTMLImageElement,
+    hexes: Array<{ x: number; y: number }>,
+    w: number,
+    h: number,
+): Array<[number, number, number]> | null {
+    const lc = document.createElement('canvas');
+
+    lc.width = w;
+    lc.height = h;
+
+    const lctx = lc.getContext('2d');
+
+    if (!lctx) return null;
+
+    // Draw logo large + blurred, roughly where the hero logo sits in the viewport
+    const size = 700;
+    const cx = w / 2;
+    const cy = h * 0.42;
+
+    lctx.filter = 'blur(90px)';
+    lctx.drawImage(img, cx - size / 2, cy - size / 2, size, size);
+    lctx.filter = 'none';
+
+    // Sample one pixel per hex centre so we can use logo colours for border glow
+    return hexes.map(({ x, y }) => {
+        const px = Math.round(Math.max(0, Math.min(w - 1, x)));
+        const py = Math.round(Math.max(0, Math.min(h - 1, y)));
+        const d = lctx.getImageData(px, py, 1, 1).data;
+
+        return [d[0], d[1], d[2]] as [number, number, number];
+    });
+}
+
 export default function HoneycombBackground() {
     const canvasRef = useRef<HTMLCanvasElement>(null);
     const mouse = useRef({ x: -9999, y: -9999 });
@@ -58,19 +94,42 @@ export default function HoneycombBackground() {
 
         const dpr = window.devicePixelRatio || 1;
         let hexes: Array<{ x: number; y: number }> = [];
+        let hexColors: Array<[number, number, number]> = [];
         let raf: number;
 
+        const img = new Image();
+
+        img.onload = () => {
+            const colors = buildLogoColors(img, hexes, window.innerWidth, window.innerHeight);
+
+            if (colors) {
+                hexColors = colors;
+            }
+        };
+
+        img.src = LOGO_SRC;
+
         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);
+
+            // Rebuild logo colours if image is already loaded
+            if (img.complete && img.naturalWidth > 0) {
+                const colors = buildLogoColors(img, hexes, w, h);
+
+                if (colors) {
+                    hexColors = colors;
+                }
+            }
         }
 
         function draw() {
@@ -78,36 +137,53 @@ export default function HoneycombBackground() {
 
             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) {
+            for (let i = 0; i < hexes.length; i++) {
+                const hex = hexes[i];
+
+                if (!hex) continue;
+
+                const { x, y } = hex;
                 const dist = Math.hypot(x - mx, y - my);
                 const t = Math.max(0, 1 - dist / GLOW_DIST);
                 const ease = t * t * (3 - 2 * t);
 
+                // Base fill
                 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();
-                }
 
+
+                // Base border
+                tracePath(ctx, x, y, DRAW_R);
                 ctx.strokeStyle = 'rgba(255,255,255,0.055)';
                 ctx.lineWidth = 1;
                 ctx.stroke();
 
+                // Glow border using logo-sampled colour
                 if (ease > 0) {
+                    const col = hexColors[i];
+                    const r = col ? col[0] : 120;
+                    const g = col ? col[1] : 180;
+                    const b = col ? col[2] : 255;
+
+                    // If the logo has colour here, use it; otherwise fall back to a soft white
+                    const bright = r + g + b;
+                    const fr = bright > 30 ? r : 120;
+                    const fg = bright > 30 ? g : 180;
+                    const fb = bright > 30 ? b : 255;
+
                     ctx.save();
-                    ctx.shadowColor = `rgba(72,148,255,${ease * 0.2})`;
+                    ctx.shadowColor = `rgba(${fr},${fg},${fb},${ease * 0.25})`;
                     ctx.shadowBlur = 8 * ease;
-                    ctx.strokeStyle = `rgba(120,180,255,${ease * 0.2})`;
-                    ctx.lineWidth = 1 + ease * 0.4;
+                    ctx.strokeStyle = `rgba(${fr},${fg},${fb},${ease * 0.18})`;
+                    ctx.lineWidth = 1 + ease * 0.5;
                     ctx.stroke();
                     ctx.restore();
                 }
@@ -148,15 +224,7 @@ export default function HoneycombBackground() {
     return (
         <canvas
             ref={canvasRef}
-            style={{
-                position: 'fixed',
-                inset: 0,
-                width: '100%',
-                height: '100%',
-                pointerEvents: 'none',
-                zIndex: 0,
-            }}
+            className="honeycomb-canvas"
         />
     );
 }
-

package/examples/basic/client/global-error.tsx

@@ -1,10 +1,10 @@
 // Root error boundary. Unlike a route's `error.tsx`, this sits *outside* the root layout, so it
-// also catches errors thrown while rendering the layout itself — the last line of defense.
+// also catches errors thrown while rendering the layout itself, the last line of defense.
 export default function GlobalError({ error, reset }: Toil.RouteErrorProps) {
     return (
-        <main style={{ padding: 48, fontFamily: 'system-ui', textAlign: 'center' }}>
+        <main className="global-error">
             <h1>Something went wrong</h1>
-            <p style={{ opacity: 0.7 }}>{error.message}</p>
+            <p className="global-error-message">{error.message}</p>
             <button type="button" onClick={reset}>
                 Try again
             </button>

package/examples/basic/client/layout.tsx

@@ -1,13 +1,8 @@
 import { type ReactNode } from 'react';
 import Footer from './components/Footer';
+import Header from './components/Header';
 import HoneycombBackground from './components/HoneycombBackground';
 
-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 className="app">
@@ -17,33 +12,7 @@ export default function Layout({ children }: { children?: ReactNode }) {
                 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>
+            <Header />
 
             <main className="content">{children}</main>
 

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

@@ -1,3 +1,11 @@
+// Declarative per-route SEO, resolved by the router into <title> + <meta>/<link> tags. The root
+// layout's titleTemplate (if any) still applies; component-level useHead/<Head> can override.
+export const metadata: Toil.Metadata = {
+    title: 'About',
+    description: 'About the ToilJS example app.',
+    openGraph: { title: 'About · ToilJS', type: 'website' },
+};
+
 export default function About() {
     return (
         <main>

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

@@ -49,7 +49,7 @@ about.tsx     →  /about
                             <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>
+                        <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>

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

@@ -43,7 +43,14 @@ export default function Home() {
         <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} />
+                <Toil.Image
+                    src="images/logo.svg"
+                    className="hero-logo-img"
+                    alt="ToilJS"
+                    width={96}
+                    height={96}
+                    priority
+                />
             </div>
 
             <h1 className="hero-title">ToilJS</h1>

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

@@ -15,7 +15,7 @@ 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{' '}
+                <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>

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

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

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

@@ -0,0 +1,8 @@
+export default function TestPage() {
+    return (
+        <div className="test-page">
+            <img src="/images/test_image.webp" alt="Test" className="test-page-image" />
+        </div>
+    );
+}
+

package/examples/basic/client/styles/main.css

@@ -291,13 +291,26 @@ a:hover { color: var(--accent3); }
     background: #131d2e;
 }
 
+/* ── Global Error ── */
+.global-error {
+    padding: 3rem;
+    font-family: system-ui;
+    text-align: center;
+}
+
+.global-error-message {
+    opacity: 0.7;
+}
+
 /* ── Footer ── */
 .footer {
-    text-align: center;
     padding: 1.25rem;
     font-size: 0.82rem;
     color: var(--muted);
     border-top: 1px solid var(--border);
+    background: var(--bg);
+    position: relative;
+    z-index: 1;
 }
 
 /* ── Misc ── */
@@ -503,3 +516,37 @@ code {
     .spinner { animation-duration: 0s; }
 }
 
+/* ── Global Error ── */
+.global-error {
+    padding: 3rem;
+    font-family: system-ui;
+    text-align: center;
+}
+
+.global-error-message {
+    opacity: 0.7;
+}
+
+/* ── Test page ── */
+.test-page {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    min-height: 100%;
+}
+
+.test-page-image {
+    max-width: 100%;
+    max-height: 80vh;
+    border-radius: 8px;
+}
+
+/* ── Honeycomb background ── */
+.honeycomb-canvas {
+    position: fixed;
+    inset: 0;
+    width: 100%;
+    height: 100%;
+    pointer-events: none;
+    z-index: 0;
+}

package/package.json

@@ -1,7 +1,7 @@
 {
     "name": "toiljs",
     "type": "module",
-    "version": "0.0.7",
+    "version": "0.0.9",
     "author": "Dacely",
     "description": "todo",
     "engines": {
@@ -95,16 +95,18 @@
         "@btc-vision/as-loader": "^0.0.0",
         "@btc-vision/hyper-express": "^6.17.4",
         "@clack/prompts": "^1.5.0",
-        "@eslint-react/eslint-plugin": "^4.2.3",
+        "@eslint-react/eslint-plugin": "^5.8.8",
         "@eslint/js": "^10.0.1",
         "@typescript-eslint/utils": "^8.60.0",
         "@vitejs/plugin-react": "^6.0.2",
-        "eslint-plugin-react-hooks": "^7.1.0-canary-ab18f33d-20260220",
+        "eslint-plugin-react-hooks": "^7.1.1",
         "eslint-plugin-react-refresh": "^0.5.2",
         "picocolors": "^1.1.1",
+        "sharp": "^0.34.5",
         "toilscript": "^0.1.4",
         "typescript-eslint": "^8.60.0",
         "vite": "^8.0.14",
+        "vite-imagetools": "^10.0.0",
         "vite-plugin-node-polyfills": "^0.28.0"
     },
     "peerDependencies": {
@@ -131,10 +133,10 @@
         "@types/react-dom": "^19.2.3",
         "@vitest/coverage-v8": "^4.1.7",
         "@vitest/ui": "^4.1.7",
-        "eslint": "^10.2.0",
-        "jsdom": "^26.1.0",
+        "eslint": "^10.4.1",
+        "jsdom": "^29.1.1",
         "micromatch": "^4.0.8",
-        "prettier": "^3.8.1",
+        "prettier": "^3.8.3",
         "react": "^19.2.6",
         "react-dom": "^19.2.6",
         "typedoc": "^0.28.19",

package/presets/eslint.js

@@ -30,12 +30,15 @@ export default tseslint.config(
         },
         rules: {
             ...reactHooks.configs.recommended.rules,
-            // Route files conventionally export a `loader` alongside the default component; the toil
-            // compiler consumes it at runtime. Allow it (plus primitive constants) so Fast Refresh
-            // doesn't flag the pattern.
+            // Route files conventionally export `loader` / `revalidate` / `metadata` /
+            // `generateMetadata` alongside the default component; the toil compiler consumes them at
+            // runtime. Allow them (plus primitive constants) so Fast Refresh doesn't flag the pattern.
             'react-refresh/only-export-components': [
                 'warn',
-                { allowConstantExport: true, allowExportNames: ['loader'] },
+                {
+                    allowConstantExport: true,
+                    allowExportNames: ['loader', 'revalidate', 'metadata', 'generateMetadata'],
+                },
             ],
             'no-undef': 'off',
             '@typescript-eslint/no-unused-vars': 'off',

package/presets/tsconfig.json

@@ -1,4 +1,4 @@
-// toiljs shared client tsconfig — opinionated, strict.
+// toiljs shared client tsconfig, opinionated, strict.
 // Extend it from your project: { "extends": "toiljs/tsconfig", "include": ["client", ".toil"] }
 {
     "compilerOptions": {

package/src/backend/index.ts

@@ -1,5 +1,5 @@
 /**
- * toiljs backend — the self-host / dev server, built on @btc-vision/hyper-express (uWebSockets.js)
+ * toiljs backend, the self-host / dev server, built on @btc-vision/hyper-express (uWebSockets.js)
  * for very high throughput. It serves the built client (static assets + SPA fallback) and exposes
  * a WebSocket channel for realtime / live updates.
  *