toiljs 0.0.3 → 0.0.5

package/examples/basic/build/client/assets/routes-BYWn6TxK.js

@@ -0,0 +1 @@
+import{r as e}from"./react-DEQrz1q7.js";var t=e(),n=()=>(0,t.jsx)(`svg`,{width:`18`,height:`18`,viewBox:`0 0 24 24`,fill:`currentColor`,"aria-hidden":`true`,children:(0,t.jsx)(`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`})}),r={hmr:(0,t.jsx)(`svg`,{width:`16`,height:`16`,viewBox:`0 0 24 24`,fill:`none`,stroke:`currentColor`,strokeWidth:`2`,strokeLinecap:`round`,strokeLinejoin:`round`,children:(0,t.jsx)(`polygon`,{points:`13 2 3 14 12 14 11 22 21 10 12 10 13 2`})}),routing:(0,t.jsx)(`svg`,{width:`16`,height:`16`,viewBox:`0 0 24 24`,fill:`none`,stroke:`currentColor`,strokeWidth:`2`,strokeLinecap:`round`,strokeLinejoin:`round`,children:(0,t.jsx)(`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`})}),typescript:(0,t.jsxs)(`svg`,{width:`16`,height:`16`,viewBox:`0 0 24 24`,fill:`currentColor`,children:[(0,t.jsx)(`rect`,{x:`2`,y:`2`,width:`20`,height:`20`,rx:`3`,fill:`currentColor`}),(0,t.jsx)(`path`,{d:`M13.5 12H15.5V18H17V12H19V10.5H13.5V12Z`,fill:`var(--bg)`}),(0,t.jsx)(`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)`})]}),builds:(0,t.jsxs)(`svg`,{width:`16`,height:`16`,viewBox:`0 0 24 24`,fill:`none`,stroke:`currentColor`,strokeWidth:`2`,strokeLinecap:`round`,strokeLinejoin:`round`,children:[(0,t.jsx)(`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`}),(0,t.jsx)(`polyline`,{points:`3.27 6.96 12 12.01 20.73 6.96`}),(0,t.jsx)(`line`,{x1:`12`,y1:`22.08`,x2:`12`,y2:`12`})]})},i=[{icon:r.hmr,label:`Instant HMR`},{icon:r.routing,label:`File Routing`},{icon:r.typescript,label:`TypeScript`},{icon:r.builds,label:`Optimized Builds`}];function a(){return(0,t.jsxs)(`section`,{className:`hero`,children:[(0,t.jsxs)(`div`,{className:`hero-logo`,children:[(0,t.jsx)(`img`,{src:`images/logo.svg`,className:`hero-logo-glow`,alt:``,"aria-hidden":`true`,width:96,height:96}),(0,t.jsx)(`img`,{src:`images/logo.svg`,className:`hero-logo-img`,alt:`ToilJS`,width:96,height:96})]}),(0,t.jsx)(`h1`,{className:`hero-title`,children:`ToilJS`}),(0,t.jsxs)(`p`,{className:`hero-tagline`,children:[`Next-gen React.`,(0,t.jsx)(`br`,{}),(0,t.jsx)(`span`,{children:`Zero config.`})]}),(0,t.jsxs)(`p`,{className:`hero-desc`,children:[`File-based routing, blazing-fast HMR, and full TypeScript.`,(0,t.jsx)(`br`,{}),`All powered by Vite.`]}),(0,t.jsx)(`ul`,{className:`features`,children:i.map(e=>(0,t.jsxs)(`li`,{className:`feature-badge`,children:[e.icon,e.label]},e.label))}),(0,t.jsxs)(`div`,{className:`hero-cta`,children:[(0,t.jsx)(Toil.Link,{href:`/get-started`,className:`btn btn-primary`,children:`Get Started`}),(0,t.jsxs)(`a`,{className:`btn btn-secondary`,href:`https://github.com/btc-vision/toiljs`,target:`_blank`,rel:`noopener noreferrer`,children:[(0,t.jsx)(n,{}),`GitHub`]})]})]})}export{a as default};

package/examples/basic/build/client/css/style.css

@@ -0,0 +1,2 @@
+:root{--lightningcss-light: ;--lightningcss-dark:initial;color-scheme:dark;--accent:#2563ff;--accent2:#7c3aed;--accent3:#22e3ab;--bg:#080d11;--surface:#0e1520;--border:#1b2330;--text:#f5f6fa;--muted:#8b9ab4}*,:before,:after{box-sizing:border-box}body{background:var(--bg);min-height:100vh;color:var(--text);margin:0;font-family:system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Noto Sans,Ubuntu,Cantarell,Helvetica Neue,sans-serif;line-height:1.6}a{color:var(--accent);text-decoration:none}a:hover{color:var(--accent3)}.app{flex-direction:column;min-height:100vh;display:flex}.content{flex:1;justify-content:center;align-items:center;display:flex}.nav{border-bottom:1px solid var(--border);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);z-index:100;background:#080d11d9;justify-content:space-between;align-items:center;height:60px;padding:0 2rem;display:flex;position:sticky;top:0}.nav-logo{align-items:center;gap:.6rem;font-family:Montserrat,system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Noto Sans,Ubuntu,Cantarell,Helvetica Neue,sans-serif;font-size:1.05rem;font-weight:800;line-height:1;display:flex;color:var(--text)!important}.nav-logo span{padding-top:.1em;line-height:1;display:block}.nav-logo img{border-radius:6px;flex-shrink:0;display:block}.nav-links{gap:1.5rem;font-size:.95rem;display:flex}.nav-links a{color:var(--muted)}.nav-links a:hover{color:var(--text)}.nav-github{align-items:center;gap:.4rem;display:flex}.nav-github svg{display:block}.hero{text-align:center;flex-direction:column;align-items:center;gap:1.25rem;max-width:680px;margin:0 auto;padding:5rem 1.5rem 4rem;display:flex}.hero-logo{width:96px;height:96px;position:relative}.hero-logo-img{z-index:1;border-radius:22px;transition:transform .3s;display:block;position:relative}.hero-logo-img:hover{transform:scale(1.06)}.hero-logo-glow{z-index:0;filter:blur(18px)saturate(1.4);opacity:.65;border-radius:22px;transition:opacity .3s,filter .3s,transform .3s;display:block;position:absolute;top:0;bottom:0;left:0;right:0;transform:scale(1.1)}.hero-logo:hover .hero-logo-glow{opacity:.9;filter:blur(24px)saturate(1.8);transform:scale(1.15)}.hero-title{letter-spacing:-.03em;background:linear-gradient(100deg, var(--accent), var(--accent2) 50%, var(--accent3));color:#0000;-webkit-background-clip:text;background-clip:text;margin:0;font-family:Montserrat,system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Noto Sans,Ubuntu,Cantarell,Helvetica Neue,sans-serif;font-size:clamp(2.8rem,7vw,4.5rem);font-weight:900}.hero-tagline{color:var(--text);margin:0;font-size:clamp(1.2rem,3vw,1.6rem);font-weight:600;line-height:1.4}.hero-tagline span{color:var(--muted);font-weight:400}.hero-desc{color:var(--muted);max-width:480px;margin:0;font-size:1rem}.features{flex-wrap:wrap;justify-content:center;gap:.6rem;margin:.25rem 0 0;padding:0;list-style:none;display:flex}.feature-badge{background:var(--surface);border:1px solid var(--border);color:var(--muted);border-radius:999px;align-items:center;gap:.45rem;padding:.35em .9em;font-size:.88rem;transition:border-color .2s,color .2s;display:flex}.feature-badge svg{color:var(--accent);flex-shrink:0;transition:color .2s;display:block}.feature-badge:hover{border-color:var(--accent);color:var(--text)}.feature-badge:hover svg{color:var(--accent3)}.hero-cta{flex-wrap:wrap;justify-content:center;gap:.75rem;margin-top:.5rem;display:flex}.btn{cursor:pointer;border-radius:8px;justify-content:center;align-items:center;gap:.45rem;padding:.65em 1.6em;font-family:inherit;font-size:.95rem;font-weight:600;transition:filter .2s,background .2s,border-color .2s;display:inline-flex;text-decoration:none!important}.btn svg{display:block}.btn-primary{background:var(--accent);border:1px solid var(--accent);color:#fff!important}.btn-primary:hover{filter:brightness(1.15)}.btn-secondary{background:var(--surface);border:1px solid var(--border);color:var(--text)!important}.btn-secondary:hover{border-color:var(--accent);background:#131d2e}.footer{text-align:center;color:var(--muted);border-top:1px solid var(--border);padding:1.25rem;font-size:.82rem}code{color:var(--accent3);background:#0d131c;border-radius:4px;padding:.1rem .4rem;font-size:.88em}.gs-page{flex-direction:column;gap:3rem;width:100%;max-width:860px;margin:0 auto;padding:4rem 1.5rem 5rem;display:flex}.gs-hero{text-align:center}.gs-title{letter-spacing:-.03em;background:linear-gradient(100deg, var(--accent), var(--accent2) 50%, var(--accent3));color:#0000;-webkit-background-clip:text;background-clip:text;margin:0 0 .5rem;font-family:Montserrat,system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Noto Sans,Ubuntu,Cantarell,Helvetica Neue,sans-serif;font-size:clamp(2.2rem,5vw,3.2rem);font-weight:900}.gs-desc{color:var(--muted);margin:0;font-size:1.05rem}.gs-section{flex-direction:column;gap:1rem;display:flex}.gs-section-title{letter-spacing:.12em;text-transform:uppercase;color:var(--muted);margin:0;font-size:.72rem;font-weight:700}.gs-grid{grid-template-columns:repeat(2,1fr);gap:1rem;display:grid}@media (max-width:560px){.gs-grid{grid-template-columns:1fr}}.gs-card{background:var(--surface);border:1px solid var(--border);border-radius:14px;flex-direction:column;gap:.6rem;padding:1.5rem;transition:border-color .2s,transform .2s,box-shadow .2s;display:flex;position:relative;overflow:hidden}.gs-card:before{content:"";opacity:0;border-radius:inherit;transition:opacity .3s;position:absolute;top:0;bottom:0;left:0;right:0}.gs-card:hover{transform:translateY(-2px)}.gs-card--accent1{border-top:2px solid var(--accent)}.gs-card--accent1:hover{box-shadow:0 8px 32px #2563ff26}.gs-card--accent2{border-top:2px solid var(--accent2)}.gs-card--accent2:hover{box-shadow:0 8px 32px #7c3aed26}.gs-card--accent3{border-top:2px solid var(--accent3)}.gs-card--accent3:hover{box-shadow:0 8px 32px #22e3ab1f}.gs-card--accent4{border-top:2px solid #f59e0b}.gs-card--accent4:hover{box-shadow:0 8px 32px #f59e0b1f}.gs-card--flat{border-top:2px solid var(--accent)}.gs-card--flat:hover{border-color:var(--accent);box-shadow:0 8px 32px #2563ff1f}.gs-card-icon{width:42px;height:42px;color:var(--accent);background:#2563ff1a;border-radius:10px;justify-content:center;align-items:center;margin-bottom:.25rem;display:flex}.gs-card--accent2 .gs-card-icon{color:var(--accent2);background:#7c3aed1a}.gs-card--accent3 .gs-card-icon{color:var(--accent3);background:#22e3ab1a}.gs-card--accent4 .gs-card-icon{color:#f59e0b;background:#f59e0b1a}.gs-card h3{color:var(--text);margin:0;font-size:.97rem;font-weight:700}.gs-card p{color:var(--muted);margin:0;font-size:.85rem;line-height:1.6}.gs-card pre{border:1px solid var(--border);background:#0a0f18;border-radius:6px;margin:0;padding:.6rem .85rem;overflow-x:auto}.gs-card pre code{color:var(--accent3);white-space:pre;background:0 0;padding:0;font-size:.8rem}.gs-actions{flex-wrap:wrap;gap:.75rem;display:flex}
+/*$vite$:1*/

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

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

package/examples/basic/build/client/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/build/client/index.html

@@ -0,0 +1,17 @@
+<!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" />
+        <title>toiljs · basic</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" />
+      <script type="module" crossorigin src="/assets/index-BmqcTaBB.js"></script>
+      <link rel="stylesheet" crossorigin href="/css/style.css">
+    </head>
+    <body>
+        <div id="root"></div>
+  </body>
+</html>

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

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

package/examples/basic/client/404.tsx

@@ -1,14 +1,11 @@
-import { Link } from 'toiljs/client';
-
 export default function NotFound() {
     return (
         <main>
             <h1>404 — Page not found</h1>
             <p>
-                This custom page is served from <code>client/404.tsx</code> whenever no route
-                matches.
+                This custom page is served from <code>client/404.tsx</code> whenever no route matches.
             </p>
-            <Link href="/">Back home</Link>
+            <Toil.Link href="/">Back home</Toil.Link>
         </main>
     );
 }

package/examples/basic/client/components/.gitkeep

@@ -0,0 +1 @@
+# Place shared React components here.

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/layout.tsx

@@ -1,36 +1,49 @@
 import { type ReactNode } from 'react';
+import Footer from './components/Footer';
 
-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">
+            <Toil.Head
+                titleTemplate="%s · ToilJS"
+                title="ToilJS"
+                meta={[{ name: 'description', content: 'The most performant React framework.' }]}
+            />
+            <header className="nav">
+                <a href="/" className="nav-logo">
+                    <img src="images/logo.svg" alt="ToilJS" width={28} height={28} />
+                    <span>ToilJS</span>
+                </a>
+
+                <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,15 @@
+<!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" />
+        <title>toiljs · basic</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>
     );
 }