@pyreon/create-zero 0.1.1

package/templates/default/src/routes/(admin)/dashboard.tsx

@@ -0,0 +1,133 @@
+import { useHead } from '@pyreon/head'
+import type { LoaderContext } from '@pyreon/zero'
+
+export const meta = {
+  title: 'Dashboard — Pyreon Zero',
+}
+
+/**
+ * Navigation guard — runs before the route renders.
+ * Demonstrates how to protect routes with authentication checks.
+ *
+ * In a real app, you'd check a session cookie, JWT token, or auth state.
+ * Returning a string redirects to that path.
+ */
+export function guard() {
+  // Simulate auth check — in a real app, check session/token
+  const isAuthenticated =
+    typeof window !== 'undefined' &&
+    localStorage.getItem('zero-demo-auth') === 'true'
+
+  if (!isAuthenticated) {
+    return '/about' // Redirect unauthenticated users
+  }
+  return true // Allow navigation
+}
+
+/**
+ * Per-route middleware — runs on the server before the loader.
+ * Great for logging, auth checks, rate limiting per-route.
+ */
+export const middleware = async (
+  request: Request,
+  next: (req: Request) => Promise<Response>,
+) => {
+  const start = Date.now()
+  const response = await next(request)
+  const duration = Date.now() - start
+
+  // Add server timing header
+  const headers = new Headers(response.headers)
+  headers.set('Server-Timing', `route;dur=${duration}`)
+
+  return new Response(response.body, {
+    status: response.status,
+    statusText: response.statusText,
+    headers,
+  })
+}
+
+export async function loader(_ctx: LoaderContext) {
+  return {
+    user: 'Demo User',
+    stats: {
+      views: 12_847,
+      routes: 6,
+      buildTime: '1.2s',
+    },
+  }
+}
+
+export default function Dashboard() {
+  useHead({ title: meta.title })
+
+  return (
+    <>
+      <div class="page-header">
+        <span class="badge">Protected Route</span>
+        <h1 style="margin-top: var(--space-md);">Dashboard</h1>
+        <p>
+          This route is protected by a <code>guard</code> function and uses
+          per-route <code>middleware</code> for server-side logging.
+        </p>
+      </div>
+
+      <div class="about-grid">
+        <div class="card about-stat">
+          <div class="stat-value">12.8k</div>
+          <div class="stat-label">Page views</div>
+        </div>
+        <div class="card about-stat">
+          <div class="stat-value">6</div>
+          <div class="stat-label">Routes</div>
+        </div>
+        <div class="card about-stat">
+          <div class="stat-value">1.2s</div>
+          <div class="stat-label">Build time</div>
+        </div>
+      </div>
+
+      <div
+        class="code-block"
+        style="max-width: 520px; margin: var(--space-2xl) auto 0;"
+      >
+        <div class="code-block-header">
+          <span>dashboard.tsx</span>
+        </div>
+        <pre>
+          <code>
+            <span class="cm">{'// Navigation guard — protect routes'}</span>
+            <span class="kw">export function</span>{' '}
+            <span class="fn">guard</span>() {'{'}
+            <span class="kw">if</span> (!isAuthenticated) {'{'}
+            <span class="kw">return</span> <span class="str">"/login"</span>{' '}
+            <span class="cm">{'// redirect'}</span>
+            {'}'}
+            <span class="kw">return</span> <span class="str">true</span>{' '}
+            <span class="cm">{'// allow'}</span>
+            {'}'}
+            <span class="cm">{'// Per-route server middleware'}</span>
+            <span class="kw">export const</span>{' '}
+            <span class="fn">middleware</span> = (req, next) =&gt; {'{'}
+            <span class="cm">{'// logging, auth, rate limiting...'}</span>
+            <span class="kw">return</span> <span class="fn">next</span>(req)
+            {'}'}
+          </code>
+        </pre>
+      </div>
+
+      <div style="text-align: center; margin-top: var(--space-2xl);">
+        <button
+          type="button"
+          class="btn btn-secondary"
+          onclick={() => {
+            localStorage.removeItem('zero-demo-auth')
+            window.location.href = '/about'
+          }}
+        >
+          Log out (clear demo auth)
+        </button>
+      </div>
+    </>
+  )
+}

package/templates/default/src/routes/_error.tsx

@@ -0,0 +1,24 @@
+import { useHead } from '@pyreon/head'
+import { Link } from '@pyreon/zero/link'
+
+export default function ErrorPage() {
+  useHead({ title: 'Something went wrong — Zero' })
+
+  return (
+    <div class="error-page">
+      <div class="error-code">500</div>
+      <h1>Something went wrong</h1>
+      <p style="color: var(--c-text-secondary); max-width: 400px;">
+        An unexpected error occurred. Try refreshing the page or navigating back
+        home.
+      </p>
+      <Link
+        href="/"
+        class="btn btn-primary"
+        style="margin-top: var(--space-md);"
+      >
+        Back to Home
+      </Link>
+    </div>
+  )
+}

package/templates/default/src/routes/_layout.tsx

@@ -0,0 +1,49 @@
+import { Link } from '@pyreon/zero/link'
+import { ThemeToggle } from '@pyreon/zero/theme'
+
+export function layout(props: { children: any }) {
+  return (
+    <>
+      <header class="app-header">
+        <div class="app-header-inner">
+          <Link href="/" class="app-logo">
+            <span class="logo-mark">Z</span>
+            <span>Zero</span>
+          </Link>
+          <nav class="app-nav">
+            <Link href="/" prefetch="viewport" exactActiveClass="nav-active">
+              Home
+            </Link>
+            <Link
+              href="/counter"
+              prefetch="hover"
+              exactActiveClass="nav-active"
+            >
+              Counter
+            </Link>
+            <Link href="/posts" prefetch="hover" activeClass="nav-active">
+              Posts
+            </Link>
+            <Link href="/about" prefetch="hover" exactActiveClass="nav-active">
+              About
+            </Link>
+            <Link
+              href="/dashboard"
+              prefetch="hover"
+              exactActiveClass="nav-active"
+            >
+              Dashboard
+            </Link>
+            <ThemeToggle class="theme-toggle" />
+          </nav>
+        </div>
+      </header>
+
+      <main class="app-main">{props.children}</main>
+
+      <footer class="app-footer">
+        Built with Pyreon Zero — signal-based, blazing fast.
+      </footer>
+    </>
+  )
+}

package/templates/default/src/routes/_loading.tsx

@@ -0,0 +1,8 @@
+export default function Loading() {
+  return (
+    <div class="loading-page">
+      <div class="loading-spinner" />
+      <p style="color: var(--c-text-muted); font-size: 0.9rem;">Loading...</p>
+    </div>
+  )
+}

package/templates/default/src/routes/about.tsx

@@ -0,0 +1,125 @@
+import { useHead } from '@pyreon/head'
+import { Link } from '@pyreon/zero/link'
+
+export const meta = {
+  title: 'About — Pyreon Zero',
+  description: 'Learn about the Pyreon Zero meta-framework.',
+}
+
+export default function About() {
+  useHead({
+    title: meta.title,
+    meta: [{ name: 'description', content: meta.description }],
+  })
+
+  return (
+    <>
+      <div class="page-header">
+        <h1>About Zero</h1>
+        <p>
+          A signal-based meta-framework built on Vite — designed for developers
+          who care about performance and simplicity.
+        </p>
+      </div>
+
+      <div class="about-grid">
+        <div class="card about-stat">
+          <div class="stat-value">0</div>
+          <div class="stat-label">Virtual DOM overhead</div>
+        </div>
+        <div class="card about-stat">
+          <div class="stat-value">4</div>
+          <div class="stat-label">Rendering strategies</div>
+        </div>
+        <div class="card about-stat">
+          <div class="stat-value">5+</div>
+          <div class="stat-label">Deploy adapters</div>
+        </div>
+      </div>
+
+      <section style="margin-top: var(--space-3xl); max-width: 680px;">
+        <h2 style="font-size: 1.3rem; font-weight: 700; margin-bottom: var(--space-md);">
+          Why Zero?
+        </h2>
+        <div style="color: var(--c-text-secondary); line-height: 1.8; display: flex; flex-direction: column; gap: var(--space-lg);">
+          <p>
+            Most frameworks make you choose between developer experience and
+            runtime performance. Zero doesn't. Pyreon's signal-based reactivity
+            means your components compile to surgical DOM updates — no diffing,
+            no reconciliation, no wasted work.
+          </p>
+          <p>
+            On top of that, Zero gives you file-based routing, server-side
+            rendering, static generation, incremental regeneration, font
+            optimization, image optimization, smart caching, link prefetching,
+            and SEO utilities — all built in, all zero-config.
+          </p>
+          <p>
+            Deploy to Node, Bun, Vercel, Cloudflare, Netlify, or export as a
+            static site. One codebase, any target.
+          </p>
+        </div>
+      </section>
+
+      <section style="margin-top: var(--space-3xl); max-width: 680px;">
+        <h2 style="font-size: 1.3rem; font-weight: 700; margin-bottom: var(--space-md);">
+          The Stack
+        </h2>
+        <div style="display: grid; gap: var(--space-sm);">
+          {[
+            ['Pyreon', 'Signal-based UI framework with JSX'],
+            ['Vite', 'Lightning-fast dev server and optimized builds'],
+            [
+              'File Router',
+              'Drop a file, get a route — layouts, guards, loaders',
+            ],
+            [
+              'SSR / SSG / ISR',
+              'Every rendering strategy, per-route overrides',
+            ],
+            [
+              '<Image>',
+              'Lazy loading, responsive srcset, blur-up placeholders',
+            ],
+            ['<Link>', 'Prefetch on hover or viewport entry for instant nav'],
+            [
+              'Font Plugin',
+              'Google Fonts optimization, preconnect, font-display:swap',
+            ],
+            [
+              'Cache MW',
+              'Immutable hashed assets, stale-while-revalidate pages',
+            ],
+            ['SEO Tools', 'Sitemap, robots.txt, JSON-LD structured data'],
+          ].map(([name, desc]) => (
+            <div
+              class="card"
+              style="display: flex; align-items: center; gap: var(--space-md); padding: var(--space-md) var(--space-lg);"
+            >
+              <code style="min-width: 130px; font-weight: 600; color: var(--c-accent);">
+                {name}
+              </code>
+              <span style="color: var(--c-text-secondary); font-size: 0.9rem;">
+                {desc}
+              </span>
+            </div>
+          ))}
+        </div>
+      </section>
+
+      <section style="text-align: center; margin-top: var(--space-3xl); padding-bottom: var(--space-xl);">
+        <h2 style="font-size: 1.3rem; font-weight: 700; margin-bottom: var(--space-md);">
+          Ready to build something?
+        </h2>
+        <div style="display: flex; gap: var(--space-md); justify-content: center;">
+          <Link href="/" class="btn btn-primary">
+            Get Started
+          </Link>
+          <Link href="/counter" class="btn btn-secondary">
+            Try the Demo
+          </Link>
+        </div>
+      </section>
+    </>
+  )
+}

package/templates/default/src/routes/counter.tsx

@@ -0,0 +1,94 @@
+import { useHead } from '@pyreon/head'
+import { computed, signal } from '@pyreon/reactivity'
+
+export const meta = {
+  title: 'Counter — Pyreon Zero',
+  description: "See Pyreon's signal-based reactivity in action.",
+}
+
+export default function Counter() {
+  useHead({ title: meta.title })
+
+  const count = signal(0)
+  const doubled = computed(() => count() * 2)
+  const isEven = computed(() => count() % 2 === 0)
+
+  return (
+    <>
+      <div class="page-header" style="text-align: center;">
+        <span class="badge">Interactive Demo</span>
+        <h1 style="margin-top: var(--space-md);">Signal Reactivity</h1>
+        <p>
+          Fine-grained reactivity with zero virtual DOM. Only the exact text
+          nodes that display these values are updated — nothing else re-renders.
+        </p>
+      </div>
+
+      <div class="counter-demo">
+        <div class="counter-display">{count}</div>
+
+        <div class="counter-controls">
+          <button
+            type="button"
+            class="btn btn-secondary"
+            onclick={() => count(count() - 1)}
+          >
+            -
+          </button>
+          <button
+            type="button"
+            class="btn btn-primary"
+            onclick={() => count(0)}
+          >
+            Reset
+          </button>
+          <button
+            type="button"
+            class="btn btn-secondary"
+            onclick={() => count(count() + 1)}
+          >
+            +
+          </button>
+        </div>
+
+        <div class="counter-meta">
+          <div>
+            count() → <strong>{count}</strong>
+          </div>
+          <div>
+            doubled() → <strong>{doubled}</strong>
+          </div>
+          <div>
+            isEven() → <strong>{() => (isEven() ? 'true' : 'false')}</strong>
+          </div>
+        </div>
+      </div>
+
+      <div
+        class="code-block"
+        style="max-width: 520px; margin: var(--space-2xl) auto 0;"
+      >
+        <div class="code-block-header">
+          <span>counter.tsx</span>
+        </div>
+        <pre>
+          <code>
+            <span class="kw">import</span> {'{'} signal, computed {'}'}{' '}
+            <span class="kw">from</span>{' '}
+            <span class="str">"@pyreon/reactivity"</span>
+            <span class="kw">const</span> <span class="fn">count</span> ={' '}
+            <span class="fn">signal</span>(<span class="str">0</span>)
+            <span class="kw">const</span> <span class="fn">doubled</span> ={' '}
+            <span class="fn">computed</span>(() =&gt;{' '}
+            <span class="fn">count</span>() * <span class="str">2</span>)
+            <span class="cm">{'// Just reference the signal in JSX —'}</span>
+            <span class="cm">{'// only this text node updates'}</span>
+            <span class="tag">&lt;span&gt;</span>
+            {'{'}count{'}'}
+            <span class="tag">&lt;/span&gt;</span>
+          </code>
+        </pre>
+      </div>
+    </>
+  )
+}

package/templates/default/src/routes/index.tsx

@@ -0,0 +1,225 @@
+import { useHead } from '@pyreon/head'
+import { Link } from '@pyreon/zero/link'
+
+export const meta = {
+  title: 'Pyreon Zero',
+  description: 'The signal-based meta-framework. Build fast, stay fast.',
+}
+
+export default function Home() {
+  useHead({
+    title: 'Pyreon Zero — The Signal-Based Meta-Framework',
+    meta: [{ name: 'description', content: meta.description }],
+  })
+
+  return (
+    <>
+      <section class="hero">
+        <span class="badge">Open Source</span>
+        <h1>
+          Build fast.
+          <br />
+          <span class="gradient">Stay fast.</span>
+        </h1>
+        <p>
+          Pyreon Zero is a signal-based full-stack framework powered by Vite.
+          File-based routing, SSR, SSG, ISR — everything you need, nothing you
+          don't.
+        </p>
+        <div class="hero-actions">
+          <Link href="/counter" class="btn btn-primary">
+            See it in action
+          </Link>
+          <a
+            href="https://github.com/pyreon/zero"
+            class="btn btn-secondary"
+            target="_blank"
+            rel="noopener noreferrer"
+          >
+            GitHub
+          </a>
+        </div>
+
+        <div class="code-block">
+          <div class="code-block-header">
+            <span>terminal</span>
+          </div>
+          <pre>
+            <code>
+              <span class="cm"># Create a new project in seconds</span>
+              <span class="fn">bun</span> create zero my-app
+              <span class="fn">cd</span> my-app
+              <span class="fn">bun</span> install
+              <span class="fn">bun</span> run dev
+            </code>
+          </pre>
+        </div>
+      </section>
+
+      <section class="features">
+        <div class="card feature">
+          <div class="feature-icon">
+            <svg
+              width="24"
+              height="24"
+              viewBox="0 0 24 24"
+              fill="none"
+              stroke="currentColor"
+              stroke-width="2"
+              stroke-linecap="round"
+              stroke-linejoin="round"
+              aria-hidden="true"
+            >
+              <polygon points="13 2 3 14 12 14 11 22 21 10 12 10 13 2" />
+            </svg>
+          </div>
+          <h3>Signal-Based Reactivity</h3>
+          <p>
+            Fine-grained reactivity with zero virtual DOM overhead. Only the
+            exact DOM nodes that need updating are touched.
+          </p>
+        </div>
+
+        <div class="card feature">
+          <div class="feature-icon">
+            <svg
+              width="24"
+              height="24"
+              viewBox="0 0 24 24"
+              fill="none"
+              stroke="currentColor"
+              stroke-width="2"
+              stroke-linecap="round"
+              stroke-linejoin="round"
+              aria-hidden="true"
+            >
+              <path d="M14.7 6.3a1 1 0 0 0 0 1.4l1.6 1.6a1 1 0 0 0 1.4 0l3.77-3.77a6 6 0 0 1-7.94 7.94l-6.91 6.91a2.12 2.12 0 0 1-3-3l6.91-6.91a6 6 0 0 1 7.94-7.94l-3.76 3.76z" />
+            </svg>
+          </div>
+          <h3>File-Based Routing</h3>
+          <p>
+            Drop a file in <code>src/routes/</code> and it's a route. Layouts,
+            dynamic params, catch-alls, and route groups built in.
+          </p>
+        </div>
+
+        <div class="card feature">
+          <div class="feature-icon">
+            <svg
+              width="24"
+              height="24"
+              viewBox="0 0 24 24"
+              fill="none"
+              stroke="currentColor"
+              stroke-width="2"
+              stroke-linecap="round"
+              stroke-linejoin="round"
+              aria-hidden="true"
+            >
+              <rect x="2" y="3" width="20" height="14" rx="2" ry="2" />
+              <line x1="8" y1="21" x2="16" y2="21" />
+              <line x1="12" y1="17" x2="12" y2="21" />
+            </svg>
+          </div>
+          <h3>SSR / SSG / ISR / SPA</h3>
+          <p>
+            Every rendering strategy out of the box. Per-route overrides let you
+            mix SSR pages with static marketing pages.
+          </p>
+        </div>
+
+        <div class="card feature">
+          <div class="feature-icon">
+            <svg
+              width="24"
+              height="24"
+              viewBox="0 0 24 24"
+              fill="none"
+              stroke="currentColor"
+              stroke-width="2"
+              stroke-linecap="round"
+              stroke-linejoin="round"
+              aria-hidden="true"
+            >
+              <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" />
+            </svg>
+          </div>
+          <h3>Font & Image Optimization</h3>
+          <p>
+            Automatic Google Fonts inlining, font-display swap, and an{' '}
+            <code>{'<Image>'}</code> component with lazy loading and blur-up
+            placeholders.
+          </p>
+        </div>
+
+        <div class="card feature">
+          <div class="feature-icon">
+            <svg
+              width="24"
+              height="24"
+              viewBox="0 0 24 24"
+              fill="none"
+              stroke="currentColor"
+              stroke-width="2"
+              stroke-linecap="round"
+              stroke-linejoin="round"
+              aria-hidden="true"
+            >
+              <path d="M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z" />
+            </svg>
+          </div>
+          <h3>Smart Caching & Security</h3>
+          <p>
+            Built-in middleware for immutable asset caching,
+            stale-while-revalidate, security headers, and compression hints.
+          </p>
+        </div>
+
+        <div class="card feature">
+          <div class="feature-icon">
+            <svg
+              width="24"
+              height="24"
+              viewBox="0 0 24 24"
+              fill="none"
+              stroke="currentColor"
+              stroke-width="2"
+              stroke-linecap="round"
+              stroke-linejoin="round"
+              aria-hidden="true"
+            >
+              <circle cx="12" cy="12" r="10" />
+              <line x1="2" y1="12" x2="22" y2="12" />
+              <path d="M12 2a15.3 15.3 0 0 1 4 10 15.3 15.3 0 0 1-4 10 15.3 15.3 0 0 1-4-10 15.3 15.3 0 0 1 4-10z" />
+            </svg>
+          </div>
+          <h3>Deploy Anywhere</h3>
+          <p>
+            Adapters for Node, Bun, Vercel, Cloudflare, and Netlify. Or export
+            as a fully static site.
+          </p>
+        </div>
+      </section>
+
+      <section style="text-align: center; margin-top: var(--space-3xl); padding-bottom: var(--space-xl);">
+        <h2 style="font-size: 1.5rem; font-weight: 700; letter-spacing: -0.02em; margin-bottom: var(--space-sm);">
+          Ready to build?
+        </h2>
+        <p style="color: var(--c-text-secondary); margin-bottom: var(--space-xl);">
+          Explore the demo pages to see Zero's features in action.
+        </p>
+        <div style="display: flex; gap: var(--space-md); justify-content: center; flex-wrap: wrap;">
+          <Link href="/counter" class="btn btn-secondary">
+            Signal Reactivity
+          </Link>
+          <Link href="/posts" class="btn btn-secondary">
+            Data Loading
+          </Link>
+          <Link href="/about" class="btn btn-secondary">
+            About Zero
+          </Link>
+        </div>
+      </section>
+    </>
+  )
+}