@christianirack/brainllm-runtime 0.0.0-stage → 0.1.0

package/brain-env.js

@@ -0,0 +1,160 @@
+// BRAINLLM lifecycle and environment helpers (INTERNALS §41, #169). Each one cleans up with the component that called
+// it (the owner's effects are disposed on unmount), and none of them runs timers, observers or listeners while the
+// server renders (server.mjs SSR or the build's prerender: globalThis.__brainSSR / __brainRoute are set), so a render
+// never keeps Node alive. Values meant for markup (`media`, `visible`, `debounce`) are read-only nodes read with `.v`.
+import { _rt, sig, fx, untrack } from './brain.js'
+
+const G = globalThis, I = _rt()
+const onServer = () => !!(G.__brainSSR || G.__brainRoute)
+const ro = n => ({ get v() { return n.v } })
+const ms = t => {
+  if (typeof t === 'number') return t
+  const m = /^(\d+(?:\.\d+)?)(ms|s|m|h)$/.exec(String(t).trim())
+  if (!m) throw Error(`brain-env: "${t}" is not a duration (300ms, 30s, 5m, 1h)`)
+  return m[1] * { ms: 1, s: 1e3, m: 6e4, h: 36e5 }[m[2]]
+}
+// runs `f` when the component unmounts (an fx with no reads: its cleanup is the owner's disposal)
+const onDispose = f => fx(() => f)
+
+// mounted(f): after the component's nodes are in the document. A returned function runs on unmount.
+export function mounted(f) {
+  if (onServer()) return
+  let alive = true, c
+  queueMicrotask(() => alive && (c = untrack(f)))
+  onDispose(() => ((alive = false), typeof c === 'function' && c()))
+}
+
+// watch(() => src, (v, old) => …): runs the callback when the source changes, not on the first read; the callback is
+// not tracked. A returned function is its cleanup (before the next run and on unmount).
+export function watch(src, cb) {
+  let first = true, old
+  fx(() => {
+    const v = src()
+    if (first) return void ((first = false), (old = v))
+    const o = old
+    old = v
+    return untrack(() => cb(v, o))
+  })
+}
+
+// tick(): resolves once pending updates have reached the DOM
+export const tick = () => new Promise(r => setTimeout(r, 0))
+
+// every('30s', f): an interval, paused while the tab is hidden
+export function every(t, f) {
+  if (onServer()) return
+  const n = ms(t), d = G.document
+  let id = 0
+  const sync = () => (clearInterval(id), (id = d && d.hidden ? 0 : setInterval(() => untrack(f), n)))
+  sync()
+  if (d && d.addEventListener) d.addEventListener('visibilitychange', sync)
+  onDispose(() => (clearInterval(id), d && d.removeEventListener && d.removeEventListener('visibilitychange', sync)))
+}
+
+// media('(max-width: 600px)') → .v true/false, following the viewport
+export function media(q) {
+  const mq = !onServer() && G.matchMedia ? G.matchMedia(q) : null
+  const n = sig(!!(mq && mq.matches))
+  if (mq) {
+    const on = e => (n.v = e.matches)
+    mq.addEventListener('change', on)
+    onDispose(() => mq.removeEventListener('change', on))
+  }
+  return ro(n)
+}
+
+// visible(ref) → .v true while the element is in the viewport (IntersectionObserver); a ref may still be empty
+export function visible(r, o) {
+  const n = sig(false)
+  if (onServer() || !G.IntersectionObserver) return ro(n)
+  fx(() => {
+    const el = r && r.nodeType ? r : r && r.v
+    if (!el) return
+    const io = new IntersectionObserver(es => (n.v = es[es.length - 1].isIntersecting), o)
+    io.observe(el)
+    return () => io.disconnect()
+  })
+  return ro(n)
+}
+
+// debounce(() => value, '300ms') → .v follows the value once it has been still for that long
+export function debounce(f, t) {
+  const n = sig(untrack(f)), wait = ms(t)
+  let first = true
+  fx(() => {
+    const v = f()
+    if (first) return void (first = false)
+    if (onServer()) return void (n.v = v)
+    const id = setTimeout(() => (n.v = v), wait)
+    return () => clearTimeout(id)
+  })
+  return ro(n)
+}
+
+// <component is={C} …props> → dyn(parent, () => C, $p, anchor): mounts C before the anchor and remounts only when the
+// component itself changes (a null C renders nothing). The mounted component belongs to the caller's owner.
+export function dyn(p, c, $p, end) {
+  const own = I.owner()
+  let cur, nodes = [], d = null
+  const clear = () => (d && d(), (d = null), I.rm(nodes), (nodes = []))
+  fx(() => {
+    const C = c()
+    if (C === cur) return
+    cur = C
+    untrack(() => {
+      clear()
+      if (C) I.root(x => ((d = x), (nodes = I.nodes(C($p || {})))), own)
+      const par = (end && end.parentNode) || p
+      for (const n of nodes) par.insertBefore(n, end || null)
+    })
+  })
+  onDispose(clear)
+}
+
+// <Portal to="#layer"> → portal(target, () => children): renders the children into another element (a selector or an
+// element; document.body by default) and removes them on unmount. Returns what to insert in place: nothing in the
+// browser; while the server renders, the children themselves (they stay where they are written).
+export function portal(target, f) {
+  if (onServer() || !G.document) return f()
+  const t = (typeof target === 'string' ? document.querySelector(target) : target) || document.body
+  let nodes = [], d = null
+  I.root(x => ((d = x), (nodes = I.nodes(f()))), I.owner())
+  for (const n of nodes) t.appendChild(n)
+  onDispose(() => (d && d(), I.rm(nodes)))
+  return []
+}
+
+// route() → { path, params, query }, read-only and reactive (each a signal read): path without the base path
+// (<meta name="brain-base">), query from the URL, params from the page's <meta name="brain-params" content='{"id":"7"}'>
+// (the server knows the route's pattern; the client does not). brain-router calls globalThis.__brainRouted after every
+// client navigation. While the server renders, the values come from globalThis.__brainRoute (server.mjs, prerender).
+let cur = null
+const paramsOf = () => {
+  try {
+    const m = G.document && document.querySelector('meta[name=brain-params]')
+    return (m && JSON.parse(m.getAttribute('content'))) || {}
+  } catch {
+    return {}
+  }
+}
+const strip = p => {
+  const m = G.document && document.querySelector('meta[name=brain-base]'), b = (m && m.getAttribute('content')) || '/'
+  return b !== '/' && (p + '/').startsWith(b) ? '/' + p.slice(b.length) : p
+}
+const read = () => {
+  const u = new URL(location.href)
+  return [strip(u.pathname), paramsOf(), Object.fromEntries(u.searchParams)]
+}
+export function route() {
+  const s = G.__brainRoute
+  if (s) return { path: s.path, params: s.params || {}, query: s.query || {} }
+  if (!cur) {
+    const S = read().map(v => sig(v))
+    cur = { get path() { return S[0].v }, get params() { return S[1].v }, get query() { return S[2].v } }
+    G.__brainRouted = () => {
+      const v = read()
+      S.forEach((s, i) => JSON.stringify(untrack(() => s.v)) !== JSON.stringify(v[i]) && (s.v = v[i])) // only what changed
+    }
+  }
+  return cur
+}

package/brain-err.js

@@ -0,0 +1,242 @@
+// BRAINLLM native error capture (INTERNALS §18), no third parties. The core already captures fx, drv, handlers and render
+// (and cuts B0902 loops); this module gives each error a fingerprint, component and parent chain, stack, breadcrumbs
+// (last 30 actions), build and browser; it dedupes and sends via sendBeacon with a cap.
+// Usage: prod `capture({ report: '/path', build })` (brain build --report) · in dev brain-inspect installs it with `who`.
+// `fallback(C, fb)` (codegen of `<meta fallback="…">`: `dev(fallback(C, fb))`) lives here: importing the module
+// installs the core hook, so an app without fallbacks or --report does not pay for this code.
+// Never includes input values, cookies, query strings or signal values.
+import { _err, sig } from './brain.js'
+
+const G = globalThis
+const RT = new URL('.', import.meta.url).href
+// Core hook: records (capture active) or console.error, and falls back to the nearest boundary's fallback (not for
+// event handlers).
+const I = _err((e, x, w) => {
+  on ? record(e, x, w) : G.console && console.error(e)
+  // §42: a failing event handler never destroys its component (it is reported; brain-guard shows the toast)
+  if (String(w).startsWith('on:')) return
+  for (; x; x = x.p || x.parentNode) {
+    const b = BW.get(x)
+    if (b) return fall(b)
+  }
+})
+// Boundaries: owner N and its root elements → { fb, n: nodes, r: owner, f: already fell }.
+const BW = new WeakMap()
+const fbn = fb => {
+  if (typeof fb === 'function') return I.nodes(fb())
+  const p = document.createElement('p')
+  p.setAttribute('role', 'alert')
+  p.textContent = fb
+  return [p]
+}
+function fall(b) {
+  if (b.f) return
+  b.f = 1
+  const a = fbn(b.fb), f = b.n[0], p = f && f.parentNode
+  if (p) for (const x of a) p.insertBefore(x, f)
+  b.r.q() // stops fx and handlers of the fallen component
+  I.rm(b.n)
+  b.n = a
+}
+// An error in the component's render, fx or handler swaps its nodes for the fallback (text → <p role=alert>,
+// function → nodes); the rest of the app keeps running.
+export const fallback = (C, fb) =>
+  Object.assign(
+    $p =>
+      I.root(() => {
+        const r = I.owner(), b = { fb, n: [], r, f: 0 }
+        BW.set(r, b)
+        let a
+        try {
+          a = I.nodes(C($p))
+        } catch (e) {
+          on ? record(e, r, 'render') : G.console && console.error(e)
+          r.q()
+          ;(b.f = 1), (a = fbn(fb))
+        }
+        for (const x of (b.n = a)) BW.set(x, b)
+        return a
+      }, I.owner()),
+    { C, h: C.h, f: C.f, p: C.p, form: C.form }
+  )
+
+const MSG = { B0902: 'fx re-ran >100 times in one flush: sig→fx→sig cycle; cut off so the tab does not hang' }
+export const errors = [] // deduplicated records, most recent last (Errors view, MCP brain_errors)
+export const sub = new Set() // fn(record) on each new or repeated error
+const crumbs = []
+let opts = {}, on = false, sent = 0, F0 = null
+
+export function crumb(k, d) {
+  const l = crumbs[crumbs.length - 1]
+  if (l && l.k === k && l.d === d) return void l.n++ // the same repeated action is counted, not stacked
+  crumbs.push({ k, d, n: 1, at: Date.now() })
+  if (crumbs.length > 30) crumbs.shift()
+}
+
+const hash = s => {
+  let h = 5381
+  for (let i = 0; i < s.length; i++) h = ((h * 33) ^ s.charCodeAt(i)) >>> 0
+  return h.toString(36)
+}
+const path = u => {
+  try {
+    return new URL(u, G.location && G.location.href).pathname // no query: it may carry sensitive data
+  } catch {
+    return String(u).split('?')[0]
+  }
+}
+// "url:line:col" of each frame; the first one outside the runtime is the app line.
+function frames(e) {
+  const out = []
+  for (const l of String((e && e.stack) || '').split('\n')) {
+    const m = l.match(/((?:https?|file):\/\/[^\s)]+):(\d+):(\d+)/)
+    if (m) out.push({ url: m[1], line: +m[2], col: +m[3], rt: m[1].startsWith(RT) && !m[1].slice(RT.length).includes('/') })
+  }
+  return out
+}
+// Component via the DOM: roots with data-b="<hash>" (prod) → parent chain via ancestors with data-b.
+function byDom(el) {
+  const chain = []
+  for (; el; el = el.parentNode) if (el.getAttribute && el.getAttribute('data-b')) chain.push({ h: el.getAttribute('data-b') })
+  return chain.length ? { ...chain[0], chain: chain.map(c => c.h) } : null
+}
+// Prod chunk /_b/<hash>.brain → component hash.
+const byStack = f => {
+  const m = f && f.url.match(/\/_b\/([a-z0-9]+)/)
+  return m ? { h: m[1], chain: [m[1]] } : null
+}
+
+// .brain lines (§18, dev): each module compiled in dev ends with an inline Source Map v3 that maps every generated
+// line to its .brain line. With `maps`, a recorded error is enriched asynchronously: `src` ('views/home.brain:12', the
+// first app frame) and `brainStack`; subscribers (brain_errors, overlay, doctor) are notified again. The file path
+// comes from the module URL (two `index.brain` in different folders never mix); prod chunks carry no map: no-op.
+const MAPS = new Map()
+const B64 = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789+/'
+export function decode(m) {
+  const lines = []
+  let src = 0
+  for (const seg of m.split(';')) {
+    let line = null
+    for (const part of seg.split(',')) {
+      if (!part) continue
+      const v = []
+      for (let i = 0, n = 0, sh = 0; i < part.length; i++) {
+        const d = B64.indexOf(part[i])
+        n += (d & 31) << sh
+        if (d & 32) sh += 5
+        else (v.push(n & 1 ? -(n >> 1) : n >> 1), (n = 0), (sh = 0))
+      }
+      if (v.length >= 3) (src += v[2]), line === null && (line = src + 1)
+    }
+    lines.push(line)
+  }
+  return lines
+}
+const mapOf = url => {
+  if (!MAPS.has(url))
+    MAPS.set(
+      url,
+      Promise.resolve(opts.load ? opts.load(url) : F0(url).then(r => r.text()))
+        .then(t => {
+          const m = /sourceMappingURL=data:application\/json;base64,([A-Za-z0-9+/=]+)/.exec(t)
+          return m ? decode(JSON.parse(atob(m[1])).mappings) : null
+        })
+        .catch(() => null)
+    )
+  return MAPS.get(url)
+}
+async function toBrain(r, f) {
+  const out = []
+  for (const t of f.slice(0, 12)) {
+    const lines = t.rt ? null : await mapOf(t.url)
+    const l = lines && lines[t.line - 1]
+    if (l) out.push(`${path(t.url).replace(/^\//, '')}:${l}`)
+  }
+  if (!out.length) return
+  r.src = out[0]
+  r.brainStack = out
+  for (const s of sub) s(r)
+}
+
+function record(e, x, w) {
+  if (e && e.kind === 'aborted') return // a cancelled request (brain-data ApiError): not an error
+  const f = frames(e), top = f.find(t => !t.rt) || null
+  const c = (opts.who && opts.who(x)) || (x && x.nodeType ? byDom(x) : null) || byStack(top)
+  const type = (e && e.code) || (e && e.name) || typeof e
+  const line = top ? `${path(top.url)}:${top.line}` : null
+  const fp = hash([type, c && c.h, line, w].join('|'))
+  let r = errors.find(r => r.fp === fp)
+  if (r) (r.n++, (r.last = Date.now()))
+  else {
+    r = {
+      fp, code: (e && e.code) || null, type, msg: MSG[e && e.code] || String((e && e.message) || e).slice(0, 500), where: w || null, comp: c, line,
+      stack: f.slice(0, 12).map(t => `${path(t.url)}:${t.line}:${t.col}`), crumbs: crumbs.map(c => ({ ...c })),
+      build: opts.build || null, ua: G.navigator ? navigator.userAgent : null, at: Date.now(), last: Date.now(), n: 1,
+    }
+    errors.push(r)
+    if (errors.length > 100) errors.shift()
+    if (opts.maps) toBrain(r, f)
+    if (opts.report && G.navigator && navigator.sendBeacon && sent < (opts.max || 20)) sent++, navigator.sendBeacon(opts.report, JSON.stringify(r))
+  }
+  for (const s of sub) s(r)
+  if (opts.log !== false && G.console) console.error(e)
+  return r
+}
+
+// Readable element label without values: aria-label, name or button/link text (40 chars).
+const label = el => {
+  if (!el || !el.tagName) return '?'
+  const t = el.tagName.toLowerCase(), a = el.getAttribute('aria-label') || el.getAttribute('name')
+  const txt = /^(input|textarea|select)$/.test(t) ? '' : String(el.textContent || '').trim().slice(0, 40)
+  return `${t}${a ? `[${a}]` : ''}${txt ? ` "${txt}"` : ''}`
+}
+
+export function capture(o = {}) {
+  if (on) return (Object.assign(opts, o), errors)
+  on = true
+  opts = o
+  F0 = G.fetch && G.fetch.bind(G) // the unwrapped fetch: reading source maps leaves no breadcrumbs
+  if (G.addEventListener) {
+    G.addEventListener('error', ev => record(ev.error || ev.message, null, 'onerror'))
+    G.addEventListener('unhandledrejection', ev => record(ev.reason, null, 'promise'))
+    G.addEventListener('popstate', () => crumb('nav', path(location.href)))
+    G.addEventListener('hashchange', () => crumb('nav', path(location.href) + location.hash))
+  }
+  const d = G.document
+  if (d && d.addEventListener) {
+    for (const t of ['click', 'submit', 'change']) d.addEventListener(t, e => crumb(t, label(e.target)), true)
+    d.addEventListener('input', e => crumb('input', label(e.target)), true) // only which field, never the value
+  }
+  if (G.history)
+    for (const k of ['pushState', 'replaceState']) {
+      const f = history[k]
+      history[k] = function (s, t, u) {
+        const r = f.apply(this, arguments)
+        crumb('nav', path(u == null ? location.href : u))
+        return r
+      }
+    }
+  if (G.fetch) {
+    const f = G.fetch
+    G.fetch = function (i, init) {
+      const m = (init && init.method) || (i && i.method) || 'GET', u = path((i && i.url) || i)
+      crumb('fetch', `${m} ${u}`)
+      return f.apply(this, arguments).then(
+        r => (r.status >= 400 && crumb('fetch', `${m} ${u} → ${r.status}`), r),
+        e => (crumb('fetch', `${m} ${u} → failed`), Promise.reject(e))
+      )
+    }
+  }
+  // Signal writes: name (dev, opts.sigName) or 'sig'; never the value.
+  const P = Object.getPrototypeOf(sig(0)), v = Object.getOwnPropertyDescriptor(P, 'v')
+  Object.defineProperty(P, 'v', {
+    configurable: true,
+    get: v.get,
+    set(x) {
+      const b = this._
+      v.set.call(this, x)
+      if (this._ !== b) crumb('sig', (opts.sigName && opts.sigName(this)) || 'sig')
+    },
+  })
+  return errors
+}

package/brain-form.js

@@ -0,0 +1,260 @@
+// BRAINLLM forms (INTERNALS §14). `let f = form(schema, { submit: async (v) => … })` →
+//   bind:value={f.v.email} · {f.err.email} · f.busy · f.error (form-level) · f.ok · on:submit={f.submit}
+// Schema mini-language per field: `str num bool email url date` + `!` required + `<=N >=N` (length for str and lists,
+// value for num) + `[T]` list of T, or a nested schema object (a type from types.jsbrain).
+// Validation: a field is validated when it loses focus and every field on submit; errors show only after that.
+// The element of each field is found without ids: the control that has focus while its value is written (the
+// `bind:` input handler), or on submit `form.elements[name]`. On it the runtime keeps `aria-invalid` and, when the
+// error element exists (`<Field>` or any element with id `f.id(name)`), `aria-describedby`.
+// Submit: validates, focuses the first invalid control, ignores re-entry while `busy`, converts values (num → Number),
+// awaits `submit(values)`. A returned or thrown `{ errors: { field: msg } }` marks fields; any other failure → f.error
+// (a cancelled request, kind 'aborted', is not an error to show).
+// Async checks (§41.6): `check: { email: async (v) => (await users.exists({ email: v })) ? 'Taken' : '' }` run after
+// the field's own rule passes, when it loses focus and before submit; `f.checking` while any runs; a stale answer
+// (the value changed meanwhile) is ignored.
+// Unsaved changes (§41.5): `f.dirty` is true while values differ from the last saved ones (init, reset() or a successful
+// submit); leaving the page (client navigation or closing the tab) then asks first. No API.
+import { sig, fx, batch, untrack, _rt } from './brain.js'
+import { rule, check } from './brain-schema.js'
+
+export { rule, check } // server.mjs validates posted forms with the same rules (§38)
+
+const I = _rt()
+
+const D = globalThis.document
+let seq = 0
+const GENERIC = 'Something went wrong. Try again.' // the text callForm (server.mjs) shows without JS
+// navigate through the client router when it is loaded (no reload, base path applied), else a normal load
+const go = u => {
+  const G = globalThis
+  if (G.__brainNavigate) return G.__brainNavigate(u)
+  const m = D && D.querySelector('meta[name=brain-base]'), b = (m && m.getAttribute('content')) || '/'
+  G.location && G.location.assign(b !== '/' && !(u + '/').startsWith(b) ? b + u.slice(1) : u)
+}
+// forms with unsaved changes: brain-router asks before a client navigation, the browser before unload. A form being
+// submitted does not ask (#299): the user chose to save, and a submit() that navigates once the server accepted the
+// data (`navigate('/products/' + p.id)`) leaves before submit() returns and marks the values saved.
+const DIRTY = (globalThis.__brainDirty ||= new Set())
+if (globalThis.addEventListener && !globalThis.__brainDirtyHook) {
+  globalThis.__brainDirtyHook = 1
+  globalThis.addEventListener('beforeunload', e => {
+    for (const f of DIRTY) if (f.dirty && !f.busy) return void (e.preventDefault(), (e.returnValue = ''))
+  })
+}
+const empty = v => v == null || v === '' || (Array.isArray(v) && !v.length)
+const init0 = r => (r.list ? [] : r.t === 'bool' ? false : '')
+const out = (r, v) => (r.list ? v || [] : r.t === 'num' ? (empty(v) ? null : Number(v)) : r.t === 'bool' ? !!v : v)
+
+// state left by the server: globalThis.__brainForms while it renders, or the page's #brain-forms JSON
+let SEEN
+function posted(id) {
+  if (!id) return null
+  const g = globalThis.__brainForms
+  if (g) return g[id] || null
+  if (SEEN === undefined)
+    try {
+      const el = D && D.getElementById('brain-forms')
+      SEEN = el ? JSON.parse(el.textContent) : null
+    } catch {
+      SEEN = null
+    }
+  return (SEEN && SEEN[id]) || null
+}
+
+export function form(schema, o = {}) {
+  const id = 'f' + ++seq, owner = I.owner() // aria effects are created later (in handlers) but live with the component
+  const busy = sig(false), error = sig(''), shown = sig(0) // shown: bumped when touched set changes
+  const checking = sig(0), saved = sig('') // async checks running · JSON of the last saved values
+  const F = [] // flat fields: { path, r, s (value sig), e (error sig), el, touched }
+  const byPath = {}
+
+  // Reactive getters/setters, nested for sub-schemas: f.v.address.city
+  function build(sch, base, init) {
+    const v = {}, err = {}
+    for (const k of Object.keys(sch)) {
+      const r = rule(sch[k]), path = base ? base + '.' + k : k
+      if (r.t === 'obj') {
+        const sub = build(r.s, path, (init && init[k]) || {})
+        Object.defineProperty(v, k, { enumerable: true, value: sub.v })
+        Object.defineProperty(err, k, { enumerable: true, value: sub.err })
+        continue
+      }
+      const x = { path, r, s: sig(init && k in init ? init[k] : init0(r)), e: sig(''), el: null, touched: false }
+      F.push(x)
+      byPath[path] = x
+      Object.defineProperty(v, k, {
+        enumerable: true,
+        get: () => x.s.v,
+        set: val => {
+          x.s.v = val
+          track(x, D && D.activeElement)
+          if (x.touched) validate(x) // already shown: keep the message live while fixing it
+        },
+      })
+      Object.defineProperty(err, k, { enumerable: true, get: () => (shown.v, x.touched ? x.e.v : '') })
+    }
+    return { v, err }
+  }
+
+  function track(x, el) {
+    // the first field written while a control has focus claims it: logic in that control's handler that writes
+    // other fields does not steal it
+    if (!el || x.el || el.$ff || !el.isConnected || !/^(INPUT|SELECT|TEXTAREA)$/.test(el.tagName || '')) return
+    x.el = el
+    el.$ff = x
+    el.addEventListener('focusout', () => touch(x))
+    I.root(() => fx(() => {
+      const e = shown.v >= 0 && x.touched && x.e.v // reads shown first: re-runs when the field gets touched
+      if (e) el.setAttribute('aria-invalid', 'true')
+      else el.removeAttribute('aria-invalid')
+      const d = D && D.getElementById(fid(x.path))
+      if (e && d) el.setAttribute('aria-describedby', fid(x.path))
+      else if (el.getAttribute('aria-describedby') === fid(x.path)) el.removeAttribute('aria-describedby')
+    }), owner)
+  }
+  const touch = x => {
+    validate(x)
+    if (!x.touched) (x.touched = true), shown.v++
+    remote(x)
+  }
+  // async check of one field (only when its own rule passes); resolves to its message
+  const remote = x => {
+    const c = o.check && o.check[x.path], v = untrack(() => x.s.v)
+    if (!c || untrack(() => x.e.v)) return Promise.resolve(untrack(() => x.e.v))
+    checking.v++
+    return Promise.resolve()
+      .then(() => c(v))
+      .then(m => m || '', e => (e && e.kind === 'aborted' ? '' : (e && e.message) || 'Could not check this value.'))
+      .then(m => {
+        if (untrack(() => x.s.v) === v) x.e.v = m // a stale answer (the value changed meanwhile) is ignored
+        return untrack(() => x.e.v)
+      })
+      .finally(() => checking.v--)
+  }
+  const validate = x => (x.e.v = untrack(() => check(x.r, x.s.v)))
+  const fid = p => `${id}-${p.replace(/\./g, '-')}-err`
+
+  // A form posted without JS (§38) comes back from the server with its values and messages: start from them, already
+  // shown, both while the server renders the page and when the page hydrates
+  const st = posted(o.submit && o.submit.id)
+  const { v, err } = build(schema, '', st ? st.values : o.init)
+  if (st) {
+    for (const p in st.errors || {}) if (byPath[p]) (byPath[p].e.v = String(st.errors[p])), (byPath[p].touched = true)
+    error.v = st.error || ''
+  }
+  const now = () => JSON.stringify(F.map(x => x.s.v))
+  saved.v = untrack(now)
+
+  function values() {
+    const r = {}
+    for (const x of F) {
+      const ks = x.path.split('.')
+      let t = r
+      for (const k of ks.slice(0, -1)) t = t[k] || (t[k] = {})
+      t[ks.at(-1)] = out(x.r, untrack(() => x.s.v))
+    }
+    return r
+  }
+  function mark(errors) {
+    batch(() => {
+      for (const p in errors) {
+        const x = byPath[p]
+        if (x) (x.e.v = String(errors[p])), (x.touched = true)
+      }
+      shown.v++
+    })
+  }
+
+  const f = {
+    v,
+    err,
+    get busy() {
+      return busy.v
+    },
+    get error() {
+      return error.v
+    },
+    get dirty() {
+      return now() !== saved.v
+    },
+    get checking() {
+      return checking.v > 0
+    },
+    get ok() {
+      for (const x of F) if (check(x.r, x.s.v)) return false
+      return true
+    },
+    id: path => fid(path),
+    values,
+    touch: path => byPath[path] && touch(byPath[path]),
+    errors: mark,
+    reset(init) {
+      batch(() => {
+        for (const x of F) {
+          let val = init
+          for (const k of x.path.split('.')) val = val == null ? undefined : val[k]
+          x.s.v = val === undefined ? init0(x.r) : val
+          x.e.v = ''
+          x.touched = false
+        }
+        error.v = ''
+        shown.v++
+        saved.v = untrack(now)
+      })
+    },
+    async submit(e) {
+      if (e && e.preventDefault) e.preventDefault()
+      if (untrack(() => busy.v)) return // no re-entry: a double click sends once
+      const fm = e && e.target && e.target.elements ? e.target : null
+      let first = null
+      batch(() => {
+        for (const x of F) {
+          if (!x.el && fm) track(x, fm.elements.namedItem && fm.elements.namedItem(x.path))
+          validate(x)
+          x.touched = true
+          if (!first && x.e.v) first = x
+        }
+        error.v = ''
+        shown.v++
+      })
+      if (o.validate && !first) {
+        const cross = o.validate(values()) // cross-field rules: { field: msg }
+        if (cross && Object.keys(cross).length) {
+          mark(cross)
+          first = byPath[Object.keys(cross)[0]] || null
+          if (!first) return
+        }
+      }
+      if (first) return void (first.el && first.el.focus && first.el.focus())
+      busy.v = true
+      if (fm) fm.setAttribute('aria-busy', 'true') // assistive tech hears the form is working
+      try {
+        if (o.check) {
+          await Promise.all(F.map(remote))
+          first = F.find(x => untrack(() => x.e.v))
+          if (first) return void (shown.v++, first.el && first.el.focus && first.el.focus())
+        }
+        if (!o.submit) return
+        const r = await o.submit(values())
+        if (r && r.errors) mark(r.errors)
+        else {
+          saved.v = untrack(now) // saved: no longer dirty
+          // `return { redirect: '/x' }` from the server function: the same page the 303 reaches without JS (§38)
+          if (r && typeof r.redirect === 'string' && r.redirect[0] === '/' && r.redirect[1] !== '/') go(r.redirect)
+        }
+        return r
+      } catch (x) {
+        if (x && x.errors) mark(x.errors)
+        // a server failure reads the same as without JS: 4xx and the author's own errors keep their message; 5xx and a
+        // TypeError (the network dropped, or a bug) get the generic one
+        else if (!(x && x.kind === 'aborted')) error.v = (x && x.message && !(x.status >= 500) && x.name !== 'TypeError' && x.message) || GENERIC
+      } finally {
+        busy.v = false
+        if (fm) fm.removeAttribute('aria-busy')
+      }
+    },
+  }
+  DIRTY.add(f)
+  if (owner) I.root(() => fx(() => () => DIRTY.delete(f)), owner)
+  return f
+}