@pyreon/zero 0.11.8 → 0.11.10

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@pyreon/zero",
-  "version": "0.11.8",
+  "version": "0.11.10",
   "description": "Pyreon Zero — zero-config full-stack framework powered by Pyreon and Vite",
   "license": "MIT",
   "author": "Vit Bokisch",
@@ -116,17 +116,17 @@
     "lint": "oxlint ."
   },
   "dependencies": {
-    "@pyreon/core": "^0.11.8",
-    "@pyreon/head": "^0.11.8",
-    "@pyreon/meta": "^0.11.8",
-    "@pyreon/router": "^0.11.8",
-    "@pyreon/runtime-dom": "^0.11.8",
-    "@pyreon/runtime-server": "^0.11.8",
-    "@pyreon/server": "^0.11.8",
-    "@pyreon/vite-plugin": "^0.11.8",
+    "@pyreon/core": "^0.11.10",
+    "@pyreon/head": "^0.11.10",
+    "@pyreon/meta": "^0.11.10",
+    "@pyreon/router": "^0.11.10",
+    "@pyreon/runtime-dom": "^0.11.10",
+    "@pyreon/runtime-server": "^0.11.10",
+    "@pyreon/server": "^0.11.10",
+    "@pyreon/vite-plugin": "^0.11.10",
     "vite": "^8.0.0"
   },
   "peerDependencies": {
-    "@pyreon/reactivity": "^0.11.8"
+    "@pyreon/reactivity": "^0.11.10"
   }
 }

package/src/entry-server.ts

@@ -1,61 +1,69 @@
-import type { RouteRecord } from '@pyreon/router'
-import type { Middleware, MiddlewareContext } from '@pyreon/server'
-import { createHandler } from '@pyreon/server'
-import type { ApiRouteEntry } from './api-routes'
-import { createApiMiddleware } from './api-routes'
-import { createApp } from './app'
-import type { RouteMiddlewareEntry, ZeroConfig } from './types'
+import type { ComponentFn } from "@pyreon/core";
+import type { RouteRecord } from "@pyreon/router";
+import type { Middleware, MiddlewareContext } from "@pyreon/server";
+import { createHandler } from "@pyreon/server";
+import type { ApiRouteEntry } from "./api-routes";
+import { createApiMiddleware } from "./api-routes";
+import { createApp } from "./app";
+import { render404Page } from "./not-found";
+import type { RouteMiddlewareEntry, ZeroConfig } from "./types";
 
 // ─── Server entry factory ───────────────────────────────────────────────────
 
 export interface CreateServerOptions {
-  /** Route definitions. */
-  routes: RouteRecord[]
-  /** Zero config. */
-  config?: ZeroConfig
-  /** Additional middleware. */
-  middleware?: Middleware[]
-  /** Per-route middleware from virtual:zero/route-middleware. */
-  routeMiddleware?: RouteMiddlewareEntry[]
-  /** API route entries from virtual:zero/api-routes. */
-  apiRoutes?: ApiRouteEntry[]
-  /** HTML template override. */
-  template?: string
-  /** Client entry path. */
-  clientEntry?: string
+	/** Route definitions. */
+	routes: RouteRecord[];
+	/** Zero config. */
+	config?: ZeroConfig;
+	/** Additional middleware. */
+	middleware?: Middleware[];
+	/** Per-route middleware from virtual:zero/route-middleware. */
+	routeMiddleware?: RouteMiddlewareEntry[];
+	/** API route entries from virtual:zero/api-routes. */
+	apiRoutes?: ApiRouteEntry[];
+	/** HTML template override. */
+	template?: string;
+	/** Client entry path. */
+	clientEntry?: string;
+	/** Component to render when no route matches (from _404.tsx). */
+	notFoundComponent?: ComponentFn;
 }
 
 /**
  * Create a middleware that dispatches per-route middleware based on URL pattern matching.
  */
-function createRouteMiddlewareDispatcher(entries: RouteMiddlewareEntry[]): Middleware {
-  return async (ctx: MiddlewareContext) => {
-    for (const entry of entries) {
-      if (matchPattern(entry.pattern, ctx.path)) {
-        const mw = Array.isArray(entry.middleware) ? entry.middleware : [entry.middleware]
-        for (const fn of mw) {
-          const result = await fn(ctx)
-          if (result) return result
-        }
-      }
-    }
-  }
+function createRouteMiddlewareDispatcher(
+	entries: RouteMiddlewareEntry[],
+): Middleware {
+	return async (ctx: MiddlewareContext) => {
+		for (const entry of entries) {
+			if (matchPattern(entry.pattern, ctx.path)) {
+				const mw = Array.isArray(entry.middleware)
+					? entry.middleware
+					: [entry.middleware];
+				for (const fn of mw) {
+					const result = await fn(ctx);
+					if (result) return result;
+				}
+			}
+		}
+	};
 }
 
 /** Simple URL pattern matcher supporting :param and :param* segments. */
 export function matchPattern(pattern: string, path: string): boolean {
-  const patternParts = pattern.split('/').filter(Boolean)
-  const pathParts = path.split('/').filter(Boolean)
-
-  for (let i = 0; i < patternParts.length; i++) {
-    const pp = patternParts[i]
-    if (!pp) continue
-    if (pp.endsWith('*')) return true // catch-all matches everything after
-    if (pp.startsWith(':')) continue // dynamic segment matches anything
-    if (pp !== pathParts[i]) return false
-  }
-
-  return patternParts.length === pathParts.length
+	const patternParts = pattern.split("/").filter(Boolean);
+	const pathParts = path.split("/").filter(Boolean);
+
+	for (let i = 0; i < patternParts.length; i++) {
+		const pp = patternParts[i];
+		if (!pp) continue;
+		if (pp.endsWith("*")) return true; // catch-all matches everything after
+		if (pp.startsWith(":")) continue; // dynamic segment matches anything
+		if (pp !== pathParts[i]) return false;
+	}
+
+	return patternParts.length === pathParts.length;
 }
 
 /**
@@ -69,35 +77,75 @@ export function matchPattern(pattern: string, path: string): boolean {
  * export default createServer({ routes, routeMiddleware, apiRoutes })
  */
 export function createServer(options: CreateServerOptions) {
-  const config = options.config ?? {}
-
-  const allMiddleware: Middleware[] = []
-
-  // API routes run first — they short-circuit before SSR
-  if (options.apiRoutes?.length) {
-    allMiddleware.push(createApiMiddleware(options.apiRoutes))
-  }
-
-  // Per-route middleware runs next
-  if (options.routeMiddleware?.length) {
-    allMiddleware.push(createRouteMiddlewareDispatcher(options.routeMiddleware))
-  }
-
-  // Then global middleware from config and options
-  allMiddleware.push(...(config.middleware ?? []))
-  allMiddleware.push(...(options.middleware ?? []))
-
-  const { App } = createApp({
-    routes: options.routes,
-    routerMode: 'history',
-  })
-
-  return createHandler({
-    App,
-    routes: options.routes,
-    middleware: allMiddleware,
-    mode: config.ssr?.mode ?? 'string',
-    ...(options.template ? { template: options.template } : {}),
-    ...(options.clientEntry ? { clientEntry: options.clientEntry } : {}),
-  })
+	const config = options.config ?? {};
+
+	const allMiddleware: Middleware[] = [];
+
+	// API routes run first — they short-circuit before SSR
+	if (options.apiRoutes?.length) {
+		allMiddleware.push(createApiMiddleware(options.apiRoutes));
+	}
+
+	// Per-route middleware runs next
+	if (options.routeMiddleware?.length) {
+		allMiddleware.push(
+			createRouteMiddlewareDispatcher(options.routeMiddleware),
+		);
+	}
+
+	// Then global middleware from config and options
+	allMiddleware.push(...(config.middleware ?? []));
+	allMiddleware.push(...(options.middleware ?? []));
+
+	const { App } = createApp({
+		routes: options.routes,
+		routerMode: "history",
+	});
+
+	const handler = createHandler({
+		App,
+		routes: options.routes,
+		middleware: allMiddleware,
+		mode: config.ssr?.mode ?? "string",
+		...(options.template ? { template: options.template } : {}),
+		...(options.clientEntry ? { clientEntry: options.clientEntry } : {}),
+	});
+
+	// Wrap handler with 404 detection when a notFoundComponent is provided
+	if (!options.notFoundComponent) return handler;
+
+	const NotFound = options.notFoundComponent;
+	const routePatterns = flattenRoutePatterns(options.routes);
+
+	return async (req: Request) => {
+		const url = new URL(req.url);
+		const pathname = url.pathname;
+
+		// Check if any defined route matches this path
+		if (!routePatterns.some((pattern) => matchPattern(pattern, pathname))) {
+			const fullHtml = await render404Page(NotFound, options.template);
+			return new Response(fullHtml, {
+				status: 404,
+				headers: { "Content-Type": "text/html; charset=utf-8" },
+			});
+		}
+
+		return handler(req);
+	};
+}
+
+/** Extract all URL patterns from a nested route tree. */
+function flattenRoutePatterns(routes: RouteRecord[], prefix = ""): string[] {
+	const patterns: string[] = [];
+	for (const route of routes) {
+		const fullPath =
+			route.path === "/" && prefix ? prefix : `${prefix}${route.path}`;
+		patterns.push(fullPath);
+		if (route.children) {
+			patterns.push(
+				...flattenRoutePatterns(route.children as RouteRecord[], fullPath),
+			);
+		}
+	}
+	return patterns;
 }

package/src/favicon.ts

@@ -0,0 +1,380 @@
+import { existsSync } from 'node:fs'
+import { readFile } from 'node:fs/promises'
+import { join } from 'node:path'
+import type { Plugin } from 'vite'
+
+let sharpWarned = false
+function warnSharpMissing() {
+  if (sharpWarned) return
+  sharpWarned = true
+  // oxlint-disable-next-line no-console
+  console.warn(
+    '\n[zero:favicon] sharp not installed — favicons will not be generated. Install for full support: bun add -D sharp\n',
+  )
+}
+
+// ─── Favicon generation plugin ──────────────────────────────────────────────
+//
+// Generates all favicon formats from a single source file (SVG or PNG):
+// - favicon.ico (16x16 + 32x32 combined)
+// - favicon.svg (copied if source is SVG)
+// - apple-touch-icon.png (180x180)
+// - icon-192.png (for web manifest)
+// - icon-512.png (for web manifest)
+// - site.webmanifest
+//
+// Usage:
+//   import { faviconPlugin } from "@pyreon/zero"
+//   export default { plugins: [zero(), faviconPlugin({ source: "./icon.svg" })] }
+
+export interface FaviconPluginConfig {
+  /** Path to the source icon (SVG or PNG, at least 512x512 for PNG). */
+  source: string
+  /** Theme color for web manifest. Default: "#ffffff" */
+  themeColor?: string
+  /** Background color for web manifest. Default: "#ffffff" */
+  backgroundColor?: string
+  /** App name for web manifest. Uses package.json name if not set. */
+  name?: string
+  /** Generate web manifest. Default: true */
+  manifest?: boolean
+  /**
+   * Dark mode favicon (SVG only).
+   * When provided, the SVG favicon uses prefers-color-scheme media query
+   * to switch between light and dark variants.
+   */
+  darkSource?: string
+}
+
+interface FaviconSize {
+  size: number
+  name: string
+}
+
+const SIZES: FaviconSize[] = [
+  { size: 16, name: 'favicon-16x16.png' },
+  { size: 32, name: 'favicon-32x32.png' },
+  { size: 180, name: 'apple-touch-icon.png' },
+  { size: 192, name: 'icon-192.png' },
+  { size: 512, name: 'icon-512.png' },
+]
+
+/**
+ * Favicon generation Vite plugin.
+ *
+ * Generates all required favicon formats at build time from a single source.
+ * In dev mode, serves the source directly.
+ *
+ * @example
+ * ```ts
+ * // vite.config.ts
+ * import { faviconPlugin } from "@pyreon/zero"
+ *
+ * export default {
+ *   plugins: [faviconPlugin({ source: "./src/assets/icon.svg" })],
+ * }
+ * ```
+ */
+export function faviconPlugin(config: FaviconPluginConfig): Plugin {
+  const themeColor = config.themeColor ?? '#ffffff'
+  const backgroundColor = config.backgroundColor ?? '#ffffff'
+  const generateManifest = config.manifest !== false
+
+  let root = ''
+  let isBuild = false
+
+  return {
+    name: 'pyreon-zero-favicon',
+    enforce: 'pre',
+
+    configResolved(resolvedConfig) {
+      root = resolvedConfig.root
+      isBuild = resolvedConfig.command === 'build'
+    },
+
+    // Dev server: serve generated favicons on-the-fly
+    configureServer(server) {
+      const sourcePath = join(root, config.source)
+
+      server.middlewares.use(async (req, res, next) => {
+        const url = req.url ?? ''
+
+        // Serve source as favicon.svg in dev
+        if (url === '/favicon.svg' && config.source.endsWith('.svg')) {
+          try {
+            const content = await readFile(sourcePath, 'utf-8')
+            res.setHeader('Content-Type', 'image/svg+xml')
+            res.end(content)
+            return
+          } catch { /* fall through */ }
+        }
+
+        // Serve generated PNGs on-demand
+        const sizeMatch = SIZES.find((s) => url === `/${s.name}`)
+        if (sizeMatch) {
+          const png = await resizeToPng(sourcePath, sizeMatch.size)
+          if (png) {
+            res.setHeader('Content-Type', 'image/png')
+            res.setHeader('Cache-Control', 'no-cache')
+            res.end(Buffer.from(png))
+            return
+          }
+        }
+
+        // Serve generated ICO on-demand
+        if (url === '/favicon.ico') {
+          const ico = await generateIco(sourcePath)
+          if (ico) {
+            res.setHeader('Content-Type', 'image/x-icon')
+            res.setHeader('Cache-Control', 'no-cache')
+            res.end(Buffer.from(ico))
+            return
+          }
+        }
+
+        // Serve manifest
+        if (url === '/site.webmanifest' && generateManifest) {
+          const manifest = {
+            name: config.name ?? 'App',
+            short_name: config.name ?? 'App',
+            icons: [
+              { src: '/icon-192.png', sizes: '192x192', type: 'image/png' },
+              { src: '/icon-512.png', sizes: '512x512', type: 'image/png' },
+            ],
+            theme_color: themeColor,
+            background_color: backgroundColor,
+            display: 'standalone',
+          }
+          res.setHeader('Content-Type', 'application/manifest+json')
+          res.end(JSON.stringify(manifest, null, 2))
+          return
+        }
+
+        next()
+      })
+    },
+
+    // Inject favicon <link> tags into HTML
+    transformIndexHtml() {
+      const isSvg = config.source.endsWith('.svg')
+      const tags: Array<{
+        tag: string
+        attrs: Record<string, string>
+        injectTo: 'head'
+      }> = []
+
+      if (isSvg) {
+        tags.push({
+          tag: 'link',
+          attrs: { rel: 'icon', type: 'image/svg+xml', href: '/favicon.svg' },
+          injectTo: 'head',
+        })
+      }
+
+      tags.push(
+        {
+          tag: 'link',
+          attrs: { rel: 'icon', type: 'image/png', sizes: '32x32', href: '/favicon-32x32.png' },
+          injectTo: 'head',
+        },
+        {
+          tag: 'link',
+          attrs: { rel: 'icon', type: 'image/png', sizes: '16x16', href: '/favicon-16x16.png' },
+          injectTo: 'head',
+        },
+        {
+          tag: 'link',
+          attrs: { rel: 'apple-touch-icon', sizes: '180x180', href: '/apple-touch-icon.png' },
+          injectTo: 'head',
+        },
+      )
+
+      if (generateManifest) {
+        tags.push({
+          tag: 'link',
+          attrs: { rel: 'manifest', href: '/site.webmanifest' },
+          injectTo: 'head',
+        })
+      }
+
+      tags.push({
+        tag: 'meta',
+        attrs: { name: 'theme-color', content: themeColor },
+        injectTo: 'head',
+      })
+
+      return tags
+    },
+
+    async generateBundle() {
+      if (!isBuild) return
+
+      const sourcePath = join(root, config.source)
+      if (!existsSync(sourcePath)) {
+        // oxlint-disable-next-line no-console
+        console.warn(`[zero:favicon] Source not found: ${sourcePath}`)
+        return
+      }
+
+      const isSvg = config.source.endsWith('.svg')
+
+      // Copy SVG as favicon.svg
+      if (isSvg) {
+        const svgContent = await readFile(sourcePath, 'utf-8')
+        let finalSvg = svgContent
+
+        // If dark mode variant provided, wrap in media query
+        if (config.darkSource) {
+          const darkPath = join(root, config.darkSource)
+          if (existsSync(darkPath)) {
+            const darkSvg = await readFile(darkPath, 'utf-8')
+            finalSvg = wrapSvgWithDarkMode(svgContent, darkSvg)
+          }
+        }
+
+        this.emitFile({
+          type: 'asset',
+          fileName: 'favicon.svg',
+          source: finalSvg,
+        })
+      }
+
+      // Generate PNG sizes via sharp
+      for (const { size, name } of SIZES) {
+        const pngBuffer = await resizeToPng(sourcePath, size)
+        if (pngBuffer) {
+          this.emitFile({
+            type: 'asset',
+            fileName: name,
+            source: pngBuffer,
+          })
+        }
+      }
+
+      // Generate favicon.ico (16 + 32)
+      const ico = await generateIco(sourcePath)
+      if (ico) {
+        this.emitFile({
+          type: 'asset',
+          fileName: 'favicon.ico',
+          source: ico,
+        })
+      }
+
+      // Generate web manifest
+      if (generateManifest) {
+        const manifest = {
+          name: config.name ?? 'App',
+          short_name: config.name ?? 'App',
+          icons: [
+            { src: '/icon-192.png', sizes: '192x192', type: 'image/png' },
+            { src: '/icon-512.png', sizes: '512x512', type: 'image/png' },
+          ],
+          theme_color: themeColor,
+          background_color: backgroundColor,
+          display: 'standalone',
+        }
+
+        this.emitFile({
+          type: 'asset',
+          fileName: 'site.webmanifest',
+          source: JSON.stringify(manifest, null, 2),
+        })
+      }
+    },
+  }
+}
+
+/**
+ * Wrap two SVGs into a single SVG that switches based on prefers-color-scheme.
+ */
+function wrapSvgWithDarkMode(lightSvg: string, darkSvg: string): string {
+  // Extract viewBox from light SVG
+  const viewBoxMatch = lightSvg.match(/viewBox="([^"]*)"/)
+  const viewBox = viewBoxMatch?.[1] ?? '0 0 32 32'
+
+  return `<svg xmlns="http://www.w3.org/2000/svg" viewBox="${viewBox}">
+  <style>
+    :root { color-scheme: light dark; }
+    @media (prefers-color-scheme: dark) { .light { display: none; } }
+    @media (prefers-color-scheme: light), (prefers-color-scheme: no-preference) { .dark { display: none; } }
+  </style>
+  <g class="light">${stripSvgWrapper(lightSvg)}</g>
+  <g class="dark">${stripSvgWrapper(darkSvg)}</g>
+</svg>`
+}
+
+function stripSvgWrapper(svg: string): string {
+  return svg
+    .replace(/<svg[^>]*>/, '')
+    .replace(/<\/svg>\s*$/, '')
+    .trim()
+}
+
+async function resizeToPng(input: string, size: number): Promise<Uint8Array | null> {
+  try {
+    const sharp = await import('sharp').then((m) => m.default ?? m)
+    return await sharp(input).resize(size, size, { fit: 'contain', background: { r: 0, g: 0, b: 0, alpha: 0 } } as any).png().toBuffer()
+  } catch {
+    warnSharpMissing()
+    return null
+  }
+}
+
+async function generateIco(input: string): Promise<Uint8Array | null> {
+  try {
+    const sharp = await import('sharp').then((m) => m.default ?? m)
+    const png16 = await sharp(input).resize(16, 16, { fit: 'contain', background: { r: 0, g: 0, b: 0, alpha: 0 } } as any).png().toBuffer()
+    const png32 = await sharp(input).resize(32, 32, { fit: 'contain', background: { r: 0, g: 0, b: 0, alpha: 0 } } as any).png().toBuffer()
+
+    // ICO format: header + directory entries + PNG data
+    return createIcoFromPngs([
+      { buffer: png16, size: 16 },
+      { buffer: png32, size: 32 },
+    ])
+  } catch {
+    warnSharpMissing()
+    return null
+  }
+}
+
+export interface IcoEntry {
+  buffer: Buffer
+  size: number
+}
+
+/** @internal Exported for testing */
+export function createIcoFromPngs(entries: IcoEntry[]): Uint8Array {
+  const headerSize = 6
+  const dirEntrySize = 16
+  const dirSize = dirEntrySize * entries.length
+  let dataOffset = headerSize + dirSize
+
+  // ICO header
+  const header = Buffer.alloc(headerSize)
+  header.writeUInt16LE(0, 0)              // reserved
+  header.writeUInt16LE(1, 2)              // type: icon
+  header.writeUInt16LE(entries.length, 4) // count
+
+  // Directory entries
+  const dirEntries = Buffer.alloc(dirSize)
+  const dataBuffers: Buffer[] = []
+
+  for (let i = 0; i < entries.length; i++) {
+    const entry = entries[i]!
+    const offset = i * dirEntrySize
+    dirEntries.writeUInt8(entry.size === 256 ? 0 : entry.size, offset)     // width
+    dirEntries.writeUInt8(entry.size === 256 ? 0 : entry.size, offset + 1) // height
+    dirEntries.writeUInt8(0, offset + 2)                                    // palette
+    dirEntries.writeUInt8(0, offset + 3)                                    // reserved
+    dirEntries.writeUInt16LE(1, offset + 4)                                 // color planes
+    dirEntries.writeUInt16LE(32, offset + 6)                                // bits per pixel
+    dirEntries.writeUInt32LE(entry.buffer.length, offset + 8)               // size
+    dirEntries.writeUInt32LE(dataOffset, offset + 12)                       // offset
+
+    dataOffset += entry.buffer.length
+    dataBuffers.push(entry.buffer)
+  }
+
+  return Buffer.concat([header, dirEntries, ...dataBuffers])
+}

package/src/font.ts

@@ -146,14 +146,38 @@ export function parseGoogleFamily(input: string): ResolvedFont {
       }
     }
 
-    // Static weights: wght@400;500;700
-    const weightMatch = spec.match(/wght@([\d;]+)/)
-    if (weightMatch && weightMatch[1]) {
-      return {
-        family,
-        italic,
-        variable: false,
-        weights: weightMatch[1].split(';').map(Number),
+    // Static weights — two formats:
+    // Simple:  "wght@400;500;700"
+    // Tuples:  "ital,wght@0,300;0,500;1,300;1,500" (ital_flag,weight pairs)
+    const afterAt = spec.split('@')[1]
+    if (afterAt) {
+      const entries = afterAt.split(';').filter(Boolean)
+      const weights = new Set<number>()
+
+      for (const entry of entries) {
+        if (entry.includes(',')) {
+          // Tuple format: "0,300" or "1,500" — last value is the weight
+          const parts = entry.split(',')
+          const weight = Number(parts[parts.length - 1])
+          if (weight > 0) weights.add(weight)
+          // Detect italic from tuple: "1,xxx" means italic
+          if (parts[0] === '1') italic = true
+        } else if (entry.includes('..')) {
+          // Variable range already handled above — skip
+        } else {
+          // Simple weight: "400"
+          const weight = Number(entry)
+          if (weight > 0) weights.add(weight)
+        }
+      }
+
+      if (weights.size > 0) {
+        return {
+          family,
+          italic,
+          variable: false,
+          weights: [...weights].sort((a, b) => a - b),
+        }
       }
     }
   }