@weft-js/start 0.0.0-stage → 0.1.1

package/src/mux.ts

@@ -0,0 +1,135 @@
+// The server's half of `link.ts`: one WebSocket, many lines, each a connection of its own. A `c` line is an `attach`, a
+// `r` line is a hub connection, and neither knows it isn't alone, so `id`, `exceptSelf`, `left`, buckets and session
+// re-checks stay per tab. `limits.connections` counts the socket, which is what it was protecting.
+
+import { StartError } from './data'
+import type { Scope } from './exec'
+import { sessionOf } from './mux-session'
+import { hub, validBody, type Conn, type Hub, type Sink } from './hub'
+import { attach, type Attached, type Peer } from './socket'
+
+const LINES = 64
+const HIGH = 64 * 1024
+
+interface Physical { send(text: string): void; close(code: number, reason?: string): void; backlog(): number }
+type Open = { kind: 'c'; a: Promise<Attached> } | { kind: 'r'; c: Promise<Conn | undefined> }
+
+const parsed = (text: string): unknown => {
+  try { return JSON.parse(text) } catch { return undefined }
+}
+
+const counts = new WeakMap<Hub, Map<string, number>>()
+const byUser = (h: Hub) => {
+  let m = counts.get(h)
+  if (!m) counts.set(h, (m = new Map()))
+  return m
+}
+
+export interface Muxed { message(text: string): void; close(): void }
+
+export async function muxed(peer: Physical, request: Request, scope: Scope, h: Hub = hub()): Promise<Muxed> {
+  const ctx = await scope.ctx()
+  const user = (ctx as { user?: { id?: string } }).user?.id
+  const users = byUser(h)
+  if (user !== undefined) {
+    if ((users.get(user) ?? 0) >= h.limits.connections) {
+      peer.close(1008, 'too many sockets')
+      scope.options.onDiagnostic?.({ code: 'R009', severity: 'error', message: `R009: user \`${user}\` already has ${h.limits.connections} sockets` })
+      return { message() {}, close() {} }
+    }
+    users.set(user, (users.get(user) ?? 0) + 1)
+  }
+  const lines = new Map<string, Open>()
+  const bucket = { tokens: h.limits.burst * 8, at: Date.now() }
+  let closed = false
+
+  /** Every tab has the per-socket bucket; this is what stops them adding up without end. */
+  const allowed = () => {
+    const now = Date.now(), rate = h.limits.perSecond * 8
+    bucket.tokens = Math.min(h.limits.burst * 8, bucket.tokens + ((now - bucket.at) * rate) / 1000)
+    bucket.at = now
+    return bucket.tokens-- >= 1
+  }
+  const end = (id: string, code: number, reason = '') => {
+    if (!lines.delete(id) || closed) return
+    peer.send(`x:${id}:${code}:${reason}`)
+  }
+
+  function openC(id: string) {
+    const p: Peer = { send: t => { if (lines.has(id)) peer.send(`f:${id}:${t}`) }, close: (code, reason) => end(id, code, reason), backlog: () => peer.backlog() }
+    lines.set(id, { kind: 'c', a: attach(p, request, scope, h, true).catch(() => {
+      end(id, 1011)
+      return { message() {}, close() {} } as unknown as Attached
+    }) })
+  }
+
+  function openR(id: string, hello: string) {
+    const body = parsed(hello)
+    if (!validBody(body) || body.k) return peer.send(`x:${id}:4000:${JSON.stringify({ code: 'Q002', message: 'a realtime line opened with a body of the wrong shape' })}`)
+    const sink: Sink = {
+      write: (event, data) => { if (lines.has(id)) peer.send(`r:${id}:${event}:${data}`) },
+      ping: () => { if (lines.has(id)) peer.send(`r:${id}:ping:`) },
+      backlog: () => peer.backlog(),
+      close: () => end(id, 1000),
+    }
+    const c = h.connect(request, scope, body, sink, true).catch(e => {
+      const out = e instanceof StartError ? { code: e.code, message: e.message } : { message: 'Realtime failed.' }
+      end(id, 4000, JSON.stringify(out))
+      return undefined
+    })
+    lines.set(id, { kind: 'r', c })
+  }
+
+  function shut(id: string, line: Open) {
+    lines.delete(id)
+    if (line.kind === 'c') void line.a.then(a => a.close())
+    else void line.c.then(c => c && h.close(c))
+  }
+
+  const drain = setInterval(() => {
+    if (peer.backlog() >= HIGH) return
+    for (const l of lines.values()) if (l.kind === 'r') void l.c.then(c => c && h.drain(c))
+  }, 100)
+  ;(drain as { unref?(): void }).unref?.()
+
+  peer.send(`h:${await sessionOf(ctx)}`)
+  return {
+    message(text) {
+      if (text === 'p') return peer.send('p')
+      if (text.length > h.limits.body + 64) return peer.close(1009, 'too big')
+      if (!allowed()) {
+        scope.options.onDiagnostic?.({ code: 'R008', severity: 'error', message: `R008: one browser sent over ${h.limits.perSecond * 8} messages a second` })
+        return peer.close(1008, 'rate limit')
+      }
+      const at = text.indexOf(':', 2)
+      const id = text.slice(2, at), rest = text.slice(at + 1)
+      const line = lines.get(id)
+      if (text[0] === 'f') {
+        if (line?.kind === 'c') void line.a.then(a => a.message(rest))
+        else if (line) {
+          let body: Body | undefined
+          try { body = JSON.parse(rest) } catch {}
+          if (validBody(body)) void line.c.then(c => c && h.change(c, request, scope.options, body)).catch(() => end(id, 1011))
+        }
+      } else if (text[0] === 'x') {
+        if (line) shut(id, line)
+      } else if (text[0] === 'o') {
+        if (line) return
+        if (lines.size >= LINES) return  peer.send(`x:${id}:1008:too many lines`)
+        if (rest[0] === 'c') openC(id)
+        else if (rest[0] === 'r') openR(id, rest.slice(2))
+      }
+    },
+    close() {
+      if (closed) return
+      closed = true
+      clearInterval(drain)
+      for (const [id, line] of Array.from(lines)) shut(id, line)
+      if (user !== undefined) {
+        const n = (users.get(user) ?? 1) - 1
+        if (n) users.set(user, n)
+        else users.delete(user)
+      }
+    },
+  }
+}

package/src/og/DefaultCard.tsx

@@ -0,0 +1,60 @@
+// The `image: 'auto'` default card (research 20 §4.1, §10): the page's title and description, the app's name and its
+// address, on the app's look. Colours and faces come from `site.card`, which warp and the text plugin fill in; one
+// image goes to every feed, so a card has one scheme, and each is checked against both kinds of feed.
+import { untrack } from '@weft-js/core'
+import type { Site } from '@weft-js/core/ssr'
+import { cardTitleSize } from '../derive.mjs'
+
+type CardColors = NonNullable<NonNullable<Site['card']>['light']>
+
+export interface DefaultProps {
+  title: string
+  description: string
+  site: Site
+  path?: string
+}
+
+const SCHEMES: Record<'dark' | 'light', Required<CardColors>> = {
+  dark: { background: '#100f0b', text: '#ebe8e0', subtle: '#a8a59d', accent: '#5fcf97' },
+  light: { background: '#f7f4ec', text: '#1f1d18', subtle: '#615e56', accent: '#1f7a50' },
+}
+
+const family = (name: string | undefined) => (name ? `'${name}',Inter` : 'Inter')
+
+/** The title without the template the site wraps around it: the card shows the site's name on its own. */
+function heading(title: string, template: string | undefined) {
+  const [before = '', after = ''] = template?.split('%s') ?? []
+  return title.startsWith(before) && title.endsWith(after) && title.length > before.length + after.length ? title.slice(before.length, title.length - after.length) : title
+}
+
+/** Everything the card draws, worked out once: a card renders one time, to a string. */
+function look({ title, description, site, path }: DefaultProps) {
+  const card = site.card ?? {}
+  const scheme = card.scheme ?? 'dark'
+  const c = { ...SCHEMES[scheme], ...card[scheme] }
+  for (const k of ['background', 'text', 'subtle', 'accent'] as const) if (card[k]) c[k] = card[k]!
+  const host = site.url?.replace(/^https?:\/\//, '').replace(/\/+$/, '')
+  const shown = heading(title, site.title)
+  return {
+    c, description, title: shown, name: site.name ?? '', size: cardTitleSize(shown),
+    display: family(card.fonts?.display?.family), body: family(card.fonts?.body?.family),
+    address: host && host + (path && path !== '/' ? path.replace(/[?#].*/, '') : ''),
+  }
+}
+
+export function DefaultCard(props: DefaultProps) {
+  const { c, title, description, name, size, display, body, address } = untrack(() => look(props))
+  return (
+    <div style={`display:flex;flex-direction:column;width:100%;height:100%;padding:68px 76px 60px;background-color:${c.background};color:${c.text};font-family:${body}`}>
+      <div style={`display:flex;align-items:center;font-family:${display};font-size:32px;font-weight:600;letter-spacing:-0.3px`}>
+        <div style={`width:22px;height:22px;border-radius:5px;background-color:${c.accent};margin-right:16px`} />
+        <span>{name}</span>
+      </div>
+      <div style="display:flex;flex-direction:column;justify-content:center;flex:1;min-height:0;padding:24px 0">
+        <div style={`display:block;font-family:${display};font-size:${size}px;font-weight:700;line-height:1.08;letter-spacing:-1.5px;overflow-wrap:anywhere;line-clamp:3`}>{title}</div>
+        {description ? <div style={`display:block;margin-top:26px;font-size:30px;line-height:1.38;color:${c.subtle};line-clamp:3`}>{description}</div> : null}
+      </div>
+      {address ? <div style={`display:flex;align-items:center;font-size:24px;color:${c.subtle};border-top:1px solid ${c.subtle}44;padding-top:22px`}>{address}</div> : null}
+    </div>
+  )
+}

package/src/og/fonts.mjs

@@ -0,0 +1,64 @@
+// Fonts in any format the web uses, for either Takumi build. Takumi native reads TTF, OTF, WOFF and WOFF2; the wasm
+// build doesn't read WOFF (1.0), and Satori never read WOFF2. So WOFF is unpacked to its SFNT here (zlib per table,
+// with the platform's DecompressionStream, which Node, Bun and workerd all have), and every build gets every format.
+
+const tag = (b, o) => String.fromCharCode(b[o], b[o + 1], b[o + 2], b[o + 3])
+
+/** 'woff' | 'woff2' | 'ttf' | 'otf' | null, from the file's magic number. */
+export function fontFormat(bytes) {
+  const t = tag(bytes, 0)
+  if (t === 'wOFF') return 'woff'
+  if (t === 'wOF2') return 'woff2'
+  if (t === 'OTTO') return 'otf'
+  if (t === '\0\x01\0\0' || t === 'true') return 'ttf'
+  return null
+}
+
+async function inflate(bytes) {
+  const stream = new Blob([bytes]).stream().pipeThrough(new DecompressionStream('deflate'))
+  return new Uint8Array(await new Response(stream).arrayBuffer())
+}
+
+/** WOFF 1.0 → the SFNT (TTF/OTF) it wraps (W3C WOFF 1.0 §4–5). */
+export async function woffToSfnt(woff) {
+  const v = new DataView(woff.buffer, woff.byteOffset, woff.byteLength)
+  const numTables = v.getUint16(12)
+  const tables = []
+  for (let i = 0; i < numTables; i++) {
+    const at = 44 + i * 20
+    const offset = v.getUint32(at + 4), compLength = v.getUint32(at + 8), origLength = v.getUint32(at + 12)
+    const raw = woff.subarray(offset, offset + compLength)
+    tables.push({ tag: v.getUint32(at), checksum: v.getUint32(at + 16), data: compLength < origLength ? await inflate(raw) : raw })
+  }
+  let size = 12 + 16 * numTables
+  for (const t of tables) size += (t.data.length + 3) & ~3
+  const out = new Uint8Array(size)
+  const w = new DataView(out.buffer)
+  const log2 = Math.floor(Math.log2(numTables))
+  w.setUint32(0, v.getUint32(4)) // flavor
+  w.setUint16(4, numTables)
+  w.setUint16(6, 16 << log2)
+  w.setUint16(8, log2)
+  w.setUint16(10, numTables * 16 - (16 << log2))
+  let offset = 12 + 16 * numTables
+  tables.forEach((t, i) => {
+    const at = 12 + i * 16
+    w.setUint32(at, t.tag)
+    w.setUint32(at + 4, t.checksum)
+    w.setUint32(at + 8, offset)
+    w.setUint32(at + 12, t.data.length)
+    out.set(t.data, offset)
+    offset += (t.data.length + 3) & ~3
+  })
+  return out
+}
+
+/** `{ name, data, weight?, style? }[]` in any format → the same with bytes every Takumi build reads. */
+export async function normalizeFonts(fonts) {
+  return Promise.all(fonts.map(async f => {
+    const data = f.data instanceof Uint8Array ? f.data : new Uint8Array(f.data)
+    const format = fontFormat(data)
+    if (!format) throw new Error(`weft/og: font "${f.name}" isn't TTF, OTF, WOFF or WOFF2`)
+    return { ...f, data: format === 'woff' ? await woffToSfnt(data) : data }
+  }))
+}

package/src/og/images.mjs

@@ -0,0 +1,54 @@
+// `<img src>` in a card: fetched at render with a timeout and a size cap (research 20 §4.1), cached by URL, and left
+// out of the card (keeping its box, so the layout doesn't move) when the fetch fails, instead of failing the request.
+
+/** An LRU of fetched image bytes by URL, capped by total bytes. */
+export function imageCache(maxBytes = 32 << 20) {
+  const map = new Map()
+  let bytes = 0
+  return {
+    get(src) {
+      const hit = map.get(src)
+      if (hit) { map.delete(src); map.set(src, hit) }
+      return hit
+    },
+    set(src, data) {
+      if (data.length > maxBytes) return
+      map.set(src, data)
+      bytes += data.length
+      for (const [k, v] of map) {
+        if (bytes <= maxBytes) break
+        map.delete(k)
+        bytes -= v.length
+      }
+    },
+  }
+}
+
+/**
+ * Fetches every remote `src` in the tree. `allow(url)` decides which hosts a card may load from (the on-demand route
+ * renders data from `load`, so this is the SSRF guard); the default allows any https URL.
+ * Returns the images Takumi needs, and the srcs that failed.
+ */
+export async function loadImages(srcs, { cache, timeoutMs = 1500, maxBytes = 4 << 20, allow = u => u.protocol === 'https:', fetch = globalThis.fetch } = {}) {
+  const images = [], failed = []
+  await Promise.all([...new Set(srcs)].map(async src => {
+    if (src.startsWith('data:')) return // Takumi decodes data URIs itself
+    const hit = cache?.get(src)
+    if (hit) return void images.push({ src, data: hit })
+    try {
+      const url = new URL(src)
+      if (!allow(url)) throw new Error('not allowed')
+      const res = await fetch(url, { signal: AbortSignal.timeout(timeoutMs), redirect: 'error' })
+      if (!res.ok) throw new Error(`HTTP ${res.status}`)
+      if (!res.headers.get('content-type')?.startsWith('image/')) throw new Error('not an image')
+      if (Number(res.headers.get('content-length') ?? 0) > maxBytes) throw new Error('too large')
+      const data = new Uint8Array(await res.arrayBuffer())
+      if (data.length > maxBytes) throw new Error('too large')
+      cache?.set(src, data)
+      images.push({ src, data })
+    } catch (e) {
+      failed.push({ src, reason: e?.name === 'TimeoutError' ? `timed out after ${timeoutMs} ms` : String(e?.message ?? e) })
+    }
+  }))
+  return { images, failed }
+}

package/src/og/index.mjs

@@ -0,0 +1,146 @@
+// renderCard for weft (research 20 §4, §9; promoted from spikes/og/card): weft SSR HTML → PNG/JPEG/WebP/SVG, on
+// Takumi, with what Satori did better added around it:
+//   - strict styles: every declaration is checked once against the renderer (an invalid value would fail the whole
+//     card, an unknown property is silently dropped) and reported as H005; production drops the bad declaration and
+//     renders the rest instead of failing the request
+//   - any font format (WOFF too, which Takumi's wasm build can't read), resolved before the first render
+//   - SVG output and a ready `Response` with the §4.3 cache headers
+//   - a browser preview that matches the PNG: the same preflight (border-box everywhere) and the same font bytes
+// and what neither did: SSR hole comments are removed (both HTML parsers drop text before a comment), and remote
+// images are fetched with a timeout, size cap and host allowlist, cached, and left out (box kept) when they fail.
+import { fromHtml } from '@takumi-rs/helpers/html'
+import { normalizeFonts } from './fonts.mjs'
+import { imageCache, loadImages } from './images.mjs'
+import { native } from './native.mjs'
+
+/** Applied to every card, in the PNG and in the preview. Takumi lays out border-box by default; browsers don't. */
+export const PREFLIGHT = '*,*::before,*::after{box-sizing:border-box}'
+/** The size of a generated card. */
+export const SIZE = { width: 1200, height: 630 }
+const TYPES = { png: 'image/png', jpeg: 'image/jpeg', webp: 'image/webp', svg: 'image/svg+xml' }
+
+const stripComments = html => html.replace(/<!--[\s\S]*?-->/g, '')
+const kebab = k => k.replace(/^Webkit/, '-webkit-').replace(/[A-Z]/g, c => '-' + c.toLowerCase())
+// A value no CSS grammar accepts: a property the renderer knows rejects it, and one it doesn't know takes anything.
+// (An identifier won't do: `text-overflow`, `grid-template-columns` and `font-family` accept custom idents.)
+const PROBE = '}{'
+
+const renderers = new Map() // fonts array → the renderer registered with them
+
+/**
+ * The one seam the server uses (research 20 §4.2): HTML at `size`, drawn with `fonts`, to PNG bytes. Diagnostics (H005
+ * styles, H008 images) go to `onDiagnostic`; `strict` (dev, `weft build`) throws on an error instead. Native Takumi;
+ * the edge build (`@takumi-rs/wasm`) plugs in here when an edge preset needs it.
+ *
+ * @param {string} html
+ * @param {{ width?: number; height?: number }} [size]
+ * @param {{ name: string; data: Uint8Array; weight?: number; style?: 'normal' | 'italic' }[]} [fonts]
+ * @param {{ strict?: boolean; onDiagnostic?: (d: { code: string; severity: string; message: string }) => void; images?: unknown }} [options]
+ */
+export async function renderCard(html, size = SIZE, fonts = [], { strict = false, onDiagnostic, images } = {}) {
+  let r = renderers.get(fonts)
+  if (!r) renderers.set(fonts, (r = native().then(backend => createCardRenderer({ backend, fonts, images }))))
+  const out = await (await r).render(html, { width: size.width ?? SIZE.width, height: size.height ?? SIZE.height, strict })
+  for (const d of out.diagnostics) onDiagnostic?.(d)
+  return out.body
+}
+
+/**
+ * `backend` is `await native()` (card/native.mjs) or `await wasm(module)` (card/wasm.mjs). `fonts` is `{ name, data, weight?, style? }[]` in TTF, OTF,
+ * WOFF or WOFF2. `images` configures `<img>` fetching (see images.mjs).
+ */
+export async function createCardRenderer({ backend, fonts = [], images: imageOptions = {} }) {
+  const renderer = new backend.Renderer()
+  for (const font of await normalizeFonts(fonts)) await renderer.registerFont(font)
+  const cache = imageCache(imageOptions.cacheBytes)
+  const verdicts = new Map() // `${prop}\0${value}` → null (fine) | { severity, message }
+
+  const accepts = async style => {
+    try { await renderer.measure({ type: 'container', style }, { width: 1, height: 1 }); return true } catch { return false }
+  }
+  async function judge(prop, value) {
+    const key = `${prop}\0${value}`
+    if (verdicts.has(key)) return verdicts.get(key)
+    let v = null
+    if (!(await accepts({ [prop]: value }))) {
+      v = { severity: 'error', message: `\`${kebab(prop)}: ${value}\` isn't a value the card renderer accepts; the declaration is dropped.` }
+    } else if (await accepts({ [prop]: PROBE })) {
+      v = { severity: 'warning', message: `\`${kebab(prop)}\` isn't a property the card renderer supports; it has no effect.` }
+    }
+    verdicts.set(key, v)
+    return v
+  }
+
+  /** Walks the tree: checks styles (dropping invalid declarations), and collects image nodes. */
+  async function prepare(html) {
+    const { node, css } = fromHtml(stripComments(html))
+    const diagnostics = [], imageNodes = []
+    const walk = async (n, path) => {
+      if (n.type === 'image') imageNodes.push(n)
+      for (const [prop, value] of Object.entries(n.style ?? {})) {
+        const v = await judge(prop, value)
+        if (!v) continue
+        diagnostics.push({ code: 'H005', severity: v.severity, message: v.message, element: path })
+        if (v.severity === 'error') delete n.style[prop]
+      }
+      for (const [i, c] of (n.children ?? []).entries()) await walk(c, `${path} > ${c.tagName ?? c.type}:nth-child(${i + 1})`)
+    }
+    await walk(node, node.tagName ?? node.type)
+    return { node, css, diagnostics, imageNodes }
+  }
+
+  return {
+    /** Diagnostics only (`weft check`, dev): nothing is fetched or rasterized. */
+    async check(html) {
+      return (await prepare(html)).diagnostics
+    },
+
+    /**
+     * Renders a card. Never throws on a card's styles or images: those come back as diagnostics, and the card renders
+     * without them. `strict` (dev, `weft build`) throws on any error-severity diagnostic instead.
+     */
+    async render(html, { width = SIZE.width, height = SIZE.height, format = 'png', quality, strict = false } = {}) {
+      const { node, css, diagnostics, imageNodes } = await prepare(html)
+      const { images, failed } = await loadImages(imageNodes.map(n => n.src), { cache, ...imageOptions })
+      for (const f of failed) {
+        diagnostics.push({ code: 'H008', severity: 'warning', message: `Card image ${f.src} didn't load (${f.reason}); the card renders without it.` })
+        for (const n of imageNodes) if (n.src === f.src) Object.assign(n, { type: 'container', src: undefined, style: { width: n.width && `${n.width}px`, height: n.height && `${n.height}px`, ...n.style } })
+      }
+      if (strict && diagnostics.some(d => d.severity === 'error')) {
+        throw Object.assign(new Error(diagnostics.filter(d => d.severity === 'error').map(d => `${d.code} ${d.message} (${d.element})`).join('\n')), { diagnostics })
+      }
+      const options = { width, height, images, css: [PREFLIGHT, ...css] }
+      const body = format === 'svg'
+        ? await renderer.renderSvg(node, options)
+        : new Uint8Array(await renderer.render(node, { ...options, format, ...(quality != null && { quality }) }))
+      return { body, type: TYPES[format], diagnostics }
+    },
+  }
+}
+
+/**
+ * The HTTP response for `/_weft/og/<route>.png?v=<hash>` (§4.3): immutable, since the URL is content-addressed, except
+ * in dev, where an edit must show on reload.
+ */
+export function cardResponse({ body, type }, { dev = false } = {}) {
+  return new Response(body, {
+    headers: { 'content-type': type, 'cache-control': dev ? 'no-store' : 'public, max-age=31536000, immutable' },
+  })
+}
+
+/**
+ * The card as a page for `weft open --og`: the same HTML, preflight and font bytes as the PNG, at the card's size, so a
+ * browser shows what the renderer draws.
+ */
+export function previewHtml(html, { fonts = [], width = SIZE.width, height = SIZE.height } = {}) {
+  const faces = fonts.map(f => `@font-face{font-family:"${f.name}";font-weight:${f.weight ?? 400};font-style:${f.style ?? 'normal'};src:url(data:font/${fontMime(f.data)};base64,${base64(f.data)})}`).join('')
+  return `<!doctype html><meta charset="utf-8"><style>${faces}${PREFLIGHT}html,body{margin:0}#card{width:${width}px;height:${height}px;overflow:hidden;display:flex}</style><div id="card">${stripComments(html)}</div>`
+}
+
+const fontMime = d => ({ wOFF: 'woff', wOF2: 'woff2', OTTO: 'otf' })[String.fromCharCode(...d.subarray(0, 4))] ?? 'ttf'
+
+function base64(bytes) {
+  let s = ''
+  for (let i = 0; i < bytes.length; i += 0x8000) s += String.fromCharCode(...bytes.subarray(i, i + 0x8000))
+  return btoa(s)
+}

package/src/og/native.mjs

@@ -0,0 +1,29 @@
+// `@takumi-rs/core`: Node, Bun and Deno servers, `weft build`, Vercel and Netlify Node functions. A file of its own so
+// an edge bundle (`@takumi-rs/wasm`, spikes/og/card/wasm.mjs) never pulls in the native addon. Both builds draw byte-identical cards (§9.4).
+export async function native() {
+  // Takumi's addon in the same process as a later Rolldown pass kills a Windows `weft build` (0xC0000005) before the
+  // server is written. WEFT_START_DIR means a build, and the cards come out the same.
+  if (globalThis.process?.platform === 'win32' && globalThis.process.env.WEFT_START_DIR) return wasmBackend(globalThis.process.env.WEFT_START_DIR)
+  const { Renderer } = await import('@takumi-rs/core').catch(linked)
+  return { name: 'native', Renderer }
+}
+
+/**
+ * A prerender runs from a bundle in the app's `node_modules/.nitro`. An app that links `@weft-js/start` from a workspace
+ * has no hoisted `@takumi-rs/core` there, so a build says where @weft-js/start is (app.mjs).
+ */
+async function linked(error) {
+  const from = globalThis.process?.env.WEFT_START_DIR
+  if (!from) throw error
+  const { createRequire } = await import('node:module')
+  return createRequire(`${from}/package.json`)('@takumi-rs/core')
+}
+
+/** The wasm renderer, found from `start` (the @weft-js/start directory) because a prerender runs from a bundle. */
+export async function wasmBackend(start) {
+  const [{ createRequire }, { readFile }, { dirname, join }, { pathToFileURL }] = await Promise.all(['node:module', 'node:fs/promises', 'node:path', 'node:url'].map(m => import(/* @vite-ignore */ m)))
+  const root = dirname(dirname(createRequire(`${start}/package.json`).resolve('@takumi-rs/wasm')))
+  const { default: init, Renderer } = await import(/* @vite-ignore */ pathToFileURL(join(root, 'dist/export.mjs')).href)
+  await init({ module_or_path: await readFile(join(root, 'pkg/takumi_wasm_bg.wasm')) })
+  return { name: 'wasm', Renderer }
+}

package/src/range.mjs

@@ -0,0 +1,19 @@
+// Byte ranges for built video and audio. Nitro's static handler has none and runs before any middleware, and Safari
+// won't play a video without them, so this Nitro plugin answers ranged requests for those files in front of the app.
+export default nitro => {
+  const app = nitro.fetch
+  nitro.fetch = async (request, ...rest) => {
+    const range = /^bytes=(\d+)-(\d*)$/.exec(request.headers.get('range') ?? '')
+    const id = range && new URL(request.url).pathname
+    if (!id?.startsWith('/assets/')) return app(request, ...rest)
+    // Lazily: the prerender step builds this file without Nitro's asset table.
+    const { getAsset, readAsset } = await import('#nitro/virtual/public-assets')
+    const asset = getAsset(id)
+    if (!/^(video|audio)\//.test(asset?.type ?? '')) return app(request, ...rest)
+    const bytes = Buffer.from(await readAsset(id))
+    const start = Number(range[1])
+    const end = Math.min(range[2] ? Number(range[2]) : Infinity, bytes.length - 1)
+    if (start > end) return new Response(null, { status: 416, headers: { 'content-range': `bytes */${bytes.length}` } })
+    return new Response(bytes.subarray(start, end + 1), { status: 206, headers: { 'content-type': asset.type, 'accept-ranges': 'bytes', 'content-range': `bytes ${start}-${end}/${bytes.length}`, 'cache-control': 'public, max-age=31536000, immutable' } })
+  }
+}

package/src/router.ts

@@ -0,0 +1,149 @@
+// The route state both sides render from (research 25 §3). A page is a chain of levels, outer to inner: the root
+// layout, nested layouts, the page. Each level is three boxes: which route it shows, its params and its loader
+// data. Navigating writes only what changed: a level that keeps its route keeps its component and gets new params
+// or data in place (the bindings that read them re-run, nothing remounts); the first level whose route changes
+// renders its new route, and everything inside it goes. One state per request on the server (passed down as a
+// prop), one per tab on the client.
+
+import { state, untrack, type State,type SsrData } from '@weft-js/core'
+import type { Merged } from '@weft-js/core/ssr'
+import type { Wire } from './data'
+
+/**
+ * One level as the server sends it: `d` lists the data's deferred fields (promises on the server, research 25 §4),
+ * `t` the tags of the queries its `load` read (a mutation that invalidates one refreshes the route, research 27 §4).
+ */
+export interface Match {
+  id: string
+  params: Record<string, string>
+  data?: unknown
+  d?: string[] | undefined
+  t?: string[] | undefined
+  /** A static level: no client code (PLAN §11). `h`: its HTML (a navigation), `x`: a hash of it, to skip an unchanged one. */
+  s?: 1
+  h?: string
+  x?: string
+}
+
+export interface Level {
+  id: State<string | undefined>
+  params: State<Record<string, string>>
+  data: State<unknown>
+  /** A static level's HTML: empty for the page's own; undefined for a level with client code. */
+  html: State<string | undefined>
+  x?: string | undefined
+}
+
+/** A route, layout or island: its props are its own, so nothing here can call one without a cast. */
+export type Component = (props: never) => unknown
+
+export interface RouteState {
+  levels: Level[]
+  /** The current path (pathname + search). */
+  path: State<string>
+  status: State<number>
+  /** Loaded route components by id. */
+  comps: Record<string, Component>
+  /** Client: shows a static level's HTML, with the next level inside it. */
+  mount?: (html: string, depth: number, next: () => unknown) => unknown
+  /** Around a level's component, at the same point on both sides: the server's markers, the client's key scope. */
+  around?: (depth: number, id: string, body: () => unknown) => unknown
+}
+
+/** What `/_weft/data/<path>` answers and what the page carries in `#weft-route`: the matches, the head, the status. */
+export interface RoutePayload {
+  m: Match[]
+  p: string
+  s: number
+  h?: Merged
+  /** A redirect (the client navigates there instead). */
+  r?: string
+  /** The queries the loaders resolved, for the client cache (navigation only; a page carries `#weft-cache`). */
+  c?: Wire[]
+  /** The islands in the static levels that can't wait, whose code has to be there first. */
+  i?: string[]
+  /** A navigation's page data, for those islands. */
+  b?: SsrData | null
+}
+
+/** The route state of the render in progress: a server pass sets it as it starts (passes are synchronous). */
+export const active: { route?: RouteState } = {}
+
+export function createRouteState(payload: RoutePayload, comps: Record<string, Component>): RouteState {
+  const r: RouteState = { levels: [], path: state(payload.p), status: state(payload.s), comps }
+  payload.m.forEach((m, d) => {
+    const lv = level(r, d)
+    lv.id.value = m.id
+    lv.params.value = m.params
+    lv.data.value = m.data
+    lv.html.value = m.s ? m.h ?? '' : undefined
+    lv.x = m.x
+  })
+  return r
+}
+
+/** Level `d`, made on first use (an empty level renders nothing). */
+export function level(r: RouteState, d: number): Level {
+  return (r.levels[d] ??= { id: state<string | undefined>(undefined), params: state({}), data: state<unknown>(undefined), html: state<string | undefined>(undefined) })
+}
+
+const same = (a: unknown, b: unknown) => a === b || JSON.stringify(a) === JSON.stringify(b)
+
+/**
+ * Show `matches`: levels that keep their route get their new params and data (only when they differ, so a shared
+ * layout whose data didn't change sees no write at all); the first level whose route changes, and every level after
+ * it, switch route.
+ */
+export function applyMatches(r: RouteState, matches: Match[], path: string, status: number) {
+  untrack(() => {
+    const depth = Math.max(matches.length, r.levels.length)
+    let fresh = false
+    for (let d = 0; d < depth; d++) {
+      const m = matches[d]
+      const lv = level(r, d)
+      if (m) {
+        if (!same(lv.params.value, m.params)) lv.params.value = m.params
+        if (!same(lv.data.value, m.data)) lv.data.value = m.data
+        if (!m.s) lv.html.value = undefined
+        else if (fresh || lv.x !== m.x || lv.id.value !== m.id) {
+          lv.html.value = m.h
+          fresh = true // its markers for the levels below are gone with it, so those can't adopt the page
+        }
+        lv.x = m.x
+      }
+      if (lv.id.value !== m?.id) lv.id.value = m?.id
+    }
+    if (r.path.value !== path) r.path.value = path
+    if (r.status.value !== status) r.status.value = status
+  })
+}
+
+/**
+ * The tab's route state and navigation, set by `start()` (client.tsx). Server renders never touch them. The query
+ * cache (data.ts, loaded only by apps that use a query) hooks in here, so `start()` doesn't ship it: `seed` takes
+ * the entries a navigation brought (`seeds` holds them until it loads), `invalidated` refreshes the route data.
+ */
+export const client: {
+  route?: RouteState
+  navigate?: (href: string, options?: NavigateOptions & { replace?: boolean | undefined }) => Promise<void>
+  seed?: (list: Wire[]) => void
+  seeds?: Wire[] | undefined
+  invalidated?: (tags: string[]) => void
+  /** Dev: server code changed, so whatever a query read may have too. */
+  refreshed?: () => void
+} = {}
+
+/** `navigate()`: replace the history entry, and keep the scroll. */
+export interface NavigateOptions {
+  /** Replace the history entry instead of pushing one. */
+  replace?: boolean | undefined
+  /** Keep the scroll position (default: top, or the URL's #hash). */
+  scroll?: false
+}
+
+/** Go to `href` without a page load (a full load before `start()` ran, or for another origin). */
+export function navigate(href: string, options?: NavigateOptions): Promise<void> {
+  if (client.navigate) return client.navigate(href, options)
+  location.assign(href)
+  return Promise.resolve()
+}