@tiaforge-ui/sinter 0.0.0-stage → 0.1.0

package/dist/runtime/app.js

@@ -0,0 +1,1183 @@
+import { config, SinterError } from './config.js';
+import { createRequestLayer, isAbort, toError } from './request.js';
+import { BAD_KEY, encodeSegment, schemesOf, STYLE_BAD, urlAllowed } from './security.js';
+import { clean, createResource } from './store.js';
+const instances = new WeakMap();
+const paths = new Map();
+const split = (p) => paths.get(p) ?? (paths.set(p, p.split('.')), paths.get(p));
+const compiled = new WeakMap();
+const toDeps = (list) => list.map((d) => {
+    const p = d.split('.'), a = p.findIndex((x) => x.startsWith('{$'));
+    return { p, n: p.map((x) => (x[0] == '{' ? x.slice(1, -1) : undefined)), a, t: a < 0 ? -1 : +p[a].slice(3, -1) };
+});
+const depsOf = (key, list = []) => compiled.get(key) ?? (compiled.set(key, toDeps(list)), compiled.get(key));
+/** Sentinel for "not written yet". */
+const UNSET = {};
+/** Fills `{name}` segments from a scope. */
+const fill = (p, s) => (s && p.includes('{') ? split(p).map((x) => (x[0] == '{' ? '' + s[x.slice(1, -1)] : x)) : split(p));
+const range = (a, stop) => {
+    const out = [];
+    for (let n = a; n && n != stop; n = n.nextSibling)
+        out.push(n);
+    return out;
+};
+const child = (s, props) => Object.assign(Object.create(s), props);
+const after = (el) => {
+    const c = new Comment();
+    el.after(c);
+    return c;
+};
+const ET = EventTarget.prototype;
+/** Per-element registries, kept on the element (cheaper than WeakMaps on the row creation path). */
+const HANDLERS = Symbol('sinter.on'), MODEL = Symbol('sinter.model'), STATE = Symbol('sinter.state');
+const dialogsIn = new WeakMap(), indexReaders = new WeakMap();
+/** row templates: whether each holds one element (see oneElement()) */
+const prepared = new WeakMap();
+const simple = new WeakMap(), SIMPLE = new Set(['text', 'attr', 'class', 'style', 'show', 'prop', 'on']);
+const hasDialog = (tpl) => dialogsIn.get(tpl) ?? (dialogsIn.set(tpl, !!tpl.content.querySelector('dialog')), dialogsIn.get(tpl));
+/** The instance mount() created on `root`; throws if none. */
+export function instance(root) {
+    const app = instances.get(root);
+    if (!app)
+        throw Error('sinter: not mounted');
+    return app;
+}
+export function mount(root, o) {
+    if (instances.has(root))
+        throw Error('sinter: already mounted');
+    const { ir, fns } = o;
+    if (ir?.v != 1)
+        throw Error('sinter: unsupported IR');
+    const env = o.env ?? config.env;
+    const req = createRequestLayer(env, o.request ?? config.request);
+    const schemes = schemesOf(config.urlSchemes);
+    const resources = new Map(), loaders = [];
+    const acts = new WeakMap();
+    const types = new Set(), selects = new Set(), deferred = new Set();
+    const listeners = new Map(), cleanups = [];
+    const shared = new Map();
+    const rootRbs = [], rootScopes = [], found = new Map();
+    let dirty = [], cur = [], scheduled = false, flushing = false, round = 0;
+    const res = (name) => {
+        const r = resources.get(name);
+        if (!r)
+            throw Error(`sinter: no resource ${name}`);
+        return r;
+    };
+    const forward = (m) => (n, ...a) => res(n)[m](...a);
+    const warn = (code, ...args) => app.warn(code, ...args);
+    const evaluate = (rb) => {
+        try {
+            return fns[rb.b.f](rb.b.e ? (rb.e ??= child(rb.s, { $el: rb.el })) : rb.s);
+        }
+        catch (e) {
+            warn(6, rb.b.k, rb.el.localName, e?.message);
+        }
+    };
+    /** Elements written through callbacks (`$.$m(row, …)`) since the last flush. */
+    const marked = new Set();
+    /** Per flush round: how dirty paths reach a template's rows (0 not, 1 only marked elements, 2 any row). */
+    let rowHits = new Map();
+    /**
+     * Whether a dependency (its `{name}` segments read from scope `s`, or any scope when `s` is
+     * absent) and dirty path `d` are prefixes of each other; `*` matches any segment. A change
+     * that ends above a row's own element, or only changes the list structure (`#`), does not
+     * reach it: reconcile re-evaluates rows whose item or index changed. `~` reaches only rows
+     * whose element was marked.
+     */
+    const overlaps = (dep, d, s) => reach(dep, d, s) > 0;
+    /** 0: no overlap; 1: only through a marked element (`~`) of the row; 2: overlap. */
+    function reach({ p, n, a, t }, d, s) {
+        if (a >= 0 && d.length <= a)
+            return 0;
+        let via = 2;
+        for (let i = 0, len = Math.min(p.length, d.length); i < len; i++) {
+            const y = d[i];
+            // a list's structure dependency: reached by changes to the list itself or a whole element, not element fields
+            if (p[i] == '#')
+                return d.length <= i + 1 ? 2 : 0;
+            if (y == '#' || y == '~') {
+                if (i != a)
+                    continue;
+                if (y == '#' || (s && !marked.has(s[ir.templates[t].item])))
+                    return 0;
+                via = 1;
+                continue;
+            }
+            if (y == '*' || (n[i] !== undefined && !s))
+                continue;
+            if (n[i] !== undefined ? s[n[i]] != y : p[i] != y && p[i] != '*')
+                return 0;
+        }
+        return s ? 2 : via;
+    }
+    /** Whether a binding in a template's rows (nested templates included) reads a loop index. */
+    const readsIndex = (t) => indexReaders.get(t) ?? (indexReaders.set(t, t.nodes.some((nd) => nd.b.some((b) => b.i || ((b.k == 'for' || b.k == 'if' || b.k == 'else') && readsIndex(ir.templates[b.x]))))), indexReaders.get(t));
+    /** Dependencies of every binding in a template's rows, nested templates included. */
+    const templateDeps = (t) => compiled.get(t) ?? (compiled.set(t, t.nodes.flatMap((nd) => nd.b.flatMap((b) => [
+        ...depsOf(b, b.d),
+        ...(b.k == 'for' || b.k == 'if' || b.k == 'else' ? templateDeps(ir.templates[b.x]) : []),
+    ]))), compiled.get(t));
+    /** Whether any of `deps` overlaps a dirty path of the current flush. */
+    const hit = (deps, s) => {
+        for (const dep of deps)
+            for (const d of cur)
+                if (overlaps(dep, d, s))
+                    return true;
+        return false;
+    };
+    const app = {
+        ir, fns, env, req, transport: o.transport ?? (() => undefined), ext: {},
+        beforeFlush: [], afterFlush: [], onListen: [], states: [], busy: 0,
+        get isDirty() { return dirty.length > 0 || scheduled; },
+        dev: false,
+        warn() { },
+        page: {
+            $r: {}, $meta: {}, $url: readUrl(), $now: new Date(env.now()),
+            $m: (el, v) => (marked.add(el), v),
+            get $locale() { return config.locale?.get(); },
+            set $locale(v) { config.locale?.set(v); app.mark('$locale'); },
+        },
+        resource: res,
+        request: (url, init) => req.send(url, init),
+        async optimistic(change, run) {
+            const drop = app.record(change);
+            try {
+                return await run();
+            }
+            finally {
+                drop();
+            }
+        },
+        on(event, fn) {
+            if (!listeners.has(event))
+                listeners.set(event, new Set());
+            listeners.get(event).add(fn);
+            for (const l of app.onListen)
+                l(event);
+            return () => listeners.get(event).delete(fn);
+        },
+        state(el) {
+            for (let e = el; e; e = e.parentElement) {
+                const s = e[STATE];
+                if (s)
+                    return { get: () => s[1], update: (fn) => { fn(s[1]); app.mark('$s' + s[0]); } };
+            }
+            throw Error('sinter: no data-sn-state scope');
+        },
+        destroy() {
+            for (const c of cleanups.splice(0))
+                c();
+            instances.delete(root);
+        },
+        url(tpl, s) {
+            let out = '', query = false, dropped = false;
+            tpl.forEach((p, i) => {
+                if (typeof p == 'string') {
+                    // after a dropped parameter, its `&` separator goes too
+                    out += dropped && p[0] == '&' && /[?&]$/.test(out) ? p.slice(1) : p;
+                    dropped = false;
+                    query ||= /[?#]/.test(p);
+                    return;
+                }
+                const v = fns[p](s), next = tpl[i + 1];
+                // a query parameter whose whole value is null or undefined is left out
+                if (v == null && query && /[?&][^?&=#]*=$/.test(out) && (next == null || /^[&#]/.test(next))) {
+                    out = out.replace(/[^?&=#]*=$/, '');
+                    dropped = true;
+                    return;
+                }
+                // URL parsers turn %2E%2E back into `..`, so a path value cannot be a dot segment at all
+                if (!query && (v == '.' || v == '..'))
+                    throw new SinterError(0, null, `refused \`${v}\` as a URL path value`);
+                out += encodeSegment(v);
+            });
+            return out.replace(/[?&](?=#|$)/, '');
+        },
+        mark(path, s) {
+            dirty.push(fill(path, s));
+            if (!scheduled && !flushing) {
+                scheduled = true;
+                env.queueMicrotask(app.flush);
+            }
+        },
+        flush() {
+            scheduled = false;
+            if (flushing)
+                return;
+            flushing = true;
+            try {
+                for (let pass = 0; dirty.length && pass < 100; pass++) {
+                    cur = dirty;
+                    dirty = [];
+                    for (const h of app.beforeFlush)
+                        h(cur);
+                    round++;
+                    rowHits = new Map();
+                    for (const l of loaders)
+                        if (hit(depsOf(l.def, l.def.deps)))
+                            l.changed();
+                    walk(rootRbs, 0);
+                    syncSelects();
+                    for (const h of app.afterFlush)
+                        h(cur);
+                }
+            }
+            finally {
+                cur = dirty = [];
+                marked.clear();
+                flushing = false;
+            }
+        },
+        record(change) {
+            const rs = [...resources.values()];
+            for (const r of rs)
+                r.recording = [];
+            let recs;
+            try {
+                change();
+            }
+            finally {
+                recs = rs.map((r) => [r, r.recording]);
+                for (const r of rs)
+                    r.recording = null;
+            }
+            const ids = recs.filter(([, ops]) => ops.length).map(([r, ops]) => [r, r.addLayer(ops)]);
+            let done = false;
+            return () => { if (!done) {
+                done = true;
+                for (const [r, id] of ids)
+                    r.dropLayer(id);
+            } };
+        },
+        storeFns: (el) => ({
+            refresh: (n) => res(n).refetch(),
+            upsert: forward('upsert'),
+            patch: forward('patch'),
+            remove: forward('remove'),
+            page: (n, t) => app.ext.paginate.page(n, t),
+            close: () => el?.closest('dialog')?.close(),
+            reset: () => {
+                const form = el?.closest('form');
+                if (!form)
+                    return;
+                form.reset();
+                for (const c of form.elements) {
+                    const rb = c[MODEL];
+                    if (rb)
+                        setModel(rb, readModel(rb));
+                }
+            },
+            emit: (n, detail) => el?.dispatchEvent(new CustomEvent(n, { detail, bubbles: true })),
+        }),
+        serverEvent(name, payload) {
+            for (const fn of listeners.get(name) ?? [])
+                try {
+                    fn(payload);
+                }
+                catch (e) {
+                    console.error(e);
+                }
+        },
+        addCleanup: (fn) => void cleanups.push(fn),
+    };
+    app.page.$f = app.storeFns(null);
+    instances.set(root, app);
+    for (const f of o.features ?? [])
+        f.install(app);
+    // ---- mount: one querySelectorAll, ids checked against the IR's tags
+    const qsa = (root instanceof Document ? Document : Element).prototype.querySelectorAll;
+    const bad = new Set();
+    for (const el of qsa.call(root, '[data-sn]')) {
+        const id = +Element.prototype.getAttribute.call(el, 'data-sn');
+        found.has(id) ? bad.add(id) : found.set(id, el);
+    }
+    for (const id of bad) {
+        found.delete(id);
+        warn(1, id);
+    }
+    for (const def of ir.resources)
+        createLoader(def);
+    // listeners for every event type the page binds, rows included
+    listen('toggle');
+    for (const nd of [...ir.roots, ...ir.templates.flatMap((t) => t.nodes)])
+        for (const b of nd.b) {
+            if (b.k == 'on')
+                listen(b.n);
+            if (b.k == 'model') {
+                listen('input');
+                listen('change');
+            }
+        }
+    bindNodes(ir.roots, ir.roots.map((nd) => {
+        const el = found.get(nd.id);
+        if (el?.localName == nd.tag)
+            return el;
+        warn(el ? 3 : 2, nd.id, el?.localName, nd.tag);
+        return null;
+    }), app.page, rootRbs);
+    cleanups.push(env.listen('popstate', () => {
+        const u = app.page.$url;
+        for (const k in u)
+            delete u[k];
+        Object.assign(u, readUrl());
+        app.mark('$url');
+    }));
+    if (ir.now) {
+        let t;
+        const tick = () => { t = env.setTimeout(() => { app.page.$now = new Date(env.now()); app.mark('$now'); tick(); }, 60_000, 'clock'); };
+        tick();
+        cleanups.push(() => env.clearTimeout(t));
+    }
+    for (const l of loaders)
+        l.start();
+    flushing = true;
+    try {
+        walk(rootRbs, 2);
+        syncSelects();
+        for (const h of app.afterFlush)
+            h([]);
+    }
+    finally {
+        flushing = false;
+    }
+    if (dirty.length) {
+        scheduled = true;
+        env.queueMicrotask(app.flush);
+    }
+    return app;
+    // ---- scopes and bindings
+    /** Query parameters, then the `:name` segments of the first `data-sn-path` pattern that matches. */
+    function readUrl() {
+        const out = Object.create(null), u = new URL(env.href());
+        for (const [k, v] of u.searchParams)
+            if (!BAD_KEY.test(k))
+                out[k] = v;
+        const segs = u.pathname.split('/').filter(Boolean);
+        for (const p of ir.path ?? []) {
+            const want = p.split('/').filter(Boolean);
+            if (want.length != segs.length || want.some((w, i) => w[0] != ':' && w != segs[i]))
+                continue;
+            want.forEach((w, i) => {
+                if (w[0] != ':')
+                    return;
+                try {
+                    out[w.slice(1)] = decodeURIComponent(segs[i]);
+                }
+                catch {
+                    out[w.slice(1)] = segs[i];
+                }
+            });
+            break;
+        }
+        return out;
+    }
+    function writeUrl() {
+        const u = new URL(env.href()), q = new URLSearchParams();
+        const fromPath = new Set((ir.path ?? []).flatMap((p) => p.split('/').filter((s) => s[0] == ':').map((s) => s.slice(1))));
+        for (const [k, v] of Object.entries(app.page.$url))
+            if (v != null && v !== '' && !fromPath.has(k))
+                q.set(k, '' + v);
+        u.search = '' + q;
+        env.replaceState(u.pathname + u.search + u.hash);
+    }
+    /** One delegated capture listener per used event type, at the mount root. */
+    function listen(type) {
+        if (types.has(type))
+            return;
+        types.add(type);
+        ET.addEventListener.call(root, type, dispatch, true);
+        cleanups.push(() => ET.removeEventListener.call(root, type, dispatch, true));
+    }
+    /**
+     * `dialogs`: whether these elements can sit in a closed dialog of their own block. Rows only
+     * need the check when their template contains a dialog; outer dialogs defer the whole list.
+     */
+    function bindNodes(defs, els, base, rbs, dialogs = true) {
+        // scopes of elements that declare state (and their descendants); most rows have none
+        let scopes = null;
+        for (let i = 0; i < defs.length; i++) {
+            const nd = defs[i], el = els[i];
+            let s = scopes?.[nd.p] ?? base;
+            if (nd.state != null && el) {
+                const obj = fns[nd.state](s), sid = nd.sid, key = nd.persist;
+                s = child(s, { ['$s' + sid]: obj });
+                el[STATE] = [sid, obj];
+                if (rbs == rootRbs)
+                    app.states.push([sid, obj]);
+                if (key) {
+                    app.ext.persist?.state(key, obj);
+                    app.afterFlush.push((d) => d.some((p) => p[0] == '$s' + sid) && app.ext.persist?.saveState(key, obj));
+                }
+            }
+            if (s !== base)
+                (scopes ??= [])[i] = s;
+            if (rbs == rootRbs)
+                rootScopes[i] = s;
+            if (el)
+                for (const b of nd.b) {
+                    const rb = { b, el, s, v: UNSET, c: dialogs };
+                    if (b.k == 'on') {
+                        const h = el[HANDLERS];
+                        el[HANDLERS] = h == null ? rb : Array.isArray(h) ? (h.push(rb), h) : [h, rb];
+                        continue;
+                    }
+                    if (b.k == 'else')
+                        continue;
+                    if (b.k == 'model') {
+                        el[MODEL] = rb;
+                        if (el.localName == 'select')
+                            selects.add(rb);
+                        if (b.p != null)
+                            app.ext.persist?.model(rb, (v) => setModel(rb, v));
+                    }
+                    if (b.k == 'for') {
+                        rb.rows = [];
+                        rb.t = ir.templates[b.x];
+                    }
+                    if (b.k == 'if') {
+                        rb.br = 0;
+                        rb.else = b.y != null && els[b.y] ? [els[b.y], defs[b.y].b.find((x) => x.k == 'else').x] : null;
+                    }
+                    rbs.push(rb);
+                }
+        }
+    }
+    // ---- rendering
+    /** Walks bindings in document order; `force`: 0 dirty ones only, 1 also those reading a loop index, 2 all. */
+    function walk(rbs, force) {
+        for (const rb of rbs) {
+            if (!process(rb, force) || !rb.rows)
+                continue;
+            const t = rb.t;
+            let r = force || !t ? 2 : rowHits.get(t);
+            if (r == null) {
+                r = 0;
+                // a mark counts as "only marked rows" for dependencies on this list's own element; others (outer rows) reach any row
+                for (const dep of templateDeps(t))
+                    for (const d of cur) {
+                        const x = reach(dep, d);
+                        r = Math.max(r, x == 1 && dep.t != t.id ? 2 : x);
+                    }
+                rowHits.set(t, r);
+            }
+            // only marked elements changed and the list did not move: visit their rows directly
+            if (r == 1 && rb.rr != round) {
+                const keys = rb.keys === undefined ? (rb.keys = t.key != null ? null : new Map(rb.rows.map((x) => [x.key, x]))) : rb.keys;
+                if (keys && keys.size == rb.rows.length) {
+                    for (const item of marked) {
+                        const x = Object(item) === item ? keys.get(keyOf(t, item, null)) : null;
+                        if (x && x.item === item)
+                            walk(x.rbs, 0);
+                    }
+                    continue;
+                }
+            }
+            // otherwise skip rows no dirty path can reach (unless they moved or changed), and rows created in this round
+            for (const x of rb.rows)
+                if (x.r != round && (r || x.f)) {
+                    walk(x.rbs, Math.max(force, x.f));
+                    x.f = 0;
+                }
+        }
+    }
+    /** Evaluates and writes one binding if needed; false while it waits in a closed dialog. */
+    function process(rb, level) {
+        const force = level == 2 || (level == 1 && !!rb.b.i);
+        if (!force && !deferred.has(rb) && !(rb.b.d && hit(depsOf(rb.b, rb.b.d), rb.s)))
+            return true;
+        if (rb.c && rb.el.closest('dialog:not([open])')) {
+            deferred.add(rb);
+            return false;
+        }
+        if (deferred.size)
+            deferred.delete(rb);
+        const v = evaluate(rb), k = rb.b.k;
+        if (k == 'for')
+            reconcile(rb, v);
+        else if (k == 'if')
+            toggle(rb, v ? 1 : rb.else ? 2 : 0);
+        else if (k == 'model')
+            writeModel(rb, v);
+        else if (!Object.is(v, rb.v)) {
+            write(rb, v, rb.v == UNSET ? undefined : rb.v);
+            rb.v = v;
+        }
+        return true;
+    }
+    function write(rb, v, prev) {
+        const el = rb.el, n = rb.b.n;
+        switch (rb.b.k) {
+            case 'text': {
+                const t = el.firstChild;
+                v = '' + (v ?? '');
+                if (t?.nodeType == 3 && !t.nextSibling)
+                    t.data = v;
+                else
+                    el.textContent = v;
+                break;
+            }
+            case 'show':
+                el.hidden = !v;
+                break;
+            case 'prop':
+                el[n] = v;
+                break;
+            case 'class':
+                // a new element without a class attribute cannot have the class: skip removing it
+                if (n) {
+                    if (v || rb.v !== UNSET || el.hasAttribute('class'))
+                        el.classList.toggle(n, !!v);
+                }
+                else {
+                    if (prev?.[0] && prev[0] != v?.[0])
+                        el.classList.remove(prev[0]);
+                    if (v?.[0])
+                        el.classList.toggle(v[0], !!v[1]);
+                }
+                break;
+            case 'attr':
+                if (v == null || v === false)
+                    el.removeAttribute(n);
+                else if (urlAllowed(el, n, (v = v === true ? '' : '' + v), /^https?:/.test(el.baseURI) ? el.baseURI : env.href(), schemes))
+                    el.setAttribute(n, v);
+                else {
+                    el.removeAttribute(n);
+                    warn(7, n, el.localName, v);
+                }
+                break;
+            case 'style':
+                if (v == null || v === false)
+                    el.style.removeProperty(n);
+                else if (STYLE_BAD.test(v)) {
+                    el.style.removeProperty(n);
+                    warn(8, n, v);
+                }
+                else
+                    el.style.setProperty(n, v);
+        }
+    }
+    function syncSelects() {
+        for (const rb of selects)
+            writeModel(rb, evaluate(rb));
+    }
+    // ---- models
+    function writeModel(rb, v) {
+        const el = rb.el, k = rb.b.n;
+        const has = (x) => Array.isArray(v) && v.map(String).includes(x);
+        if (k == 'checkbox')
+            el.checked = Array.isArray(v) ? has(el.value) : !!v;
+        else if (k == 'radio')
+            el.checked = v != null && '' + v == el.value;
+        else if (k == 'multi')
+            for (const opt of el.options)
+                opt.selected = has(opt.value);
+        // loose comparison: '1.0' == 1 keeps a number input's text as typed
+        else if (el.value != (v ?? ''))
+            el.value = v ?? '';
+    }
+    /** The control's value for its model; undefined for an unchecked radio. */
+    function readModel(rb) {
+        const el = rb.el, k = rb.b.n;
+        if (k == 'number')
+            return el.value === '' ? null : +el.value;
+        if (k == 'radio')
+            return el.checked ? el.value : undefined;
+        if (k == 'multi')
+            return [...el.selectedOptions].map((x) => x.value);
+        if (k != 'checkbox')
+            return el.value;
+        const cur = evaluate(rb);
+        if (!Array.isArray(cur))
+            return el.checked;
+        const i = cur.map(String).indexOf(el.value);
+        if (el.checked && i < 0)
+            cur.push(el.value);
+        if (!el.checked && i >= 0)
+            cur.splice(i, 1);
+        return cur;
+    }
+    function setModel(rb, v) {
+        if (v === undefined)
+            return;
+        try {
+            fns[rb.b.a](rb.s, v);
+        }
+        catch (e) {
+            return warn(9, rb.el.localName, e?.message);
+        }
+        for (const w of rb.b.w ?? [])
+            app.mark(w, rb.s);
+    }
+    // ---- lists and conditionals
+    function setRow(s, t, item, i) {
+        s[t.item] = item;
+        if (t.index)
+            s[t.index] = i;
+        s[t.ii] = i;
+        return s;
+    }
+    /** A row's identity: the explicit key, the resource key, or the item object itself. */
+    function keyOf(t, item, s) {
+        if (t.key != null)
+            return 'k' + fns[t.key](s);
+        if (t.keyFields && item)
+            return 'r' + t.keyFields.map((f) => item[f]).join('\x1f');
+        if (Object(item) === item)
+            return item;
+        warn(10);
+        return 'p' + typeof item + item;
+    }
+    function reconcile(rb, v) {
+        const t = rb.t, old = rb.rows, end = (rb.end ??= after(rb.el)), tpl = rb.el;
+        const items = v == null ? [] : Array.isArray(v) ? v : Symbol.iterator in Object(v) ? [...v] : [];
+        const n = items.length, m = old.length, rows = new Array(n), moved = readsIndex(t);
+        // a scope is only needed up front for an explicit key expression
+        const scopes = t.key != null ? items.map((item, i) => setRow(Object.create(rb.s), t, item, i)) : null;
+        const keys = items.map((item, i) => keyOf(t, item, scopes?.[i]));
+        if (app.dev && new Set(keys).size < n) {
+            const k = keys.find((k, i) => keys.indexOf(k) != i);
+            warn(11, typeof k == 'string' ? k.slice(1) : 'the same object twice');
+        }
+        const reuse = (x, i) => {
+            const item = items[i];
+            if (x.item !== item) {
+                setRow(x.s, t, (x.item = item), (x.i = i));
+                x.f = 2;
+            }
+            else if (x.i != i) {
+                setRow(x.s, t, item, (x.i = i));
+                if (moved)
+                    x.f ||= 1;
+            }
+            rows[i] = x;
+        };
+        // rows with the same keys at the start and the end stay where they are
+        let a = 0, oe = m, ne = n;
+        while (a < oe && a < ne && old[a].key === keys[a])
+            reuse(old[a], a++);
+        while (a < oe && a < ne && old[oe - 1].key === keys[ne - 1])
+            reuse(old[--oe], --ne);
+        // the middle: match by key, create the rest
+        const byKey = new Map(), used = new Uint8Array(oe - a), seq = [];
+        for (let o = a; o < oe; o++)
+            byKey.set(old[o].key, o);
+        for (let i = a; i < ne; i++) {
+            const o = byKey.get(keys[i]);
+            if (o != null && !used[o - a]) {
+                used[o - a] = 1;
+                seq.push(o);
+                reuse(old[o], i);
+            }
+            else {
+                seq.push(-1);
+                rows[i] = instantiate(tpl, t, scopes?.[i] ?? setRow(Object.create(rb.s), t, items[i], i), keys[i], items[i], i);
+            }
+        }
+        // each old row owns the nodes from its first node up to the next old row's first node;
+        // collect them for rows that go or move before the DOM changes
+        const nodesOf = (o) => range(old[o].first, old[o + 1]?.first ?? end);
+        const keep = lis(seq), moving = new Map(), gone = [];
+        seq.forEach((o, k) => { if (o >= 0 && !keep.has(k))
+            moving.set(rows[a + k], nodesOf(o)); });
+        for (let o = a; o < oe; o++)
+            if (!used[o - a])
+                gone.push(o);
+        if (m && gone.length == m) {
+            // every old row goes (cleared, or all keys new): when the list owns its parent, drop them in
+            // one operation; removing 5,000 rows one by one costs more than building the new ones
+            const parent = end.parentNode;
+            if (parent.firstChild == tpl && parent.lastChild == end)
+                parent.replaceChildren(tpl, end);
+            else
+                while (tpl.nextSibling != end)
+                    tpl.nextSibling.remove();
+        }
+        else
+            for (const node of gone.flatMap(nodesOf))
+                node.remove();
+        if (deferred.size || selects.size)
+            for (const o of gone)
+                forget(old[o].rbs);
+        const ref = ne < n ? rows[ne].first ?? end : end;
+        if (!seq.some((o) => o >= 0)) {
+            // only new rows in the middle: insert each straight before the reference (going through a
+            // fragment first moves every node twice)
+            const parent = ref.parentNode;
+            for (let i = a; i < ne; i++)
+                for (const node of rows[i].nodes)
+                    parent.insertBefore(node, ref);
+        }
+        else {
+            // move the fewest rows: those outside a longest increasing subsequence of old positions
+            let at = ref;
+            for (let k = seq.length; k--;) {
+                const x = rows[a + k];
+                if (!keep.has(k))
+                    at.before(...(moving.get(x) ?? x.nodes));
+                at = x.first ?? at;
+            }
+        }
+        rb.rows = rows;
+        rb.rr = round;
+        rb.keys = undefined;
+    }
+    function toggle(rb, br) {
+        if (br == rb.br)
+            return;
+        const end = (rb.end ??= after(rb.el)), [old] = rb.rows ?? [];
+        if (old) {
+            for (const n of range(old.first, end))
+                n.remove();
+            forget(old.rbs);
+        }
+        rb.br = br;
+        rb.rows = [];
+        if (!br)
+            return;
+        const [anchor, tid] = br == 1 ? [rb.el, rb.b.x] : rb.else;
+        const x = instantiate(anchor, ir.templates[tid], Object.create(rb.s), '', null, 0);
+        end.before(...x.nodes);
+        rb.rows = [x];
+    }
+    function instantiate(tpl, t, s, key, item, i) {
+        const content = tpl.content, one = prepared.get(tpl) ?? oneElement(tpl);
+        const top = one ? content.firstChild.cloneNode(true) : content.cloneNode(true);
+        const defs = t.nodes, rbs = [];
+        let els;
+        if (t.find != null)
+            els = fns[t.find](one ? top : top.firstChild);
+        else {
+            // IR without lookup functions (compiled before they existed)
+            els = new Array(defs.length);
+            for (let k = 0; k < defs.length; k++) {
+                const path = defs[k].path;
+                // path[0] picks a child of the content; with one node that child is `top` itself
+                let node = one ? (path[0] == 0 ? top : null) : top;
+                for (let x = one ? 1 : 0; x < path.length && node; x++) {
+                    node = node.firstChild;
+                    for (let c = path[x]; c-- && node;)
+                        node = node.nextSibling;
+                }
+                els[k] = node && node.localName == defs[k].tag ? node : null;
+            }
+        }
+        if (isSimple(tpl, t)) {
+            // only value bindings and handlers: bind and write each once, as walk(rbs, 2) would
+            for (let k = 0; k < defs.length; k++) {
+                const el = els[k];
+                if (el)
+                    for (const b of defs[k].b) {
+                        const rb = { b, el, s, v: UNSET, c: false };
+                        if (b.k == 'on') {
+                            const h = el[HANDLERS];
+                            el[HANDLERS] = h == null ? rb : Array.isArray(h) ? (h.push(rb), h) : [h, rb];
+                            continue;
+                        }
+                        rbs.push(rb);
+                        const v = evaluate(rb);
+                        write(rb, v, undefined);
+                        rb.v = v;
+                    }
+            }
+        }
+        else {
+            bindNodes(defs, els, s, rbs, hasDialog(tpl));
+            walk(rbs, 2);
+        }
+        const nodes = [];
+        if (one)
+            nodes.push(top);
+        else
+            for (let c = top.firstChild; c; c = c.nextSibling)
+                nodes.push(c);
+        return { first: nodes[0] ?? null, nodes, rbs, s, key, item, i, f: 0, r: round };
+    }
+    /**
+     * Once per row template: whether it holds one element (a <tr>, an <li>), so rows clone just that
+     * and no fragment. Not a nested <template>: an anchor needs a parent for its end marker.
+     */
+    function oneElement(tpl) {
+        const content = tpl.content, f = content.firstChild;
+        const one = !!f && f == content.lastChild && f.nodeType == 1 && f.localName != 'template';
+        prepared.set(tpl, one);
+        return one;
+    }
+    /** A row template whose elements only have value bindings and handlers (no state, model, nested template or dialog). */
+    function isSimple(tpl, t) {
+        let v = simple.get(t);
+        if (v == null) {
+            v = !hasDialog(tpl) && t.nodes.every((nd) => nd.state == null && nd.b.every((b) => SIMPLE.has(b.k)));
+            simple.set(t, v);
+        }
+        return v;
+    }
+    /** Drops removed bindings from the deferred and select sets. */
+    function forget(rbs) {
+        for (const rb of rbs) {
+            deferred.delete(rb);
+            selects.delete(rb);
+            for (const r of rb.rows ?? [])
+                forget(r.rbs);
+        }
+    }
+    // ---- events
+    function dispatch(e) {
+        let el = e.target;
+        if (el?.nodeType != 1)
+            el = el?.parentElement ?? null;
+        if (!el)
+            return;
+        if (e.type == 'toggle' && el.localName == 'dialog' && el.hasAttribute('open')) {
+            for (const rb of [...deferred])
+                if (deferred.has(rb) && el.contains(rb.el)) {
+                    cur = [];
+                    walk([rb], 2);
+                }
+        }
+        // models update state before other handlers on the same event
+        const m = el[MODEL];
+        if (m && /^(input|change)$/.test(e.type) && (e.type == 'input') == (m.b.n == 'text'))
+            setModel(m, readModel(m));
+        for (; el; el = el.parentElement) {
+            const h = el[HANDLERS], hs = h && (Array.isArray(h) ? h : [h]).filter((x) => x.b.n == e.type);
+            if (hs?.length) {
+                for (const h of hs)
+                    h.b.x != null ? trigger(h, e) : handle(h, h.b.f, e, h.b.w);
+                return;
+            }
+            if (el == root)
+                return;
+        }
+    }
+    /** Runs a handler expression and invalidates what it may have changed. */
+    function handle(rb, f, e, writes, extra) {
+        const s = child(rb.s, { $el: rb.el, $event: e, $f: app.storeFns(rb.el), ...extra });
+        try {
+            fns[f](s);
+        }
+        catch (err) {
+            console.error(err);
+        }
+        for (const w of writes ?? [])
+            app.mark(w, s);
+        if (writes?.some((w) => w.startsWith('$url')))
+            writeUrl();
+    }
+    // ---- actions
+    function trigger(rb, e) {
+        const a = ir.actions[rb.b.x], el = rb.el;
+        if (e.type == 'submit' || el.localName == 'a' || (e.type == 'click' && /^(button|input)$/.test(el.localName) && el.closest('form')))
+            e.preventDefault();
+        if (!a.debounce)
+            return fire(rb, a, e);
+        const st = act(el);
+        if (st.t) {
+            env.clearTimeout(st.t);
+            app.busy--;
+        }
+        app.busy++;
+        st.t = env.setTimeout(() => { st.t = null; app.busy--; fire(rb, a, e); }, a.debounce, 'debounce');
+    }
+    function act(el) {
+        if (!acts.has(el))
+            acts.set(el, { n: 0, q: [], w: null, c: null, t: null, off: null });
+        return acts.get(el);
+    }
+    function fire(rb, a, e) {
+        const st = act(rb.el), get = a.method == 'GET';
+        if (!get && a.concurrency == 'block' && st.n)
+            return;
+        const s = child(rb.s, { $el: rb.el, $event: e });
+        let url, body;
+        try {
+            url = app.url(a.url, s);
+            body = a.body != null ? fns[a.body](s) : a.form && !get && a.method != 'DELETE' ? serialize(rb.el) : undefined;
+        }
+        catch (err) {
+            return unhandled(toError(err), rb.el);
+        }
+        const drop = a.optimistic != null ? app.ext.optimistic.begin(a.optimistic, s) : () => { };
+        if (get) {
+            st.c?.abort();
+            return void send(rb, a, st, url, body, drop, (st.c = new AbortController()));
+        }
+        const run = () => void send(rb, a, st, url, body, drop);
+        if (!st.n)
+            run();
+        else if (a.concurrency == 'latest') {
+            st.w ? st.w.drop() : app.busy++;
+            st.w = { run, drop };
+        }
+        else {
+            app.busy++;
+            st.q.push(run);
+        }
+    }
+    async function send(rb, a, st, url, body, drop, c) {
+        const el = rb.el;
+        st.n++;
+        el.setAttribute('aria-busy', 'true');
+        if (a.form && a.concurrency == 'block' && !c && !st.off) {
+            st.off = [...el.elements].filter((x) => !x.disabled);
+            for (const x of st.off)
+                x.disabled = true;
+        }
+        try {
+            const result = await req.send(url, { method: a.method, body, signal: c?.signal });
+            if (c && st.c != c)
+                return;
+            drop();
+            if (a.then != null)
+                handle(rb, a.then, null, a.w, { $result: result });
+        }
+        catch (err) {
+            drop();
+            if (isAbort(err) || (c && st.c != c))
+                return;
+            const error = toError(err);
+            a.catch != null ? handle(rb, a.catch, null, a.w, { $error: error }) : unhandled(error, el);
+        }
+        finally {
+            if (c && st.c == c)
+                st.c = null;
+            if (!--st.n) {
+                for (const x of st.off ?? [])
+                    x.disabled = false;
+                st.off = null;
+                const next = st.q.shift() ?? st.w?.run;
+                if (next && next == st.w?.run)
+                    st.w = null;
+                if (next) {
+                    app.busy--;
+                    next();
+                }
+                else
+                    el.removeAttribute('aria-busy');
+            }
+        }
+    }
+    /** The unhandled-error path: `sn-error` event, then `onError`, then the dev console. */
+    function unhandled(error, el, resource) {
+        const target = el ?? root, ev = new CustomEvent('sn-error', { detail: { error, element: target, resource }, bubbles: true, cancelable: true });
+        ET.dispatchEvent.call(target, ev);
+        if (ev.defaultPrevented)
+            return;
+        config.onError?.(error, target);
+        warn(16, resource ? ` loading \`${resource}\`` : '', error.message, error);
+    }
+    // ---- resources
+    function createLoader(def) {
+        const r = createResource(def.name, { key: def.key, order: def.order, locale: () => config.locale?.get(), warn, prep: (x) => (app.prep ? app.prep(x) : x) });
+        r.onDirty = (what) => app.mark((what == 'data' ? '$r.' : '$meta.') + def.name);
+        resources.set(def.name, r);
+        Object.defineProperty(app.page.$r, def.name, { get: r.value, enumerable: true });
+        app.page.$meta[def.name] = r.meta;
+        let url = null, c = null, seq = 0, again = null;
+        const resolve = () => {
+            const s = def.scope < 0 ? app.page : rootScopes[def.scope] ?? app.page;
+            try {
+                return def.when != null && !fns[def.when](s) ? null : app.url(def.src, s);
+            }
+            catch (e) {
+                warn(17, def.name, e.message);
+                return null;
+            }
+        };
+        const loading = (on) => { if (r.meta.loading != on) {
+            r.meta.loading = on;
+            r.onDirty('meta');
+        } };
+        const pick = (path, body) => (path ? path.split('.').reduce((x, k) => x?.[k], body) : body);
+        const fill = (items, total, m) => {
+            l.pager?.appends(m) && r.isCollection ? items.forEach(r.upsert) : r.replace(items);
+            r.setTotal(total);
+            l.pager?.received(items, total, m);
+        };
+        /** stores a response; `req` is the URL it came from, for the page-load cache */
+        const store = (body, req, m = l.pager?.current()) => {
+            let items = pick(def.items, body);
+            if (r.isCollection && !Array.isArray(items)) {
+                warn(12, def.name, def.items ?? '(response)');
+                items = [];
+            }
+            if (Array.isArray(items))
+                items = items.map(clean);
+            const t = def.total ? pick(def.total, body) : null, total = t == null ? null : +t;
+            fill(items, total, m);
+            if (def.cache != null)
+                app.ext.cache?.loaded(def, r, req, items, total, !!l.pager?.appends(m));
+        };
+        /** the request URL for the current page of `u` */
+        const request = (u, m = l.pager?.current()) => withParams(u, m ? l.pager.params(m) : null);
+        const l = {
+            def, res: r, app, pager: null,
+            start() {
+                const el = def.data != null ? found.get(def.data) : null;
+                let data;
+                if (el) {
+                    if (el.localName == 'script' && el.parentElement?.localName == 'head')
+                        try {
+                            data = { v: JSON.parse(el.textContent) };
+                        }
+                        catch {
+                            warn(5, def.name);
+                        }
+                    else
+                        warn(4, def.name);
+                }
+                url = data ? resolve() : null;
+                if (url == null) {
+                    // the page-load cache: show the last confirmed data now; changed() revalidates
+                    const u = def.cache != null && app.ext.cache ? resolve() : null;
+                    if (u != null) {
+                        l.pager?.reset();
+                        const hit = app.ext.cache.read(def, request(u));
+                        // loadedAt stays null: it means the server answered during this page load, and
+                        // guards such as `$meta.user.loadedAt && !user` must not act on another page's data
+                        if (hit)
+                            fill(hit.items, hit.total, l.pager?.current());
+                    }
+                    return l.changed();
+                }
+                l.pager?.reset();
+                store(data.v, request(url));
+                r.meta.loadedAt = env.now();
+            },
+            /** `src` or `when` may have changed: reload from the first page if the URL differs. */
+            changed() {
+                const u = resolve();
+                if (u === url)
+                    return;
+                url = u;
+                l.pager?.reset();
+                if (u != null)
+                    return void l.load();
+                c?.abort();
+                r.replace(r.isCollection ? [] : null);
+                loading(false);
+            },
+            /** Repeats the current request; several calls in one task share one request. */
+            refetch: () => (again ??= Promise.resolve().then(() => { again = null; return l.load(); })),
+            async load(move) {
+                if (url == null)
+                    return;
+                c?.abort();
+                const ctl = (c = new AbortController()), n = ++seq, m = l.pager && (move ?? l.pager.current());
+                const mark = r.startLoad();
+                let loaded = false;
+                loading(true);
+                try {
+                    const req = withParams(url, m ? l.pager.params(m) : null);
+                    const body = await loadShared(req, ctl.signal);
+                    if (n != seq)
+                        return;
+                    store(body, req, m);
+                    loaded = true;
+                    r.meta.error = null;
+                    r.meta.loadedAt = env.now();
+                }
+                catch (e) {
+                    if (n != seq || isAbort(e))
+                        return;
+                    const error = toError(e);
+                    r.meta.error = error;
+                    r.onDirty('meta');
+                    unhandled(error, null, def.name);
+                }
+                finally {
+                    // writes made while this load ran win over its (older) response
+                    r.endLoad(mark, loaded);
+                    if (n == seq) {
+                        c = null;
+                        loading(false);
+                    }
+                }
+            },
+        };
+        if (def.paginate)
+            l.pager = app.ext.paginate.pager(l);
+        r.loader = l;
+        loaders.push(l);
+    }
+    /** GETs `url`; concurrent loads of one URL share one request, aborted when no one waits. */
+    function loadShared(url, signal) {
+        let e = shared.get(url);
+        if (!e) {
+            const c = new AbortController(), entry = { n: 0, c, p: req.send(url, { signal: c.signal }) };
+            entry.p.catch(() => { }).finally(() => shared.get(url) == entry && shared.delete(url));
+            shared.set(url, (e = entry));
+        }
+        const entry = e;
+        entry.n++;
+        return new Promise((ok, no) => {
+            let done = false;
+            const leave = () => { done = true; entry.n--; signal.removeEventListener('abort', abort); };
+            const abort = () => {
+                if (done)
+                    return;
+                leave();
+                if (!entry.n) {
+                    entry.c.abort();
+                    shared.delete(url);
+                }
+                no(new DOMException('', 'AbortError'));
+            };
+            signal.aborted ? abort() : signal.addEventListener('abort', abort);
+            entry.p.then((v) => done || (leave(), ok(v)), (err) => done || (leave(), no(err)));
+        });
+    }
+}
+export function withParams(url, params) {
+    if (!params)
+        return url;
+    const [path, hash] = url.split('#'), [base, query] = path.split('?'), q = new URLSearchParams(query);
+    for (const k in params)
+        q.set(k, params[k]);
+    return `${base}?${q}${hash ? '#' + hash : ''}`;
+}
+/** Indexes (into `seq`) of a longest increasing subsequence, ignoring -1 entries. */
+export function lis(seq) {
+    const tails = [], prev = [];
+    seq.forEach((v, i) => {
+        if (v < 0)
+            return;
+        let lo = 0, hi = tails.length;
+        while (lo < hi) {
+            const m = (lo + hi) >> 1;
+            seq[tails[m]] < v ? (lo = m + 1) : (hi = m);
+        }
+        prev[i] = tails[lo - 1];
+        tails[lo] = i;
+    });
+    const keep = new Set();
+    for (let k = tails.at(-1); k != null; k = prev[k])
+        keep.add(k);
+    return keep;
+}
+/** Serializes a form's named controls to nested JSON, or FormData if it has a file input. */
+export function serialize(form) {
+    const controls = [...form.elements];
+    if (controls.some((c) => c.type == 'file'))
+        return new FormData(form);
+    const out = Object.create(null), boxes = {};
+    for (const c of controls)
+        if (c.type == 'checkbox')
+            boxes[c.name] = (boxes[c.name] ?? 0) + 1;
+    for (const c of controls) {
+        const { name, type } = c, segs = name?.match(/[^.[\]]+/g);
+        if (!segs || c.disabled || /^(submit|button|reset|image|fieldset|output)$/.test(type) || (type == 'radio' && !c.checked) || segs.some((s) => BAD_KEY.test(s)))
+            continue;
+        const k = segs.pop();
+        let o = out;
+        segs.forEach((s, i) => (o = o[s] ??= /^\d+$/.test(segs[i + 1] ?? k) ? [] : Object.create(null)));
+        if (type == 'checkbox' && boxes[name] > 1)
+            (o[k] ??= []).push(...(c.checked ? [c.value] : []));
+        else
+            o[k] = type == 'checkbox' ? c.checked
+                : /^(number|range)$/.test(type) ? (c.value === '' ? null : +c.value)
+                    : type == 'select-multiple' ? [...c.selectedOptions].map((x) => x.value)
+                        : c.value;
+    }
+    return out;
+}