@pyreon/create-zero 0.13.1 → 0.15.0

package/templates/blog/src/global.css

@@ -0,0 +1,292 @@
+/* ─── Reset ──────────────────────────────────────────────────────────────── */
+
+*,
+*::before,
+*::after {
+  box-sizing: border-box;
+  margin: 0;
+  padding: 0;
+}
+
+:root {
+  --font-sans: 'Inter', system-ui, -apple-system, sans-serif;
+  --font-mono: 'JetBrains Mono', 'Fira Code', ui-monospace, monospace;
+
+  --c-bg: #0a0a0b;
+  --c-surface: #141416;
+  --c-border: #27272a;
+  --c-text: #fafafa;
+  --c-text-secondary: #a1a1aa;
+  --c-text-muted: #71717a;
+  --c-accent: #6d5cff;
+  --c-accent-hover: #7d6fff;
+
+  --measure: 68ch;
+  --space-xs: 0.25rem;
+  --space-sm: 0.5rem;
+  --space-md: 1rem;
+  --space-lg: 1.5rem;
+  --space-xl: 2rem;
+  --space-2xl: 3rem;
+  --space-3xl: 5rem;
+
+  --radius-sm: 6px;
+  --radius-md: 10px;
+}
+
+[data-theme='light'] {
+  --c-bg: #ffffff;
+  --c-surface: #f4f4f5;
+  --c-border: #d4d4d8;
+  --c-text: #18181b;
+  --c-text-secondary: #3f3f46;
+  --c-text-muted: #71717a;
+  --c-accent: #5b4fd6;
+  --c-accent-hover: #4a3fb8;
+}
+
+html {
+  font-family: var(--font-sans);
+  background: var(--c-bg);
+  color: var(--c-text);
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+  line-height: 1.6;
+}
+
+body {
+  min-height: 100vh;
+  display: flex;
+  flex-direction: column;
+}
+
+#app {
+  display: flex;
+  flex-direction: column;
+  flex: 1;
+}
+
+/* ─── Layout ─────────────────────────────────────────────────────────────── */
+
+.site-header {
+  border-bottom: 1px solid var(--c-border);
+  padding: var(--space-md) var(--space-lg);
+}
+
+.site-header-inner {
+  max-width: 960px;
+  margin: 0 auto;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: var(--space-lg);
+}
+
+.site-logo {
+  font-weight: 700;
+  font-size: 1.125rem;
+  letter-spacing: -0.02em;
+  color: var(--c-text);
+  text-decoration: none;
+}
+
+.site-nav {
+  display: flex;
+  gap: var(--space-lg);
+  align-items: center;
+}
+
+.site-nav a {
+  color: var(--c-text-secondary);
+  text-decoration: none;
+  font-size: 0.9375rem;
+  transition: color 150ms ease;
+}
+
+.site-nav a:hover,
+.site-nav a.nav-active {
+  color: var(--c-text);
+}
+
+.site-main {
+  flex: 1;
+  padding: var(--space-2xl) var(--space-lg);
+}
+
+.site-main-inner {
+  max-width: var(--measure);
+  margin: 0 auto;
+}
+
+.site-footer {
+  border-top: 1px solid var(--c-border);
+  padding: var(--space-lg);
+  color: var(--c-text-muted);
+  font-size: 0.875rem;
+  text-align: center;
+}
+
+/* ─── Typography ─────────────────────────────────────────────────────────── */
+
+h1,
+h2,
+h3,
+h4 {
+  letter-spacing: -0.02em;
+  line-height: 1.2;
+  margin-bottom: var(--space-md);
+}
+
+h1 {
+  font-size: 2.5rem;
+  font-weight: 800;
+}
+
+h2 {
+  font-size: 1.75rem;
+  font-weight: 700;
+  margin-top: var(--space-2xl);
+}
+
+h3 {
+  font-size: 1.25rem;
+  font-weight: 600;
+  margin-top: var(--space-xl);
+}
+
+p {
+  margin-bottom: var(--space-md);
+  color: var(--c-text-secondary);
+}
+
+a {
+  color: var(--c-accent);
+}
+
+a:hover {
+  color: var(--c-accent-hover);
+}
+
+code {
+  font-family: var(--font-mono);
+  font-size: 0.875em;
+  background: var(--c-surface);
+  border: 1px solid var(--c-border);
+  border-radius: var(--radius-sm);
+  padding: 0.125em 0.375em;
+}
+
+pre {
+  font-family: var(--font-mono);
+  font-size: 0.875rem;
+  background: var(--c-surface);
+  border: 1px solid var(--c-border);
+  border-radius: var(--radius-md);
+  padding: var(--space-md);
+  margin-bottom: var(--space-lg);
+  overflow-x: auto;
+}
+
+pre code {
+  background: transparent;
+  border: 0;
+  padding: 0;
+}
+
+ul,
+ol {
+  margin-bottom: var(--space-md);
+  padding-left: 1.5rem;
+  color: var(--c-text-secondary);
+}
+
+li {
+  margin-bottom: var(--space-xs);
+}
+
+blockquote {
+  border-left: 3px solid var(--c-accent);
+  padding-left: var(--space-md);
+  margin: var(--space-lg) 0;
+  color: var(--c-text-secondary);
+  font-style: italic;
+}
+
+img {
+  max-width: 100%;
+  border-radius: var(--radius-md);
+  margin: var(--space-lg) 0;
+}
+
+hr {
+  border: 0;
+  border-top: 1px solid var(--c-border);
+  margin: var(--space-2xl) 0;
+}
+
+/* ─── Post lists ─────────────────────────────────────────────────────────── */
+
+.post-list {
+  list-style: none;
+  padding: 0;
+  margin: 0;
+}
+
+.post-list li {
+  margin-bottom: var(--space-xl);
+  padding-bottom: var(--space-xl);
+  border-bottom: 1px solid var(--c-border);
+}
+
+.post-list li:last-child {
+  border-bottom: 0;
+}
+
+.post-title {
+  font-size: 1.5rem;
+  font-weight: 700;
+  margin-bottom: var(--space-xs);
+}
+
+.post-title a {
+  color: var(--c-text);
+  text-decoration: none;
+}
+
+.post-title a:hover {
+  color: var(--c-accent);
+}
+
+.post-meta {
+  color: var(--c-text-muted);
+  font-size: 0.875rem;
+  margin-bottom: var(--space-sm);
+}
+
+.post-summary {
+  color: var(--c-text-secondary);
+}
+
+.tags {
+  display: flex;
+  gap: var(--space-xs);
+  flex-wrap: wrap;
+  margin-top: var(--space-sm);
+}
+
+.tag {
+  font-size: 0.75rem;
+  background: var(--c-surface);
+  border: 1px solid var(--c-border);
+  border-radius: var(--radius-sm);
+  padding: 0.125rem 0.5rem;
+  color: var(--c-text-secondary);
+}
+
+/* ─── Post detail ────────────────────────────────────────────────────────── */
+
+.post-header {
+  margin-bottom: var(--space-2xl);
+  padding-bottom: var(--space-xl);
+  border-bottom: 1px solid var(--c-border);
+}

package/templates/blog/src/lib/posts.ts

@@ -0,0 +1,45 @@
+import type { ComponentFn } from "@pyreon/core"
+
+export interface PostMeta {
+  title: string
+  date: string
+  description: string
+  tags?: string[]
+}
+
+export interface Post extends PostMeta {
+  slug: string
+  Component: ComponentFn<unknown>
+}
+
+interface PostModule {
+  meta: PostMeta
+  default: ComponentFn<unknown>
+}
+
+/**
+ * Enumerate all `.tsx` posts in `src/content/posts/` at build time. Eagerly
+ * loads modules so SSG renders see frontmatter immediately. The slug is the
+ * filename without extension (`welcome.tsx` → `welcome`).
+ */
+const modules = import.meta.glob<PostModule>("../content/posts/*.tsx", {
+  eager: true,
+})
+
+export const posts: Post[] = Object.entries(modules)
+  .map(([path, mod]) => {
+    const slug = path
+      .split("/")
+      .pop()!
+      .replace(/\.tsx$/, "")
+    return { ...mod.meta, slug, Component: mod.default }
+  })
+  .sort((a, b) => (a.date < b.date ? 1 : -1))
+
+export function postBySlug(slug: string): Post | undefined {
+  return posts.find((p) => p.slug === slug)
+}
+
+export function postSlugs(): string[] {
+  return posts.map((p) => p.slug)
+}

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

@@ -0,0 +1,40 @@
+import { RouterView } from "@pyreon/router"
+import { Link } from "@pyreon/zero/link"
+import { ThemeToggle } from "@pyreon/zero/theme"
+
+export function layout() {
+  return (
+    <>
+      <header class="site-header">
+        <div class="site-header-inner">
+          <Link href="/" class="site-logo">
+            Blog
+          </Link>
+          <nav class="site-nav">
+            <Link href="/" prefetch="hover" exactActiveClass="nav-active">
+              Home
+            </Link>
+            <Link href="/blog" prefetch="hover" activeClass="nav-active">
+              All posts
+            </Link>
+            <Link href="/about" prefetch="hover" exactActiveClass="nav-active">
+              About
+            </Link>
+            <a href="/api/rss" title="RSS feed">
+              RSS
+            </a>
+            <ThemeToggle />
+          </nav>
+        </div>
+      </header>
+
+      <main class="site-main">
+        <div class="site-main-inner">
+          <RouterView />
+        </div>
+      </main>
+
+      <footer class="site-footer">Built with Pyreon Zero.</footer>
+    </>
+  )
+}

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

@@ -0,0 +1,28 @@
+import { useHead } from "@pyreon/head"
+
+export const meta = {
+  title: "About",
+  description: "About this blog.",
+}
+
+export default function About() {
+  useHead({
+    title: meta.title,
+    meta: [{ name: "description", content: meta.description }],
+  })
+
+  return (
+    <>
+      <h1>About</h1>
+      <p>
+        This is a Pyreon Zero blog. Edit <code>src/routes/about.tsx</code> to replace this
+        with your bio.
+      </p>
+      <p>
+        The blog renders statically — every page on this site is plain HTML on disk after{" "}
+        <code>bun run build</code>. Posts live in <code>src/content/posts/</code>; drop a new
+        TSX file there and it auto-appears in the listings and RSS feed.
+      </p>
+    </>
+  )
+}

package/templates/blog/src/routes/api/rss.ts

@@ -0,0 +1,55 @@
+import { posts } from "../../lib/posts"
+
+/**
+ * Site origin used in feed URLs. Set this to your deployed domain — RSS readers
+ * resolve relative links against it. The placeholder works locally and at any
+ * preview URL but should be updated before publishing.
+ */
+const SITE_ORIGIN = "https://example.com"
+const SITE_TITLE = "Blog"
+const SITE_DESCRIPTION = "A Pyreon Zero blog."
+
+function escape(s: string): string {
+  return s
+    .replace(/&/g, "&")
+    .replace(/</g, "&lt;")
+    .replace(/>/g, "&gt;")
+    .replace(/"/g, "&quot;")
+    .replace(/'/g, "&apos;")
+}
+
+function rfc822(date: string): string {
+  // Accepts YYYY-MM-DD; outputs RFC 822 used by RSS readers
+  return new Date(`${date}T00:00:00Z`).toUTCString()
+}
+
+export function GET() {
+  const items = posts
+    .map((p) => {
+      const url = `${SITE_ORIGIN}/blog/${p.slug}`
+      return `    <item>
+      <title>${escape(p.title)}</title>
+      <link>${url}</link>
+      <guid>${url}</guid>
+      <pubDate>${rfc822(p.date)}</pubDate>
+      <description>${escape(p.description)}</description>
+    </item>`
+    })
+    .join("\n")
+
+  const xml = `<?xml version="1.0" encoding="UTF-8"?>
+<rss version="2.0">
+  <channel>
+    <title>${escape(SITE_TITLE)}</title>
+    <link>${SITE_ORIGIN}</link>
+    <description>${escape(SITE_DESCRIPTION)}</description>
+    <language>en-us</language>
+${items}
+  </channel>
+</rss>
+`
+
+  return new Response(xml, {
+    headers: { "content-type": "application/rss+xml; charset=utf-8" },
+  })
+}

package/templates/blog/src/routes/blog/[slug].tsx

@@ -0,0 +1,67 @@
+import { useHead } from "@pyreon/head"
+import { Link } from "@pyreon/zero/link"
+import { useRoute } from "@pyreon/router"
+import { postBySlug, postSlugs } from "../../lib/posts"
+
+/**
+ * Tells the SSG plugin which slugs to pre-render. Without this, the dynamic
+ * route would only be reachable client-side at build time.
+ */
+export const ssgPaths = () => postSlugs().map((slug) => `/blog/${slug}`)
+
+export default function PostPage() {
+  // useRoute() returns an accessor — call it to read the resolved route.
+  const route = useRoute()
+  const slug = route().params.slug
+  const post = postBySlug(slug)
+
+  if (!post) {
+    return (
+      <>
+        <h1>Post not found</h1>
+        <p>
+          No post with slug <code>{slug}</code>.
+        </p>
+        <p>
+          <Link href="/blog">← Back to all posts</Link>
+        </p>
+      </>
+    )
+  }
+
+  useHead({
+    title: post.title,
+    meta: [
+      { name: "description", content: post.description },
+      { property: "og:title", content: post.title },
+      { property: "og:description", content: post.description },
+      { property: "og:type", content: "article" },
+    ],
+  })
+
+  const Body = post.Component
+
+  return (
+    <article>
+      <header class="post-header">
+        <h1>{post.title}</h1>
+        <div class="post-meta">{post.date}</div>
+        {post.tags && post.tags.length > 0 ? (
+          <div class="tags">
+            {post.tags.map((t) => (
+              <span class="tag">#{t}</span>
+            ))}
+          </div>
+        ) : null}
+      </header>
+
+      <Body />
+
+      <hr />
+
+      <p>
+        <Link href="/blog">← Back to all posts</Link>
+      </p>
+    </article>
+  )
+}

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

@@ -0,0 +1,43 @@
+import { useHead } from "@pyreon/head"
+import { Link } from "@pyreon/zero/link"
+import { posts } from "../../lib/posts"
+
+export const meta = {
+  title: "All posts",
+  description: "Every post on this blog, newest first.",
+}
+
+export default function BlogIndex() {
+  useHead({
+    title: meta.title,
+    meta: [{ name: "description", content: meta.description }],
+  })
+
+  return (
+    <>
+      <h1>All posts</h1>
+      <p>{posts.length} posts in total.</p>
+
+      <ul class="post-list">
+        {posts.map((post) => (
+          <li>
+            <h2 class="post-title">
+              <Link href={`/blog/${post.slug}`} prefetch="hover">
+                {post.title}
+              </Link>
+            </h2>
+            <div class="post-meta">{post.date}</div>
+            <p class="post-summary">{post.description}</p>
+            {post.tags && post.tags.length > 0 ? (
+              <div class="tags">
+                {post.tags.map((t) => (
+                  <span class="tag">#{t}</span>
+                ))}
+              </div>
+            ) : null}
+          </li>
+        ))}
+      </ul>
+    </>
+  )
+}

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

@@ -0,0 +1,52 @@
+import { useHead } from "@pyreon/head"
+import { Link } from "@pyreon/zero/link"
+import { posts } from "../lib/posts"
+
+export const meta = {
+  title: "Blog",
+  description: "A statically-rendered Pyreon Zero blog.",
+}
+
+export default function Home() {
+  useHead({
+    title: meta.title,
+    meta: [{ name: "description", content: meta.description }],
+  })
+
+  // Show the 5 most recent posts on the homepage
+  const recent = posts.slice(0, 5)
+
+  return (
+    <>
+      <h1>Blog</h1>
+      <p>Recent writing, statically rendered. Subscribe via <a href="/api/rss">RSS</a>.</p>
+
+      <ul class="post-list">
+        {recent.map((post) => (
+          <li>
+            <h2 class="post-title">
+              <Link href={`/blog/${post.slug}`} prefetch="hover">
+                {post.title}
+              </Link>
+            </h2>
+            <div class="post-meta">{post.date}</div>
+            <p class="post-summary">{post.description}</p>
+            {post.tags && post.tags.length > 0 ? (
+              <div class="tags">
+                {post.tags.map((t) => (
+                  <span class="tag">#{t}</span>
+                ))}
+              </div>
+            ) : null}
+          </li>
+        ))}
+      </ul>
+
+      {posts.length > recent.length ? (
+        <p>
+          <Link href="/blog">View all {posts.length} posts →</Link>
+        </p>
+      ) : null}
+    </>
+  )
+}

package/templates/blog/tsconfig.json

@@ -0,0 +1,16 @@
+{
+  "compilerOptions": {
+    "target": "ES2022",
+    "module": "ESNext",
+    "moduleResolution": "bundler",
+    "jsx": "preserve",
+    "jsxImportSource": "@pyreon/core",
+    "strict": true,
+    "skipLibCheck": true,
+    "esModuleInterop": true,
+    "isolatedModules": true,
+    "noEmit": true,
+    "types": ["bun", "vite/client"]
+  },
+  "include": ["src", "env.d.ts"]
+}

package/templates/dashboard/.mcp.json

@@ -0,0 +1,8 @@
+{
+  "mcpServers": {
+    "pyreon": {
+      "command": "bunx",
+      "args": ["@pyreon/mcp"]
+    }
+  }
+}

package/templates/dashboard/CLAUDE.md

@@ -0,0 +1,50 @@
+# Dashboard (Pyreon Zero)
+
+A SaaS-shape application starter. Marketing site at `/`, auth-gated app under `/app/*`, with a built-in invoice export demo using `@pyreon/document-primitives` — the same component tree renders in the browser AND exports to PDF/email.
+
+## Reactivity (Pyreon, not React)
+
+- `signal()` not `useState`; `computed()` not `useMemo`; `effect()` not `useEffect`.
+- Write signals via `signal.set(value)` or `signal.update(fn)`.
+- In JSX, signals auto-call: `{count}` (compiler inserts `()`).
+
+## JSX
+
+- `class=` not `className`; `for=` not `htmlFor`; camelCase events.
+
+## Auth + DB
+
+`src/lib/auth.ts` and `src/lib/db.ts` hold the auth + data layer. They
+ship with **in-memory implementations** so the dashboard runs out of the
+box on a fresh clone — every dev-server restart wipes the data.
+
+To wire a real backend, run:
+
+```bash
+bunx create-pyreon-app --template dashboard --integrations supabase,email
+```
+
+The scaffolder overwrites `auth.ts` + `db.ts` with Supabase-backed
+implementations and writes `src/lib/email.ts` + `src/emails/welcome.tsx`
+for Resend. The exported function signatures stay identical, so no route
+files need to change. On an existing project, you can run the same
+scaffolder flags or hand-edit the two files — the surface is small.
+
+## Routes
+
+- `/` — marketing landing
+- `/login`, `/signup` — auth forms
+- `/app/dashboard` — overview cards
+- `/app/users` — table view of users
+- `/app/invoices` — invoice list
+- `/app/invoices/:id` — invoice detail with **"Export to PDF" / "Send email"** buttons (the headline demo)
+- `/app/settings/*` — account / profile / billing settings
+
+## Commands
+
+```bash
+bun run dev       # dev server
+bun run build     # production build
+bun run preview   # serve build
+bun run doctor    # check for React patterns
+```